Open sourcing Twitter emoji for everyone

Earlier this year, we collaborated with our friends at @Iconfactory on a set of 872 beautiful emojis so Tweets containing emoji characters would look as sharp on the web as they do in mobile apps. Now we’re pleased to announce that these emoji are available as an open source library to the developer community at large.

Since we’ve gotten many requests to use our emoji in various projects, as of today we’re open sourcing our emoji. We hope that the permissive licensing of this project will enable the spread of emoji adoption across platforms. To get the #twemojiparty started, we partnered with our friends at Automattic so the WordPress crowd can start using them right away.

Getting Started

Emojis originated in Japan and the term literally translates to “picture character.” They are a convenient way to convey an expression in one character and have even been standardized by the Unicode Consortium. Twemoji is compliant with the latest 7.0 Unicode version and features a library of 872 emoji.

The project ships with the simple twemoji.js library that can be easily embedded in your project. We strongly recommend looking at the preview.html source code to understand some basic usage patterns and how to take advantage of the library, which is hosted by our friends at MaxCDN. In most cases, all you need to do is add this script:

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

For more advanced uses, the twemoji library has one main method exposed: parse. You can parse a simple string, that should be sanitized, which will replace emoji characters with their respective images. For example:

twemoji.parse('I \u2764\uFE0F emoji!');

This snippet will be translated into the following HTML:

I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="//abs.twimg.com/emoji/v1/36x36/2764.png"> emoji!

For those that prefer to work with the DOM you can do that too.

var div = document.createElement('div');
div.textContent = 'I \u2764\uFE0F emoji!';
document.body.appendChild(div);

twemoji.parse(document.body);

var img = div.querySelector('img');

// note the div is preserved
img.parentNode === div; // true

img.src;        // abs.twimg.com/emoji/v1/36x36/2764.png
img.alt;        // \u2764\uFE0F
img.class;      // emoji
img.draggable;  // false

Finally, the project documentation also contains some super useful tips to help you get started.

Acknowledgements

Thanks to Chris Aniszczyk, Andrea Giammarchi and the @TweetDeck team for opening our emoji to the world. And we’d like to give a shout-out to Joen Asmussen (@altjoen), Marcus Kazmierczak (@mkaz) and Min Wei (@mintwt) from Automattic encouraging us to do this, and to MaxCDN’s Justin Dorfman (@jdorfman) for providing a community CDN. Finally, of course, special thanks to our friends at The Iconfactory for collaborating with Jeremy Reiss and us on the entire emoji set.

We look forward to all the great things you’ll create with this and our other ongoing contributions to the open source community.