EmojiTrove

Emoji in HTML: Characters, Codes and Setup That Works

Add emoji to HTML with UTF-8 characters or decimal and hex codes. Includes ✅ and 😎 codes, accessibility, styling, and fixes for broken emoji.

Published 2026-10-25

Emoji in HTML: Characters, Codes and Setup That Works

Emoji in HTML: Characters, Codes and Setup That Works

Developer entering emoji in HTML editor

The fastest way to put an emoji in HTML is to paste the character into your file, save it as UTF-8, and declare <meta charset="utf-8"> in the <head>. If you can’t trust the pipeline your file travels through, write the emoji as a numeric reference instead: &#128526; for 😎 or &#x2705; for ✅. This guide covers both methods, the codes, the names, styling, accessibility and the reasons an emoji sometimes shows up as a box or a question mark.

Emoji Trove
Find the Right Emoji Faster
Search a categorized library of over 1,900 emojis, then copy the one you need for your HTML or content.
Search the emoji library

TL;DR

Table of Contents

Method 1: paste the emoji as a character

Emoji are characters, like letters. With UTF-8 you can paste them into modern editors, and the browser renders them with a system or fallback emoji font, according to SitePoint’s guide to emoji in HTML. That means no image files and no icon library.

Here is a complete page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Launch day 🚀</title>
</head>
<body>
  <h1>Welcome 😎</h1>
  <p>Task finished ✅</p>
</body>
</html>

Three details matter:

  1. Declare UTF-8 in the head. The web.dev documentation on document structure says to set the encoding with <meta charset="utf-8" />, and notes that declaring UTF-8 lets you include emoji even in the title.
  2. Save the file as UTF-8. The declaration only tells the browser what to expect. If your editor saves in another encoding, the bytes won’t match. Most editors show the encoding in the status bar.
  3. Put the meta tag early. Keep it near the top of the <head>, before the title, so the browser knows the encoding before it reads any emoji.

If you also serve the page over HTTP, make sure the server’s Content-Type header doesn’t announce a different charset. A header that disagrees with your meta tag is a common cause of garbled symbols.

How to get the emoji to paste

You have a few options:

Method 2: decimal and hexadecimal references

A numeric character reference writes the emoji as its Unicode code point. The two forms are:

SitePoint notes that references can help where raw emoji might get garbled. The trade-off is readability: &#128526; tells you nothing when you scan the source, while 😎 is obvious at a glance.

Codes for ✅ and 😎

The two emoji readers ask about most:

Emoji Unicode name Code point Decimal Hex
😎 Smiling Face with Sunglasses U+1F60E &#128526; &#x1F60E;
✅ White Heavy Check Mark U+2705 &#9989; &#x2705;

The 😎 values match the W3Schools emoji faces reference, which lists decimal 128526 and hex 1F60E. For ✅, the Compart entry for U+2705 gives the same code point and its HTML entities.

You can convert any code point yourself. Take the hex value after “U+”, and put &#x in front and ; after it. For decimal, convert the hex number to base 10. A browser console does it in one line: parseInt('1F60E', 16) returns 128526.

Use in markup

<p>Cool: &#128526; or &#x1F60E;</p>
<p>Done: &#9989; or &#x2705;</p>

Both lines in each pair render identically to pasting the character.

Do named entities exist for emoji?

Not in a practical way. HTML’s named references such as &amp; and &copy; cover classic symbols, not the emoji set. For emoji, choose between the raw character and the numeric reference. The “official name” you may be looking for, like “smiling face with sunglasses”, is a Unicode and CLDR name, not an HTML entity.

Emoji names: where the official list lives

The reference most developers rely on is the Unicode Consortium’s Full Emoji List. It gives each emoji and sequence with its CLDR name, keywords and vendor images side by side. That last part is useful for seeing how one emoji differs between platforms.

Two things to know when you use it:

When you write code, use the Unicode name as a comment. It makes &#x1F60E; readable for the next person:

<!-- U+1F60E smiling face with sunglasses -->
<span>&#x1F60E;</span>

Sequences: skin tones, flags and joined emoji

Some emoji aren’t a single code point. A skin-tone variant is a base emoji followed by a modifier. A family or profession emoji can join several emoji with an invisible joiner. Raw pasting keeps these intact, because your editor inserts the whole sequence.

If you use numeric references, you must write every code point of the sequence in order. Miss one and the browser shows the pieces separately, such as a person next to a colored square. For anything beyond a single code point, pasting the character is safer. Our guide to emoji combinations that render across devices shows which sequences behave well and which fall apart on older systems.

How emoji sequences combine code points

Why the same emoji looks different everywhere

Browsers draw emoji with whichever emoji font the system or fallback provides, so appearance varies by platform, as SitePoint explains. An emoji that looks like a glossy sticker on one phone may look flatter on a desktop. Design for that: don’t write copy that depends on a specific facial expression, and don’t build a layout that assumes an exact glyph width.

Text or color presentation

Some characters can appear as plain black text symbols or as colored emoji. Chrome 131 added support for the CSS property font-variant-emoji, which controls colored versus monochrome glyphs. The Chrome 131 release notes also note that the variation selectors U+FE0E and U+FE0F can select text and emoji presentation.

<span>&#x2705;&#xFE0E;</span>  <!-- text style where supported -->
<span>&#x2705;&#xFE0F;</span>  <!-- emoji style -->

In CSS:

.status-icon { font-variant-emoji: emoji; }

The Chrome 145 beta post adds a detail for Forced Colors Mode: emoji whose font-variant-emoji value computes to normal or unicode render with monochrome glyphs when available. If your site supports high-contrast users, expect your emoji to lose color there.

Styling emoji with CSS

Because an emoji is text, ordinary text properties apply. Per SitePoint, you can change font-size, and you can transform or animate an emoji once it is display: inline-block.

<span class="big-emoji">&#x1F60E;</span>

.big-emoji {
  font-size: 3rem;
  display: inline-block;
  transition: transform 0.2s;
}
.big-emoji:hover { transform: rotate(10deg) scale(1.1); }

CSS color generally won’t recolor a full-color emoji, since the glyph carries its own colors. If you need exact control of color, size and consistent look on every device, an SVG icon is the better tool, and emoji are the better tool when you want zero extra files.

Accessibility: don’t make screen readers chatter

A screen reader may read an emoji’s full name aloud, which gets noisy when you use several in a row. The W3C’s guidance on a Unicode character with an on-screen text alternative says that when a character conveys information, you should provide a visible text alternative, and that aria-hidden="true" can prevent inaccurate announcements of the character.

In practice:

<!-- Decorative: hide it -->
<h2><span aria-hidden="true">&#x1F680;</span> Launch checklist</h2>

<!-- Meaningful: keep a visible label -->
<p><span aria-hidden="true">&#x2705;</span> Payment received</p>

The rule of thumb: the sentence should still make sense with every emoji deleted. If “✅” is the only sign that a task is done, add the word “Done” next to it.

When emoji break: a quick checklist

If you see a box, a diamond with a question mark, or strings like 😎, work through this list:

  1. Is the meta charset present? It should read utf-8 and sit in the head.
  2. Was the file saved as UTF-8? Re-save it with the right encoding.
  3. Does the server send a conflicting header? Check the Content-Type response in your browser’s network panel.
  4. Does a CMS, database or email tool strip characters? Some older systems mangle raw emoji. Switch to numeric references, the case SitePoint flags.
  5. Is the emoji too new for the device? An emoji from a recent Unicode version shows as a box on a system without a font for it. Check the version before relying on it.

Perspective: pick the method by who edits the file

We run a library of more than 1,900 emoji, so we see the same pattern in what people copy and where they paste it. Most trouble comes from the environment, not the emoji. A static page you control in a UTF-8 editor should simply contain the characters, because readable source is easier to maintain. A page that passes through a legacy CMS, a template engine or an email builder is where we’d reach for numeric references.

We also think the biggest mistake is treating emoji as universal. The Unicode list shows the same emoji drawn differently by each vendor, and newer emoji take time to reach older devices. So we recommend choosing common, long-established emoji for anything important, and keeping the meaning in words. Check the meaning first too: an emoji that reads as friendly in one place can read as sarcastic in another, which is why we publish meanings next to every copy button.

— Nkosi

Find, check and copy emoji faster

If you’re building a page and need the right emoji now, our searchable emoji library lets you search by name or browse by theme, copy with one click, and read the meaning and Unicode data before you commit. You can start with themed collections such as the love emoji list with Unicode names, or open a single entry like 🍕 pizza to see its meaning and copy it.

A reusable pattern for real pages

Here is a small snippet that combines the practices above: UTF-8, a decorative emoji hidden from assistive tech, a meaningful one with a label, and a size rule.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Release notes 🚀</title>
  <style>
    .emoji { font-size: 1.25em; display: inline-block; }
  </style>
</head>
<body>
  <h1><span class="emoji" aria-hidden="true">&#x1F680;</span> Release notes</h1>
  <ul>
    <li><span class="emoji" aria-hidden="true">&#x2705;</span> Fixed: login error</li>
    <li><span class="emoji" aria-hidden="true">&#x1F60E;</span> New: dark theme</li>
  </ul>
</body>
</html>

Notice that each emoji is wrapped in a <span>. That gives you a hook for CSS, a place for aria-hidden, and a clear boundary in the markup. For JavaScript-built pages, the same rule applies: put the character in a string and the browser handles it, provided the page itself is UTF-8.

FAQ

What is the code for the ✅ emoji in HTML?

The ✅ emoji is U+2705, “White Heavy Check Mark”. Write it as &#9989; in decimal or &#x2705; in hex, or paste the character directly. Add a text label if the check mark is the only signal that something is complete.

What is the code for the 😎 emoji?

It is U+1F60E, “Smiling Face with Sunglasses”. Use &#128526; (decimal) or &#x1F60E; (hex) in your HTML. Both render the same as pasting 😎 into a UTF-8 file.

Where can I find a list of official emoji names?

Use the Unicode Consortium’s Full Emoji List, which shows each emoji’s CLDR name, keywords and images from several vendors. Skin-tone variants are in a separate Full Skin Tone List. HTML itself doesn’t define emoji names.

How do I write emoji in Chrome?

Chrome relies on your operating system’s picker. On Windows press Win + . and on macOS press Ctrl+Cmd+Space while your cursor is in a text field. Then paste into your HTML editor and keep UTF-8 declared.

Should I use characters or numeric references?

Use raw characters when your files stay in a UTF-8 workflow, because the source stays readable. Use numeric references when a system in the chain garbles raw emoji. Either way the browser draws the same glyph.

Sources

Copy any emoji →