As a web, mobile or software developer, you’re probably including emojis in your application the wrong way. This is why.

Starting With An Example

The common mistake programmers make when it comes to include emojis in their application, is to simply copy them, for instance from a website such as Emojipedia, and then paste it into the source code.

This is also what I used to do.

Source code:

<h2>
  I'm a pretty header! 🎉
</h2>

Output:
I'm a pretty header! 🎉

The Problem

As you can see, including emojis that way seems to work just fine. The emoji we copy-pasted is rendered the way we wanted, yee-haw!

Now, imagine being so proud of the application or feature you just created that you want to showcase it, let's say, to your grandparents.

As you might have guessed, your grandparents may not have the latest smartphone or laptop on the market. It might not display emojis at all, or just the emoji you used is not supported yet by their device.

Hence, this is what they could see:

I'm a pretty header! ▯

Probably not what you wanted them to see...

Why Does This Happen ?

From phonearena:

Emoji works exactly the same way as regular text — a Unicode code point corresponds to every character in the Unicode catalog, Emoji included. When a device sends a message, it sends a series of Unicode code points. When another device receives said message, it interprets the code points and displays letters, numbers and Emojis. It’s actually a bit more complicated than that, but this is the basic principle.

As you can see, the emoji is interpreted by the device, which means that their appearance may vary from one device to another.

Thus, it may not appear the way you wanted the user to see it, and possibly alter your application’s design…

The gift emoji, displayed by different devices.

The Workaround

Fortunately, whether you are a web, mobile or software developer, there is a quick and easy workaround for this problem, and that is Twemoji.

This open source project by Twitter converts Unicode emoji characters into normal SVG images, which are icons you can enlarge as much as you like without losing any quality — also known as vector images.

This way, your emojis will be displayed in the same way on all devices that are able to display images — which means, any smartphone and PC.

Now let’s dive into a concrete example. We’ll use the Twemoji library into our web application.

1. The HTML Code

<h1>
  I'm a pretty header! 🎉
</h1>

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script src="app.js"></script>

2. The JavaScript Code

twemoji.parse(document.body)

Yes, that’s all you need! 😲

3. Adding A Bit Of Style

The previous code will create a new <img> element, with the emoji class.

<img draggable="false" class="emoji" alt="🎉" src="https://twemoji.maxcdn.com/v/13.0.1/72x72/1f389.png">

However, if we don’t add any CSS styles, this is what the output looks like…

Hence, just add these 6 lines to your CSS file:

.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.1em;
}

We set the width and height the same as the surrounding text, and vertically center the emoji.

And now see the final output…

This is how your emoji will look like on all devices using your application. Awesome! Right?

Caveats

When using this library, you have to be aware that it will create additional requests. Indeed, the output code is an <img> tag, with a source attribute to the Twemoji's MaxCDN url.

This can be problematic if you want your application to be quickly loaded through poor internet connections.

Also, the Twemojis appearance may not be to everyone's liking.

Conclusion

Accessibility is important: your users should be able to see any content of your application. The little trick we’ve seen in this article is in fact used in Discord applications, and also in other famous ones — even Twitter itself.

Now, you can showcase your brand new projects to your grandparents, no matter what old device they are using. 😏