DEV Community

Cover image for Add vector emojis to your websites
Alohe
Alohe

Posted on

Add vector emojis to your websites

Using Emoji cloud you can to add 300+ custom vector emojis to your projects in seconds

๐ŸŒ Include the CSS file via CDN

Add the following code right before the closing </head> tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alohe/emojicloud/emojicloud.css" />
Enter fullscreen mode Exit fullscreen mode

That's it, you can now start adding SVG emojis on your web page

<h1><i class="emoji-unicorn"></i></h1>
<h2><i class="emoji-unicorn"></i></h2>
<h3><i class="emoji-unicorn"></i></h3>
<h4><i class="emoji-unicorn"></i></h4>
<h5><i class="emoji-unicorn"></i></h5>
<h6><i class="emoji-unicorn"></i></h6>
Enter fullscreen mode Exit fullscreen mode

emoji cloud demo

You can find a complete list of the emojis here

emoji cloud cheetsheet

See it in action on codepen

let me know if you have any questions or feedback

Top comments (8)

Collapse
 
iamschulz profile image
Daniel Schulz

Could you please include descriptions in your SVGs? They're not accessible to screen readers.

Also, what's the advantage of using your SVGs instead of system-default emojis? As far as I can see, there are no custom ones included in your set? And even if there was, there's a lot of CSS overhead since it isn't treeshake-able, as far as I can see.

Collapse
 
alohe profile image
Alohe • Edited

You should look at them as font-awesome icons insted of system-default emojis, also all the emojis are custom designed and vector SVG's.

The main advantage of using this would be having a consistent UI across all devices, as you may know emojis varry on different devices

emojis across devices

The CSS file is 50kb and hosted on jsdeliver so it should be fast

It's also open-source on github if you wanna help =)

Thanks for the feedback.

Collapse
 
collimarco profile image
Marco Colli

Remember to add a license to the repo :) otherwise nobody can use them

Collapse
 
alohe profile image
Alohe

Done!

Collapse
 
trung_ho profile image
Trung Hแป“

Thanks a lot!

Collapse
 
thevedicdeveloper profile image
The Vedic Developer

Will this work on guthub readme ?

Collapse
 
alohe profile image
Alohe

So apparently GitHub does not support CSS rendering for security purposes.
But you can use the SVG version of this to include it as an image in your readme files.

First got to alohe.github.io/emojicloud/design and copy the link of the emoji you want

Image description

Then just add it as an image

Image description

Collapse
 
thevedicdeveloper profile image
The Vedic Developer

That's great..

Apart from SVG you can also use GIF emojis like ๐Ÿ‘‡

emoji-tag emoji
anguished-face
anxious-face-with-sweat

These are available on the emojis.wiki/telegram/

You can read more about it here...