Table of Contents
You know what emojis are! Learn how to use them in your web documents like a pro.
From its humble beginnings in 1999, Emojis are all the rage these days. It's no longer something that only people half our age use to communicate. You and I use them all the time, and almost every chat or messaging-related app under the sun provides great support for it:
We already know that emojis are these tiny colorful icons. While this may give you the impression that they are images in the traditional sense, they aren't. They are more like the letters, numbers, punctuation marks, and weird symbols that we tend to bucket as text:
Towards the end of this tutorial, I go into much greater detail on what emojis are and some of the details under the covers that makes them work. For now, just know the following:
To say we just scratched the surface in understanding emojis is an overstatement, but this is enough for us to get started. It's time to see emojis in action inside our web documents!
To use emojis in HTML, the first thing we need to do is set the document's character encoding to UTF-8. This ensures our emojis display consistently across the variety of browsers and devices your users may be running. Doing this is simple. Inside your head tag, be sure to specify the following meta tag:
Once you've done this, now comes the fun part of actually getting an emoji to display. You have two ways of being able to do this, each with a varying degree of funness. One way is by using the emoji directly in your HTML. The other way is by specifying the emoji via its primitive numerical representation. We'll look at both of these cases.
The easiest way to display an emoji involves simply copying and pasting. You just need an app or web site that allows you to copy emojis in their native, character form. One great place for doing that is Emojipedia. You can use Emojipedia to search or browse for whatever emoji you are looking for. Once you've found your emoji, there is a section where you can easily see and copy the emoji:
Once you have copied it, just paste it in its intended destination in your markup:
Because emojis are treated as text-based content, you can paste them almost anywhere in your document where text is supported. Now, if this is your first time seeing emojis randomly appearing inside your text-based code or your code editor, it will look a bit strange:
Your traditional text-only environment where you've written your markup all these years will suddenly have something visual in it. Don't worry. It's cool. When you preview your HTML document in your browser, everything will still work.
Before we wrap our look at emojis in HTML, let's talk about accessibility. Emojis are ultimately visual artifacts, but they are represented as text under the covers using elements like p and span that are semantically ambiguous in this case. Screen readers and related tools may not interpret what the emoji is trying to signify properly, but the solution is simple. To use emojis in an accessibility (a11y as the cool kids call it!) friendly way, set the role and aria-label attributes on the element that you are using to reprsent your emoji:
<p role="img" aria-label="hamburger">🍔</p>
With this change, you still get to use emojis in HTML and be accessibile at the same time. That's a win, win,...win! Thanks to Eva Larumbe for pointing this out.
If specifying the emoji directly doesn't work, there is a less fun path you can take. You can use the emoji's numerical representation and specify it in your markup instead. If you scroll down in Emojipedia for any emoji, you'll see the numerical representation (more formally known as a codepoint) displayed:
For the hamburger emoji, the codepoint is U+1F354. To specify this emoji in HTML using the codepoint, we have to modify the value a bit. Add the &#x characters, remove the U+1 from the beginning of the codepoint, and just add the remaining digits from the codepoint as part of any text element.
Here is our hamburger emoji in codepoint form:
When you preview your document in your browser, you'll still see the hamburger emoji displayed correctly...despite it looking strange in our markup compared to the copy/paste solution we looked at earlier.
You can totally use emojis in CSS. The same tricks we saw for emojis in HTML will work with only some slight modifications. You can specify the emoji directly:
You can also specify the emoji by setting the codepoint:
How you specify the codepoint is a bit different than what we saw for HTML. All you have to do is remove the U+ from the unicode endpoint and add the \0 (slash zero) characters just before it.
document.body.innerText = "😀";
To use an emoji via its codepoint value instead, we have to pass them through the String.fromCodePoint method. This method takes a codepoint value as its argument:
document.body.innerText = String.fromCodePoint(0x1F354);
let emojis = [0x1F600, 0x1F604, 0x1F34A, 0x1F344, 0x1F37F, 0x1F363, 0x1F370, 0x1F355,
0x1F354, 0x1F35F, 0x1F6C0, 0x1F48E, 0x1F5FA, 0x23F0, 0x1F579, 0x1F4DA,
0x1F431, 0x1F42A, 0x1F439, 0x1F424];
We've glossed over what emojis really are and what purpose codepoints serve. To start from what we said earlier, emojis are just characters like all of the text that we type. That is often a confusing thing to understand. A part of the reason for this confusion is because we tend to think of characters as just what our keyboards support. Here is the problem: What our keyboards allow us to represent is a very tiny percentage of the overall set of characters that is available to us.
If you want to see this for yourself, you can see all the characters your operating system supports by using Character Map on Windows or the Character Viewer on Mac:
Notice that you have many categories of characters that go beyond just the usual things we see on a typical keyboard. If we had to have a keyboard to support every character our operating system supports, it would need to be at least...three times bigger than the usual keyboard.
Ok! Let's go one level deeper. We saw that the emojis we wanted to use had a bizarre numerical representation. As it turns out, ALL characters we use have the same bizarre representation under the covers as well. On our screens, we may see letter characters like A, B, C, D, E, F, G. Under the covers, these characters look like the following: U+0041, U+0042, U+0043, U+0044, U+0045, U+0046, and U+0047. We already said that this representation is known as a codepoint, but the more precise term is Unicode codepoint. This detail is important to know about, for Unicode is an industry standard for ensuring the text you see on your screen is the same on another screen somewhere else - regardless of language, locale, system capabilities, operating system, and so on. A codepoint is the most basic unit of representing information in Unicode. A series of codepoints represents characters and text. Phew!
The Unicode standard ensures that the appropriate codepoints represent, in this case, a cat. Each implementer has full creative freedom in interpreting that as they wish. For some developers, this inconsistency isn't desirable. What they have done instead is re-create the emojis in SVG or PNG form so that they can ensure consistency. An example of someone who does that is Twitter! We used their emoji picker screenshot to start this tutorial off at the beginning, and every emoji you see there isn't from our operating system or platform. It is from the really awesome Twemoji project. There are many emoji libraries out there that you can use, so use whichever one you like if the native emoji support isn't what you are looking for.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!