How to Use Emojis in HTML

March 9, 2026

Emojis are standard Unicode characters, which means they work natively in HTML. But there are several ways to include them, and understanding each approach will help you choose the right one for your project.

Method 1: Paste the Emoji Directly

The simplest approach: just paste the emoji character into your HTML:

<p>Welcome to our restaurant! 🍕🍔🌮</p>
<h1>Sale on now 🎉</h1>

Requirements: Your HTML file must be saved with UTF-8 encoding, and you need the correct charset declaration in your <head>:

<meta charset="UTF-8" />

This is the default for all modern HTML5 documents, so in most cases you don't need to add it manually. UTF-8 is the universal encoding for the web.

Pros: Simple, readable, easy to maintain. Cons: Can look strange in code editors that don't render emoji well.

Method 2: Unicode Code Point (HTML Entity)

You can reference any emoji by its Unicode code point as an HTML decimal or hexadecimal entity:

<!-- Decimal entity for 😀 (U+1F600) -->
<p>&#128512;</p>

<!-- Hexadecimal entity for 😀 (U+1F600) -->
<p>&#x1F600;</p>

To find the code point, look up the emoji on Emoji Family; each emoji page shows the Unicode hexcode. Convert 1F600 → 😀.

Pros: Works even in ASCII-only environments; explicit and unambiguous. Cons: Hard to read in source code; hexcode lookup adds friction.

Method 3: CSS `content` Property

You can insert emojis via CSS using the content property with a Unicode escape:

.celebration::before {
  content: "\1F389";  /* 🎉 Party popper */
  margin-right: 0.25em;
}

<h2 class="celebration">You did it!</h2>

Note: CSS Unicode escapes use a backslash (\) rather than &#x.

Pros: Keeps emoji out of HTML, good for decorative use. Cons: Decorative-only; screen readers may read CSS content differently across platforms.

Method 4: Emoji in `alt` Text for Images

You can use emojis in image alt text; they're just Unicode characters:

<img src="party.jpg" alt="A birthday party 🎂" />

Screen readers will typically announce the emoji's name.

Accessibility Considerations

Emojis are read aloud by screen readers using their Unicode description (e.g. "grinning face" for 😀). If the emoji's meaning is important, that's fine. But if you're using emojis purely decoratively, consider wrapping them:

<span aria-hidden="true">🎉</span>
<span class="sr-only">Congratulations</span>

Or use role="img" with an aria-label for a single meaningful emoji:

<span role="img" aria-label="Party">🎉</span>

Emoji Rendering Across Browsers and OS

Emojis render using the system's emoji font:

Windows: Segoe UI Emoji (Microsoft Fluent style)
macOS / iOS: Apple Color Emoji (Apple style)
Android / Chrome OS: Noto Color Emoji (Google style)
Linux: Usually Noto Color Emoji, or none if not installed

This means the same emoji may look noticeably different on different operating systems. If consistent cross-platform rendering matters (e.g. in a logo or visual design), consider using emoji images instead of Unicode characters.

Using Emoji Images for Consistent Rendering

Emoji Family's API provides emoji images in SVG and PNG format across multiple styles:

<!-- Using Emoji Family API to serve a consistent emoji image -->
<img
  src="https://www.emoji.family/api/emojis/🎉/noto/png/64"
  alt="Party popper emoji"
  width="64"
  height="64"
/>

Available emoji packs include Noto (Google), Twemoji (Twitter/X), OpenMoji, BlobMoji, Fluent (Microsoft), and FluentFlat.

Practical Example: Emoji in a Button

<button type="submit" class="btn btn-primary">
  Send message 💬
</button>

Or with the aria-hidden pattern for decorative emoji:

<button type="submit" class="btn btn-primary">
  <span aria-hidden="true">💬</span> Send message
</button>

Quick Reference: Finding Emoji Code Points

Go to any emoji page on Emoji Family (e.g. /emojis/smileys-emotion/grinning-face).
The hexcode is shown on the page (e.g. 1F600).
Use it as 😀 in HTML or \1F600 in CSS.

Or just copy the emoji directly and paste it into your code; modern code editors handle emoji in source files just fine.