Add vector emojis to your websites

#javascript #webdev #programming #css

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" />

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>

You can find a complete list of the emojis here

See it in action on codepen

let me know if you have any questions or feedback

Top comments (8)

Daniel Schulz • Jul 13 '22

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.

Alohe • Jul 13 '22 • 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

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.

Marco Colli • Jul 13 '22

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

Alohe • Oct 5 '22

Done!

Trung Hồ • Jul 13 '22

Thanks a lot!

The Vedic Developer • Jul 13 '22

Will this work on guthub readme ?

Alohe • Jul 16 '22

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