Using Emojis in HTML: Three Approaches
There are three ways to include emojis in an HTML document: pasting the literal UTF-8UTF-8
Eine Unicode-Kodierung variabler Breite, die 1 bis 4 Bytes pro Zeichen verwendet und im Web vorherrschend ist (mehr als 98 % aller 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
Ein japanisches Wort (絵文字) mit der Bedeutung 'Bildzeichen' — kleine grafische Symbole in der digitalen Kommunikation zum Ausdrücken von Ideen, Gefühlen und Objekten. 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 UnicodeUnicode
Universeller Zeichenkodierungsstandard, der jedem Zeichen aller Schriftsysteme und Symbolsätze einschließlich Emoji eine eindeutige Zahl zuweist. code point 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).
ZWJBreitenloser Verbinder (ZWJ)
Ein unsichtbares Unicode-Zeichen (U+200D), das verwendet wird, um mehrere Emoji zu einem zusammengesetzten Emoji zu verbinden, etwa beim Kombinieren von Personen und Objekten zu Berufs-Emoji. sequences (like 👩💻 woman technologist) use a Zero Width Joiner (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 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>☎︎</span>
<!-- Emoji presentation (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