Twemoji and Fluent UI Emoji — Free open source emoji packs

I always take emojis for granted when I don’t need them but once I do, they are all over the place. Custom emojis in a chatting application? Check. Reactions in games? Yup. Cute faces in notifications? Sure. Native browser emojis look different across different operating systems (e.g., macOS vs. Windows vs. old Android). Therefore, I switched to some pre-built emoji libraries.

My favorites come from Twitter and Microsoft. They are both free, well maintained, and support all the Unicode emojis. And most importantly, their designs are quite distinctive from each other, so feel free to choose whichever one fits your project better.

Twemoji is an open source emoji set by Twitter. It supports all the standard unicode emojis rendered in a simple, flat style using both SVG and PNG formats. This is the same emoji style we’ve been seeing on Twitter for years — clean, cute, uniform. Twemoji has a JavaScript library that analyzes your html content and swaps out native emojis with Twemoji images, ensuring cross platform consistency. To include this library in your project, simply link to the CDN provided by unpkg using one <script> tag. Alternatively, you can also use this library as an npm module and bundle it yourself. Under the hood, this library is released under the MIT license.

Fluent UI Emoji by Microsoft is another set of emojis that are much more detailed and realistic, almost like product photos. Each emoji is available in four styles: 3D, Color (flat but colorful), High Contrast, and Flat. These are all PNG images stored in the assets folder, named after the emoji itself. There’s no JavaScript library to include, just download the images you need and start using them. Under the hood, this library is also released under the MIT license, meaning you can use it in commercial projects.

1How to use these in your project

If you are using Twemoji, the easiest way is to link to the CDN. Simply include the <script> tag in your html file, then run twemoji.parse() on the document body and all the emojis in your page will be converted.

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"></script>

npm install twemoji

If you are using Fluent UI Emoji, clone the repository and download the png images from the assets folder. Each emoji is stored in its own subfolder under the assets folder, whose name is the actual emoji name.

git clone https://github.com/microsoft/fluentui-emoji.git

The directory is assets/Emoji Name/Style/filename.png. For example, assets/Grinning face/3D/grinning_face_3d.png. Your agent can traverse through the folders and grab the emojis you need.