📖 How-To Guides

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
Codificação Unicode de largura variável que usa de 1 a 4 bytes por caractere, dominante na web (usada por mais de 98% dos sites). 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
Palavra japonesa (絵文字) que significa 'caractere imagem' — pequenos símbolos gráficos usados na comunicação digital para expressar ideias, emoções e objetos. 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).

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
Padrão universal de codificação de caracteres que atribui um número único a cada caractere de todos os sistemas de escrita e conjuntos de símbolos, incluindo emoji. code point in decimal or hexadecimal notation.

Decimal Format

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

<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:

Emoji Code Point HTML Entity
😀 U+1F600 &#x1F600;
🔥 U+1F525 &#x1F525;
❤️ U+2764 U+FE0F &#x2764;&#xFE0F;
👍 U+1F44D &#x1F44D;
✅ U+2705 &#x2705;
🎉 U+1F389 &#x1F389;
🌍 U+1F30D &#x1F30D;
💬 U+1F4AC &#x1F4AC;

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).

ZWJConector de largura zero (ZWJ)
Caractere Unicode invisível (U+200D) usado para unir vários emoji em um único emoji composto, como a combinação de pessoas e objetos em emoji de profissões. 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

Task Code
Declare UTF-8 <meta charset="UTF-8">
Literal emoji 🔥 (paste directly)
Hex entity &#x1F525;
CSS content content: "\1F525"
Hide from screen reader aria-hidden="true"
Label for screen reader role="img" aria-label="fire"
Force emoji rendering Append &#xFE0F;

Explore More on EmojiFYI

Ferramentas relacionadas

⌨️ Teclado de emojis Teclado de emojis
Navegue e copie qualquer um dos 3.953 emojis organizados por categoria. Funciona em qualquer navegador, sem instalação necessária. 🔍 Analisador de sequências Analisador de sequências
Decodifique sequências ZWJ, modificadores de tom de pele, sequências de teclas e pares de bandeiras em componentes individuais.

Termos do glossário

Apresentação de texto Apresentação de texto
Renderização de um caractere como símbolo de texto monocromático, seja por padrão ou quando o Seletor de Variação 15 é aplicado. Apresentação emoji Apresentação emoji
Renderização padrão de um caractere como um glifo emoji colorido, seja de forma inerente ou quando ativado pelo Seletor de Variação 16. Conector de largura zero (ZWJ) Conector de largura zero (ZWJ)
Caractere Unicode invisível (U+200D) usado para unir vários emoji em um único emoji composto, como a combinação de pessoas e objetos em emoji de profissões. Emoji Emoji
Palavra japonesa (絵文字) que significa 'caractere imagem' — pequenos símbolos gráficos usados na comunicação digital para expressar ideias, emoções e objetos. Emoji colorido Emoji colorido
Emoji em cores completas renderizados usando imagens bitmap ou gráficos vetoriais coloridos, em contraste com a renderização monocromática em estilo texto. Fonte emoji Fonte emoji
Arquivo de fonte digital contendo designs de glifos emoji coloridos, usando tecnologias como COLR, CBDT, SVG ou sbix para renderização. Ponto de código Ponto de código
Valor numérico único atribuído a cada caractere no padrão Unicode, escrito no formato U+XXXX (por exemplo, U+1F600 para 😀). Seletor de variação (VS) Seletor de variação (VS)
Caracteres Unicode (VS-15 U+FE0E e VS-16 U+FE0F) que determinam se um caractere é renderizado na apresentação de texto (monocromático) ou de emoji (colorido). Unicode Unicode
Padrão universal de codificação de caracteres que atribui um número único a cada caractere de todos os sistemas de escrita e conjuntos de símbolos, incluindo emoji. UTF-8 UTF-8
Codificação Unicode de largura variável que usa de 1 a 4 bytes por caractere, dominante na web (usada por mais de 98% dos sites).

Categorias de emojis relacionadas

😀 Smileys e emoções 👋 Pessoas e corpo 🍎 Comida e bebida 🚗 Viagens e lugares ⚽ Atividades

Emojis relacionados

😀 ❤️ 💬 👍 👩 👩‍💻 🍕 🍣 🌍 ☀️ ⭐ 🔥 🎉 ☎️ 💻 ⚠️ ✅

Artigos relacionados

How-To Guides

How to Use Emoji Skin Tone Modifiers

Learn how emoji skin tone modifiers work, how to apply them on any device, and how they're encoded in Unicode using the…
How-To Guides

How to Use Emojis in Social Media Posts: Best Practices by Platform

Learn best practices for using emojis on Instagram, X (Twitter), TikTok, LinkedIn, and Facebook. Boost engagement and c…
How-To Guides

How to Use Emojis in Slack: Shortcuts, Reactions, and Custom Emoji

Master emojis in Slack: colon shortcodes, emoji reactions, skin tone settings, custom emoji uploads, and keyboard short…
How-To Guides

How to Use Emojis in Python: A Developer's Complete Guide

Learn how to work with emojis in Python: strings, encoding, the emoji library, regex, Unicode normalization, and practi…