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’reopen 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 beenstandardized 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:

1

<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: 1 twemoji.parse('I \u2764\uFE0F emoji!'); This snippet will be translated into the following HTML: 1 2 3 4 5 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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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. ]