Emoji HTML Code, Unicode & CSS — Complete Web Developer Guide

Emojis are Unicode characters. Every standard emoji has a Unicode code point, which means you can use them directly in HTML, CSS, and JavaScript without any image assets or external libraries.

The easiest method: click any emoji in our picker to copy it, then paste the character directly into your code. This guide also covers HTML entities, Unicode escape sequences, CSS content values, and how different browsers render emoji so you can use them confidently in production.

How to Put an Emoji in HTML

There are three ways to include an emoji in HTML, and they all work equally well in modern browsers:

Method 1: Paste the emoji directly
Copy the emoji from our picker and paste it into your HTML file. The emoji character is stored as UTF-8 in the file. Make sure your HTML file declares <meta charset="UTF-8"> in the head, which it should by default in all modern frameworks.

<p>Free shipping 🚀 on all orders over $50</p>
<button>Download ⬇️</button>
<span>4.8 ⭐⭐⭐⭐⭐</span>

Method 2: Use the HTML decimal entity
Each emoji has a Unicode code point. The fire emoji (🔥) is U+1F525. In HTML, you write this as a decimal entity: 🔥 (128293 is the decimal value of 0x1F525).

<p>Limited time offer &#128293; Ends midnight</p>

Method 3: Use the HTML hex entity
Write the code point directly in hex: 🔥 for the fire emoji.

<p>Limited time offer &#x1F525; Ends midnight</p>

For most modern projects, Method 1 (paste the character directly) is simplest and most readable. Use entities only if your build pipeline has trouble with non-ASCII characters in source files.

Emoji Unicode Code Points — How to Find Them

Every emoji is a Unicode character with a specific code point. Commonly used emojis and their code points:

Emoji	Name	Unicode	HTML Decimal	HTML Hex
😀	Grinning Face	U+1F600	😀	😀
❤️	Red Heart	U+2764 U+FE0F	❤️	❤️
🔥	Fire	U+1F525	🔥	🔥
✅	Check Mark Button	U+2705	✅	✅
⭐	Star	U+2B50	⭐	⭐
🚀	Rocket	U+1F680	🚀	🚀
💡	Light Bulb	U+1F4A1	💡	💡
⚠️	Warning	U+26A0 U+FE0F	⚠️	⚠️

Note that some emojis (like ❤️) are actually two characters — the base emoji plus a "variation selector" (U+FE0F) that forces the emoji presentation instead of the text presentation. When you copy the emoji from our picker, both characters are included automatically.

Using Emojis in CSS with content Property

You can add emojis to pseudo-elements (::before and ::after) using the CSS content property. This lets you add emoji decorations without modifying HTML.

There are two approaches:

Direct Unicode escape in CSS:

.success::before {
  content: "\2705  "; /* check mark emoji */
}

.warning::before {
  content: "\26A0\FE0F  "; /* warning emoji */
}

.new-badge::after {
  content: " \1F525"; /* fire emoji */
}

Or paste the emoji character directly:

.success::before {
  content: "✅ ";
}

.new-badge::after {
  content: " 🔥";
}

Both methods work in all modern browsers. The CSS Unicode escape uses the code point preceded by a backslash — for U+1F525, write \1F525. Note the trailing space in the escape sequence to separate it from following characters.

Be aware: emojis in CSS pseudo-elements are part of the layout but not the DOM, so they are not accessible to screen readers by default. For important semantic information, use the emoji in HTML with an appropriate aria-label instead.

Sell Custom Apparel — We Handle Printing & Free Shipping

Emojis in JavaScript

In JavaScript, emojis can be used directly as string characters or via Unicode escapes. Modern JavaScript (ES6+) supports the full Unicode range with the \u{...} syntax for code points above U+FFFF:

// Direct emoji in string (most readable)
const label = "New arrivals 🔥";
const badge = document.createElement('span');
badge.textContent = "⭐ Featured";

// Unicode escape for code points up to U+FFFF
const check = "\u2705"; // ✅

// Unicode escape for code points above U+FFFF (requires braces)
const fire = "\u{1F525}"; // 🔥
const rocket = "\u{1F680}"; // 🚀

// Emoji in template literals
const greeting = "Hello \u{1F44B} Welcome to our store!";

One important consideration: emojis can be multi-codepoint sequences (like flags, family emojis, and skin tone variants). A simple string.length check will give you the number of UTF-16 code units, not the number of visible emojis. Use Array.from(string).length or the spread operator to count visible characters accurately when processing emoji strings.

Emoji Rendering Across Browsers and Devices

The same Unicode emoji character renders differently depending on the operating system and browser — each platform provides its own emoji font:

Platform	Emoji Font	Character set coverage
Windows	Segoe UI Emoji	Full Unicode 15.0 (Windows 11)
macOS / iOS	Apple Color Emoji	Full Unicode 15.0 (macOS 14+)
Android / ChromeOS	Noto Color Emoji	Full Unicode 15.0 (Android 13+)
Linux	Noto Color Emoji (if installed)	Varies by distribution

Newer emojis (added in Unicode 14-15) may not render on older OS versions — they will show as a blank box or question mark. If your target audience includes users on older devices, stick to emojis introduced before Unicode 13 (2020) for maximum compatibility.

You can specify a custom emoji font stack in CSS, but emoji fonts cannot be served from your own server like regular web fonts — they fall back to the OS font. For critical use cases (like star ratings), use an SVG icon or an image instead of an emoji to guarantee consistent rendering.

Accessibility: aria-label and role for Emojis

Screen readers announce emojis differently across platforms — some read the official Unicode name, some skip them, some say "image." For emojis that carry semantic meaning, add accessibility attributes:

<!-- For decorative emojis: hide from screen readers -->
<span aria-hidden="true">🔥</span> Limited time deal

<!-- For meaningful emojis: provide a label -->
<span role="img" aria-label="Star rating: 5 out of 5">⭐⭐⭐⭐⭐</span>

<!-- For status indicators: label the status -->
<span role="img" aria-label="Success">✅</span> Payment confirmed

The key rule: if removing the emoji would change the meaning of the text, add an aria-label. If it is purely decorative (like a bullet point replacement), add aria-hidden="true".

Frequently Asked Questions

Can I use any emoji as a favicon?

Yes, you can use an emoji as a browser favicon using an SVG data URL. Create an SVG with the emoji in a text element, then reference it as the favicon. Example: . This works in all modern browsers except Internet Explorer and some older Safari versions.

How do I prevent emojis from showing as black-and-white text symbols?

Some emojis (especially punctuation-like symbols) have both a text presentation (black and white) and an emoji presentation (color). Add the variation selector U+FE0F after the emoji character to force the emoji presentation: ❤️ is ❤ + U+FE0F. When you copy from our picker, this is included automatically. In CSS and JavaScript, add \FE0F after the code point.

Why does emoji.length return 2 in JavaScript for some emojis?

JavaScript strings use UTF-16 encoding. Emojis with code points above U+FFFF (most emoji characters) require two UTF-16 code units — called a surrogate pair. So emoji.length returns 2, not 1. To get the actual count of visible characters, use Array.from(string).length or [...string].length, which properly handles surrogate pairs and multi-codepoint sequences.

Can I copy an emoji from the picker and use it in a Python string?

Yes. Python 3 strings are Unicode by default. Paste the emoji directly into a Python string literal — it will work as-is. In Python source files saved as UTF-8 (the default), the emoji character is stored and interpreted correctly. You can also use the Unicode escape: \U0001F525 for the fire emoji (note the capital U and 8 hex digits for code points above U+FFFF).