Using Emojis in HTML: Three Approaches
There are three ways to include emojis in an HTML document: pasting the literal UTF-8UTF-8
A variable-width Unicode encoding that uses 1 to 4 bytes per character, dominant on the web (used by 98%+ of websites). 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 EmojiEmoji
A Japanese word (絵文字) meaning 'picture character' — small graphical symbols used in digital communication to express ideas, emotions, and objects. 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 fontEmoji Font
A digital font file containing color emoji glyph designs, using technologies like COLR, CBDT, SVG, or sbix for rendering..
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 UnicodeUnicode
Universal character encoding standard that assigns a unique number to every character across all writing systems and symbol sets, including emoji. code pointCode Point
A unique numerical value assigned to each character in the Unicode standard, written in the format U+XXXX (e.g., U+1F600 for 😀). in decimal or hexadecimal notation.
Decimal Format
<p>Fire: 🔥</p>
Hexadecimal Format (Recommended)
<p>Fire: 🔥</p>
The hex format (&#x...;) is more commonly used because Unicode code points are almost always documented in hex. Here are common examples:
| Emoji | Code Point | HTML Entity |
|---|---|---|
| 😀 | U+1F600 | 😀 |
| 🔥 | U+1F525 | 🔥 |
| ❤️ | U+2764 U+FE0F | ❤️ |
| 👍 | U+1F44D | 👍 |
| ✅ | U+2705 | ✅ |
| 🎉 | U+1F389 | 🎉 |
| 🌍 | U+1F30D | 🌍 |
| 💬 | U+1F4AC | 💬 |
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 sequences (like 👩💻 woman technologist) use a Zero Width JoinerZero Width Joiner (ZWJ)
An invisible Unicode character (U+200D) used to join multiple emoji into a single composite emoji, such as combining people and objects into profession emoji. (U+200D) between components:
<!-- Woman Technologist: 👩 + ZWJ + 💻 -->
<span>👩‍💻</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 EmojiColor Emoji
Full-color emoji rendered using bitmap images or color vector graphics, as opposed to monochrome text-style rendering.", "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 presentationText Presentation
The rendering of a character as a monochrome text symbol, either by default or when Variation Selector-15 is applied. (monochrome) -->
<span>☎︎</span>
<!-- Emoji presentationEmoji Presentation
The default rendering of a character as a colorful emoji glyph, either inherently or when triggered by Variation Selector-16. (color) -->
<span>☎️</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
| Task | Code |
|---|---|
| Declare UTF-8 | <meta charset="UTF-8"> |
| Literal emoji | 🔥 (paste directly) |
| Hex entity | 🔥 |
| CSS content | content: "\1F525" |
| Hide from screen reader | aria-hidden="true" |
| Label for screen reader | role="img" aria-label="fire" |
| Force emoji rendering | Append ️ |
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