HTML Emojis
Using Emojis in HTML
Emojis are not images; they are characters from the UTF-8 (Unicode) character set.
Because emojis are characters, they can be displayed, copied, resized, and styled just like normal text.
What Are Emojis?
Emojis are Unicode characters included in UTF-8, which supports almost all characters and symbols used worldwide.
Examples of emojis:
😄 😍 💗
Emoji Character Codes
Each emoji has a numeric character reference that can be used in HTML.
| Emoji | HTML Code |
|---|---|
| 😀 | 😀 |
| 😄 | 😄 |
| 😍 | 😍 |
| 💗 | 💗 |
Using Emojis in HTML
You can insert emojis directly, or use their numeric codes.
<p>😀</p>
This will display a smiling face emoji.
HTML Charset Requirement
To display emojis correctly, the HTML document must use UTF-8 encoding.
This is defined using the meta charset tag:
<meta charset="UTF-8">
If this tag is missing, emojis may not display correctly.
UTF-8 Character Numbers
Many UTF-8 characters cannot be typed directly but can be displayed using numeric character references.
<p>A B C</p>
This displays the characters: A B C
Emoji as UTF-8 Characters
Emojis also have numeric values:
- 😄 → 128516
- 😍 → 128525
- 💗 → 128151
Resizing Emojis
Since emojis are text characters, their size can be changed using CSS.
<p style="font-size:48px"> 😀 😄 😍 💗 </p>
This displays larger emojis using the font-size property.
Why Use Emojis in HTML?
Emojis add visual meaning, emotion, and clarity to content without using images.
They are lightweight, scalable, and supported across modern browsers.
Basic Emoji