HTML

HTML Emojis

Emojis bring personality, emotion, and visual interest to plain text. They use Unicode characters, so you treat them like text in HTML. Emojis need no extra assets or scripts. This tutorial explains HTML emojis. You learn how to insert and style them. It answers common questions.

Learning Outcomes

By the end of this tutorial, you will be able to:

Describe what HTML emojis are and how they map to Unicode code points.
Insert emojis using direct characters, decimal entities, or hexadecimal entities.
Ensure correct rendering by setting <meta charset="UTF-8">.
Style, resize, and animate emojis with CSS.

What Is an Emoji in HTML?

An emoji in HTML is simply a Unicode character rendered by the browser as a small image-like glyph. Unlike <img> tags that load external assets, emojis live in your text as plain characters. When you include an emoji:

Your document remains lightweight (no extra HTTP requests).
The browser picks the appropriate system font or fallback emoji font.
You can style emojis with CSS just like letters.

HTML Emoji Examples

Below is a quick reference table of common emojis with their decimal and hexadecimal code points:

Emoji	Name	Decimal	Hex
😀	Grinning Face	`128512`	`1F600`
😄	Smiling Face with Open Mouth	`128516`	`1F604`
✌️	Victory Hand	`9996`	`270C`
⌚	Watch	`128350`	`231A`
👍	Thumbs Up	`128077`	`1F44D`
✨	Sparkles	`10024`	`2728`

You can reference these values directly in your HTML to display each emoji.

How to Insert Emojis in HTML

There are three main techniques to include emojis.

Hexadecimal Entities

Use the &#x…; syntax followed by the hex code:

<p>Party popper: &#x1F389;</p>

Note:

Where to find codes. Browse the official Unicode Emoji Charts for up-to-date hex values (e.g. U+1F389 → 1F389).
Semicolon is required. Always end the entity with ;—🎉 not &#x1F389.
Case-insensitive. 🎉 works just as well as uppercase.
Use when copy/paste isn’t an option. Helpful in environments where raw emoji characters might get garbled (e.g. legacy CMS editors).
Readability. Hex entities are more compact and visually distinctive for developers familiar with Unicode.

Decimal Entities

Use the &#…; syntax with the decimal code:

<p>Party popper: &#128137;</p>

Note:

Conversion. Hex 1F389 equals decimal 128137 (you can convert via an online tool or parseInt('1F389', 16) in JavaScript).
Broader support. Some older tools and libraries handle decimal entities more reliably than hex.
Readability trade-off. Decimal codes can be longer—💉 versus 🎉—but are universally supported.
Training editors. When teaching teams unfamiliar with hex, decimal might seem more intuitive since it’s just numbers.
Debugging tip. If an emoji fails to render, check your decimal value against a reliable Unicode reference.

Copy & Paste

If your editor supports UTF-8 (and you’ve set <meta charset="UTF-8">), you can paste the emoji directly:

<p>Party popper: 🎉</p>

Note:

Simplicity. Easiest for quick prototyping or content managed in modern WYSIWYG editors.
Font fallback. Browsers will use the system’s emoji font—appearance can vary slightly between platforms (Apple vs. Google vs. Microsoft).
Search tools. On macOS use Ctrl+Cmd+Space; on Windows use Win + . to bring up the emoji picker.
File encoding. Ensure your HTML file is saved as UTF-8 without BOM, or the raw emoji may turn into gibberish in some editors.
Accessibility. Always pair a raw emoji with accessible markup, e.g.
```
<span role="img" aria-label="party popper">🎉</span>
```

Unicode and Emoji Code Points

Every character in HTML must be encoded in UTF-8 (or another Unicode-compatible charset). To ensure correct display:

Add this to your <head>:
```
<meta charset="UTF-8">
```
Know that each emoji has a unique code point (e.g. U+1F389 for 🎉).
Use decimal (💉) or hex (🎉) entities when you can’t paste the emoji.

Styling and Resizing Emojis with CSS

Since emojis are text, you can style them like any other character:

<style>
  .big-emoji {
    font-size: 3rem;
    display: inline-block; /* ensures transforms work */
  }
  .spin {
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

<p>
  Normal: 😊
  <span class="big-emoji">😊</span>
  <span class="big-emoji spin">🎡</span>
</p>

font-size: Scale the emoji up or down.
display: inline-block: Allows transforms and animations.
Keyframes: Create spins, bounces, pulses, and more.

FAQs About Using Emojis in HTML

How do I insert emojis into HTML?

Emojis are just Unicode characters, so you can treat them like any other text in your HTML—provided your file is saved with UTF-8 encoding. There are two main approaches:

Direct insertion. Paste the emoji itself (e.g. 😊) directly into your markup. This is the simplest option when working in modern editors and CMSs that fully support UTF-8.
Numeric entities. Use decimal (&#…;) or hexadecimal (&#x…;) references. Entities are especially reliable in environments where raw emoji characters might be mangled, such as legacy content systems or email templates.

<!-- Direct character (requires UTF-8 file encoding) -->
<p>Smile: 😊</p>

<!-- Decimal entity -->
<p>Smile: &#128522;</p>

<!-- Hexadecimal entity -->
<p>Smile: &#x1F60A;</p>

What is 😄 in HTML code?

Every emoji has a unique Unicode code point. The “Smiling Face with Open Mouth and Smiling Eyes” emoji is assigned U+1F604. In HTML you represent that with either its decimal or hex equivalent:

<!-- Decimal reference for 😄 -->
&#128516;

<!-- Hexadecimal reference for 😄 -->
&#x1F604;

What is the code for the 👍 emoji?

The Thumbs Up emoji is U+1F44D in Unicode. Use one of these entity formats to include it:

<!-- Decimal reference for 👍 -->
&#128077;

<!-- Hexadecimal reference for 👍 -->
&#x1F44D;

What is the HTML code for ✨?

The Sparkles emoji corresponds to U+2728. Here’s how to embed it:

<!-- Decimal reference for ✨ -->
&#10024;

<!-- Hexadecimal reference for ✨ -->
&#x2728;

Previous Next