HTML Emojis
Learn how to add emoji characters to your HTML pages
Quick Answer
How do you add emojis to HTML?
Add emojis to HTML by copying and pasting them directly into your code, using HTML entity codes (like 😀 for 😀), or using Unicode codes. Ensure your HTML file uses UTF-8 character encoding (<meta charset="UTF-8">) for proper emoji display across all browsers.
Emojis are characters from the UTF-8 character set. They look like images or icons, but they are not - they are letters (characters) from the UTF-8 (Unicode) character set.
What are Emojis?
Emojis are graphical symbols that represent emotions, objects, or concepts. They are part of the Unicode Standard and can be displayed in HTML like any other character.
😀 Key Facts About Emojis
- Emojis are characters from the UTF-8 character set
- They are not images - they are text characters
- Different devices may display emojis differently
- Your HTML document must use UTF-8 charset to display emojis
The HTML charset Attribute
To display an HTML page correctly, a web browser must know which
character set to use. This is specified in the
<meta> tag:
Example - UTF-8 Charset
<!DOCTYPE html>
<html
>
<head
>
<meta charset="UTF-8" />
</head
>
<body>
<p>I will display 😀</p>
</body>
</html
>Result:
I will display 😀
Important: If the charset is not specified, emojis might not display correctly.
How to Use Emojis in HTML
You can add emojis to HTML in three ways:
Method 1: Copy and Paste
The easiest way is to copy an emoji from an emoji source and paste it into your HTML:
Example - Direct Emoji
<p>Hello 👋 Welcome! 🎉</p>Method 2: Use Decimal HTML Entity
Each emoji has a Unicode decimal value that can be used as an HTML entity:
Example - Decimal Entity
<p>I will display 😀</p>Result:
I will display 😀
Method 3: Use Hexadecimal HTML Entity
You can also use the hexadecimal Unicode value:
Example - Hexadecimal Entity
<p>I will display 😀</p>Result:
I will display 😀
Emoji Size
Emojis are text characters, so you can change their size using CSS font-size property:
Example - Different Sizes
<p style="font-size: 20px;">Small emoji: 😀</p>
<p style="font-size: 40px;">Medium emoji: 😀</p>
<p style="font-size: 60px;">Large emoji: 😀</p>Result:
Small emoji: 😀
Medium emoji: 😀
Large emoji: 😀
Smiley Face Emojis
Hand Gesture Emojis
Heart Emojis
Object Emojis
Practical Examples
Example - Welcome Message
<h1>Welcome to our website! 👋</h1>
<p>We're excited to have you here! 🎉</p>Example - Feature List
<ul>
<li>🚀 Fast performance</li>
<li>💡 Smart features</li>
<li>🔥 Hot deals</li>
<li>⭐ Premium quality</li>
</ul>Example - Social Media Links
<p>Follow us:</p>
<p
>
<a href="#">📘 Facebook</a> |
<a
href="#"
>🐦 Twitter</a
> |
<a href="#">📷 Instagram</a>
</p
>Example - Rating System
<p>Customer Rating: ⭐⭐⭐⭐⭐ (5 stars)</p>
<p>Product Quality: 👍👍</p>Emoji Accessibility
When using emojis, consider accessibility for users with screen readers:
Example - Emoji with ARIA Label
<span role="img" aria-label="thumbs up">👍</span>♿ Accessibility Tips
-
Use
role="img"to indicate the emoji is an image -
Add
aria-labelto describe the emoji's meaning - Don't rely on emojis alone to convey important information
- Provide text alternatives when possible
- Consider that screen readers read emoji descriptions, which may be verbose
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceEmoji Best Practices
✓ Tips for Using Emojis
- Always set
charset="UTF-8"in your HTML - Use emojis sparingly - too many can be overwhelming
- Ensure emojis are culturally appropriate for your audience
- Use emojis to enhance, not replace, text content
- Consider accessibility when using emojis
- Test emoji appearance across different devices
- Use CSS font-size to control emoji size
- Be aware that emoji meanings can vary across cultures
Test Your Knowledge
5 practice questions are available. Choose Start practice to try them.