HTML Free CodesHTML Emojis
Learn how to add emoji characters to your HTML pages
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 and Device Support
📱 Important Notes
- Emojis look different on different devices and browsers
- Apple, Google, Microsoft, and Samsung each have their own emoji designs
- Older browsers may not support all emojis
- Some emojis may display as black and white symbols on unsupported platforms
- Always test your emojis on multiple devices
Emoji 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