Emojis add emotion, personality, and visual appeal to web pages.
They are part of the Unicode character set, which means you can use them directly in HTML just like text.
HTML supports emojis natively — no extra library or image is required.
How Emojis Work in HTML
Every emoji is represented by a Unicode value — a unique code assigned to that emoji.
You can insert an emoji either by directly typing it or using its HTML entity (Unicode code point).
Syntax
😀 <!-- Hexadecimal code -->
😀 <!-- Decimal code -->Both represent the 😀 emoji.
Example 1: Using Emojis Directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Emojis</title>
</head>
<body>
<h2>Using Emojis in HTML</h2>
<p>I love HTML 😍 and CSS 🎨!</p>
<p>Learning is fun 🚀✨</p>
</body>
</html>Output:
I love HTML 😍 and CSS 🎨!
Learning is fun 🚀✨
Example 2: Using Unicode (Entity Code)
<p>Smile: 😀</p>
<p>Heart: ❤</p>
<p>Star: ⭐</p>
<p>Rocket: 🚀</p>Output:
Smile: 😀
Heart: ❤️
Star: ⭐
Rocket: 🚀
Common Emoji Unicode Codes
| Emoji | Description | Decimal Code | Hex Code |
|---|---|---|---|
| 😀 | Grinning Face | 😀 | 😀 |
| 😂 | Face with Tears of Joy | 😂 | 😂 |
| 😍 | Heart Eyes | 😍 | 😍 |
| 😎 | Cool Face | 😎 | 😎 |
| 😢 | Crying Face | 😢 | 😢 |
| 😡 | Angry Face | 😡 | 😡 |
| ❤️ | Red Heart | ❤ | ❤ |
| ⭐ | Star | ⭐ | ⭐ |
| 🔥 | Fire | 🔥 | 🔥 |
| 🚀 | Rocket | 🚀 | 🚀 |
| 🌍 | Earth Globe | 🌍 | 🌍 |
| ✅ | Check Mark | ✅ | ✅ |
| 💡 | Light Bulb | 💡 | 💡 |
| 📞 | Telephone | 📞 | 📞 |
Important Notes
- Always include
<meta charset="UTF-8">in your<head>section — this ensures emojis display correctly. - Emojis render differently on Windows, macOS, Android, and iOS, depending on the system font.
- You can also use CSS font-family to control emoji style slightly (e.g.,
font-family: Segoe UI Emoji;).
Example 3: Styled Emoji Text
<p style="font-size: 24px; font-family: 'Segoe UI Emoji';">
HTML makes me 😃 and CSS makes me 🎨
</p>Conclusion
Emojis make web pages more expressive and user-friendly.
With HTML and Unicode, you can easily add thousands of emojis without relying on images — making your design lighter, modern, and fun.
