HTML Emojis are colorful symbols or icons that express emotions, objects, or ideas such as 😊, ⚙️, ❤️, or 🌍.
They are based on Unicode characters, which have a unique numeric code that browsers can render into a visual symbol.
Each emoji has a Unicode code point a unique number assigned by the Unicode Consortium.
You can display an emoji using this Unicode in HTML.
Syntax:
ode;or
&#DecimalCode;Both versions start with &#, followed by either:
- Hexadecimal value (
xbefore the code) - Decimal value, and both end with
;.
Example of Displaying Emojis in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to add and use emojis in HTML using Unicode codes and HTML entities.">
<meta name="keywords" content="HTML emojis, HTML Unicode emojis, emoji codes, emoji tutorial, add emoji in HTML">
<meta name="author" content="Dharmesh Kundariya">
<title>HTML Emojis Tutorial</title>
</head>
<body>
<h1>HTML Emojis Example</h1>
<p>Smiling Face: 😀</p>
<p>Heart: ❤️</p>
<p>Rocket: 🚀</p>
<p>Light Bulb: 💡</p>
<p>Fire: 🔥</p>
</body>
</html>Important: Always Use UTF-8 Encoding
If your webpage is not encoded as UTF-8, emojis might display as ❓ or ☐.
Add this line inside your <head>:
<meta charset="UTF-8">This tells the browser to render emojis and international symbols correctly.
Example – Using Multiple Emojis in a Sentence
<p>I love web design! 🚀 💻 💖</p>Emoji Categories and Their Codes
1. Smileys and Emotions
| Emoji | HTML Code | Description |
|---|---|---|
| 😀 | 😀 | Grinning face |
| 😁 | 😁 | Beaming face with smiling eyes |
| 😂 | 😂 | Face with tears of joy |
| 😍 | 😍 | Smiling face with heart eyes |
| 😎 | 😎 | Face with sunglasses |
| 😢 | 😢 | Crying face |
| 😡 | 😡 | Angry face |
| 🤔 | 🤔 | Thinking face |
2. People and Hands
| Emoji | HTML Code | Description |
|---|---|---|
| 👋 | 👋 | Waving hand |
| 👍 | 👍 | Thumbs up |
| 👎 | 👎 | Thumbs down |
| 🙌 | 🙌 | Raising hands |
| 👏 | 👏 | Clapping hands |
| 🧑💻 | 🧑‍💻 | Developer |
| 🤝 | 🤝 | Handshake |
3. Objects and Tools
| Emoji | HTML Code | Description |
|---|---|---|
| 💻 | 💻 | Laptop |
| 🔧 | 🔧 | Wrench |
| ⚙️ | ⚙️ | Gear |
| 🔋 | 🔋 | Battery |
| 💡 | 💡 | Light bulb |
| 🔥 | 🔥 | Fire |
4. Nature and Food
| Emoji | HTML Code | Description |
|---|---|---|
| ☀️ | ☀️ | Sun |
| 🌧️ | 🌧 | Rain cloud |
| 🌿 | 🌿 | Leaf |
| 🍎 | 🍎 | Red apple |
| 🌾 | 🌾 | Crop |
| 🍕 | 🍕 | Pizza |
5. Travel and Places
| Emoji | HTML Code | Description |
|---|---|---|
| ✈️ | ✈️ | Airplane |
| 🚗 | 🚗 | Car |
| 🏠 | 🏠 | House |
| 🌍 | 🌍 | Globe showing Europe–Africa |
| ⛺ | ⛺ | Tent |
| 🚀 | 🚀 | Rocket |
6. Symbols and Shapes
| Emoji | HTML Code | Description |
|---|---|---|
| ❤️ | ❤️ | Red heart |
| 💔 | 💔 | Broken heart |
| 💫 | 💫 | Dizzy symbol |
| 💯 | 💯 | Hundred points |
| 🔔 | 🔔 | Bell |
| ⚡ | ⚡ | Lightning bolt |
| 🔘 | 🔘 | Circle button |
Styling Emojis with CSS
You can style emojis just like normal text.
Example:
<p style="font-size: 40px;">🚀</p>
<p style="color: orange; font-size: 35px;">🔥</p>HTML Emojis make your website expressive, modern, and user-friendly. They’re powered by Unicode, which means they appear beautifully across all browsers and devices.
Whether you’re designing tutorials, blog posts, or UI demos understanding emoji codes, syntax, and UTF-8 encoding ensures your content always looks perfect.