HtmlHow-ToBeginner · 3 min read

How to Add Emoji in HTML: Simple Syntax and Examples

You can add emoji in HTML by directly typing the emoji character, using Unicode numeric codes with 😀, or by inserting emoji images with <img> tags. The simplest way is to copy and paste the emoji directly into your HTML text. For better compatibility, use Unicode codes inside your HTML.

📐

Syntax

There are three common ways to add emoji in HTML:

Direct emoji character: Just type or paste the emoji directly in your HTML text.
Unicode numeric code: Use &#xCODE; where CODE is the emoji's Unicode hex value.
Emoji image: Use an <img> tag to show an emoji image file.

Example of Unicode code: 😀 shows 😀.

html

<p>Direct emoji: 😀</p>
<p>Unicode code: &#x1F600;</p>
<p>Image emoji: &lt;img src="smile.png" alt="smile emoji"&gt;</p>

Output

Direct emoji: 😀 Unicode code: 😀 Image emoji: (shows smile.png image)

💻

Example

This example shows how to add emoji directly and with Unicode codes in a simple HTML page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emoji in HTML Example</title>
</head>
<body>
  <h1>Emoji Examples</h1>
  <p>Direct emoji: 😀 😍 👍</p>
  <p>Unicode codes: &#x1F600; &#x1F60D; &#x1F44D;</p>
</body>
</html>

Output

<h1>Emoji Examples</h1> <p>Direct emoji: 😀 😍 👍</p> <p>Unicode codes: 😀 😍 👍</p>

⚠️

Common Pitfalls

Some common mistakes when adding emoji in HTML are:

Using unsupported emoji codes that browsers can't display.
Not setting charset="UTF-8" in the <meta> tag, causing emoji to show as strange symbols.
Copying emoji from sources that use images instead of characters, which may not render properly.

Always use UTF-8 encoding and test emoji display on different browsers.

html

<!-- Wrong: Missing UTF-8 charset -->
<meta charset="ISO-8859-1">
<p>Emoji: 😀</p>

<!-- Right: Use UTF-8 charset -->
<meta charset="UTF-8">
<p>Emoji: 😀</p>

Output

Wrong: Emoji may show as � or strange characters Right: Emoji shows correctly 😀

📊

Quick Reference

Method	Syntax Example	Notes
Direct Emoji	😀	Copy-paste emoji directly in HTML text
Unicode Code	😀	Use hex code with &#x; for emoji
Image Emoji		Use image files for custom emoji

✅

Key Takeaways

Add emoji directly by typing or pasting them in your HTML text.

Use Unicode numeric codes like 😀 for better browser support.

Always set to ensure emoji display correctly.

Test emoji display on different browsers and devices for consistency.

Use tags only if you want custom emoji images instead of characters.