How to Use Emojis in HTML: Entities, UTF-8, and CSS

Using Emojis in HTML: Three Approaches

There are three ways to include emojis in an HTML document: pasting the literal UTF-8UTF-8
每字符使用1至4个字节的可变长度Unicode编码方式，是互联网上最主流的编码，被98%以上的网站采用。 character, using HTML numeric character references (entities), or inserting them via CSS. Each approach has trade-offs in readability, file size, and compatibility. This guide covers all three methods plus accessibility and rendering best practices.

Step 1: Set Your Document to UTF-8

Before doing anything else, ensure your HTML document declares UTF-8 encoding. Without this, emojis may render as garbled text or question marks.

Add this tag inside the <head> element:

<meta charset="UTF-8">

A complete minimal HTML5 document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Emoji Page</title>
</head>
<body>
  <p>Hello 🌍</p>
</body>
</html>

Also make sure your server sends Content-Type: text/html; charset=utf-8 in HTTP response headers and that your text editor saves files as UTF-8 (not Latin-1 or Windows-1252).

Method 1: Literal UTF-8 Characters (Recommended)

The simplest and most readable approach is to paste the emoji character directly into your HTML source code.

<p>We love pizza 🍕 and sushi 🍣</p>
<h2>Today's weather: ☀️ Sunny</h2>
<button>Submit ✅</button>

As long as your file is saved as UTF-8 and your <meta charset="UTF-8"> tag is present, this works perfectly in every modern browser. Emojis are stored as multi-byte UTF-8 sequences — the browser reads them correctly and renders the glyph using the system's emoji font.

Advantages: Readable source, no encoding required, compact file size.

Disadvantages: Emojis can look like characters in some code editors; some older tools may mangle non-ASCII bytes.

Method 2: HTML Numeric Character References (Entities)

If you cannot safely store emoji characters in your source file, use HTML numeric character references. These reference the Unicode code point in decimal or hexadecimal notation.

Decimal Format

<p>Fire: &#128293;</p>

Hexadecimal Format (Recommended)

<p>Fire: &#x1F525;</p>

The hex format (&#x...;) is more commonly used because Unicode code points are almost always documented in hex. Here are common examples:

Multi-Codepoint Emojis

Some emojis consist of multiple Unicode code points joined together. The ❤️ emoji is actually two code points: U+2764 (heart) and U+FE0F (variation selector-16 that forces emoji rendering).

ZWJ零宽连接符（ZWJ） (ZWJ)
一个不可见的Unicode字符（U+200D），用于将多个表情符号合并为单一复合表情符号，例如将人物与物体组合成职业表情符号。 sequences (like 👩‍💻 woman technologist) use a Zero Width Joiner (U+200D) between components:

<!-- Woman Technologist: 👩 + ZWJ + 💻 -->
<span>&#x1F469;&#x200D;&#x1F4BB;</span>

Method 3: Emoji via CSS content Property

You can insert emojis in CSS using the content property on pseudo-elements. This is useful for decorative emojis that don't need to be in the DOM.

.success::before {
  content: "✅ ";
}

.warning::before {
  content: "⚠️ ";
}

.featured::after {
  content: " ⭐";
}

Or using Unicode escape syntax in CSS:

.fire-label::before {
  content: "\1F525 ";   /* 🔥 */
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

Important: CSS-inserted emojis are not accessible to screen readers by default. Use this method only for purely decorative emojis. For meaningful content, always use HTML with proper aria-label attributes.

Controlling Emoji Rendering with Variation Selectors

Unicode defines two variation selectors that control whether a character renders as text or emoji:

• U+FE0E (VS-15): Forces text/monochrome rendering ☎︎
• U+FE0F (VS-16): Forces emoji/color rendering ☎️

<!-- Text presentation (monochrome) -->
<span>&#x260E;&#xFE0E;</span>

<!-- Emoji presentation (color) -->
<span>&#x260E;&#xFE0F;</span>

This matters for characters that have both a text and emoji form, such as ☎ (telephone), ✉ (envelope), ✂ (scissors), and many others.

Styling Emojis with CSS

Emojis respect standard CSS sizing properties:

.large-emoji {
  font-size: 2rem;
}

.emoji-baseline {
  vertical-align: middle;
  line-height: 1;
}

/* Scale without blurring (emojis are vector/font-based) */
.hero-emoji {
  font-size: 5rem;
}

For controlling emoji font across browsers, set a font stack that prioritizes system emoji fonts:

.emoji-text {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Segoe UI Symbol", "Android Emoji", sans-serif;
}

Accessibility: Making Emojis Meaningful

Screen readers read emojis aloud using their Unicode name — 🔥 is read as "fire" and ❤️ is read as "red heart." This works fine for simple cases, but causes problems when emojis are used decoratively (read unnecessarily) or when their meaning depends on context.

Hiding Decorative Emojis

<!-- Screen reader will skip this emoji -->
<span aria-hidden="true">🎉</span> Congratulations!

Labeling Meaningful Emojis

<!-- Screen reader reads "thumbs up" -->
<span role="img" aria-label="thumbs up">👍</span>

<!-- Screen reader reads "warning: this action cannot be undone" -->
<span role="img" aria-label="warning">⚠️</span> This action cannot be undone.

Emoji-Only Content

If an emoji is the entire content of a button or link, always provide an accessible label:

<button aria-label="Add to favorites">⭐</button>
<a href="/fire-sale" aria-label="View fire sale">🔥</a>

Emojis in Page Titles and Meta Tags

Emojis work in <title> tags and appear in browser tabs and search results in most modern browsers and search engines:

<title>🍕 Best Pizza Recipes | FoodSite</title>
<meta name="description" content="🔥 Hot new recipes updated weekly.">
<meta property="og:title" content="🍕 Best Pizza Recipes">

Google Search renders emojis in meta descriptions in many cases. However, use sparingly — excessive emojis can look spammy to search engines.

Quick Reference

Explore More on EmojiFYI

• Find the Unicode code point for any emoji with the Sequence Analyzer
• Browse and copy emojis with the Emoji Keyboard
• Learn how ZWJ sequences work in the Glossary
• Search for any emoji by name or keyword at EmojiFYI Search