HTML Emojis


HTML Emojis are graphical icons or symbols used to express emotions, objects, symbols, or ideas in web pages. They are part of the Unicode standard and can be inserted in HTML using Unicode characters or entities.


🔹 How to Use Emojis in HTML

  1. Directly add emoji characters:
    You can simply copy and paste emojis into your HTML code. Example: 😀

  2. Use Unicode numeric entities:
    Use &#code; or &#xhexcode; where the code corresponds to the emoji Unicode.
    Example: 😀 or 😀 for 😀

  3. Use emoji images or icon fonts:
    Some sites use images or fonts like Twemoji or EmojiOne for consistent display.


💻 Examples of Emojis in HTML

<p>I am happy 😀</p>
<p>Thumbs up: &#128077;</p>
<p>Heart: &#x2764;&#xFE0F;</p>
<p>Rocket: 🚀</p>
<p>Smile face: &#128522;</p>

🔹 Popular Emoji Unicode Codes

Emoji Description Decimal Code Hex Code
😀 Grinning Face &#128512; &#x1F600;
😂 Face with Tears of Joy &#128514; &#x1F602;
❤️ Red Heart &#10084; &#x2764;
👍 Thumbs Up &#128077; &#x1F44D;
😍 Smiling Face with Heart Eyes &#128525; &#x1F60D;
🎉 Party Popper &#127881; &#x1F389;
🚀 Rocket &#128640; &#x1F680;

Practice Questions

Q1. Add a smiley face emoji to a paragraph.

Q2. Display a thumbs up emoji using numeric Unicode.

Q3. Show a heart emoji using both direct character and numeric entity.

Q4. Create a message that includes multiple emojis like 🎉 and 🚀.

Q5. Use an emoji to represent weather (e.g., sun ☀️).

Q6. Write an HTML page that shows a list of 5 emojis with their names.

Q7. Insert emoji inside a button element.

Q8. Use emojis in headings and paragraphs.

Q9. Display a combination of emojis and text to make an alert message.

Q10. Explain how to ensure emoji compatibility across browsers.


Go Back Top