HTML Emojis

1) Typing or Pasting Emoji Directly

<p>I love HTML! 😍</p>
<p>Great job! 👍</p>

Because emoji are just Unicode text characters, you can type them directly on your keyboard (using an emoji picker) or paste them straight into your HTML source, as long as the file is saved as UTF-8 and <meta charset="UTF-8"> is declared.

2) Using a Numeric Character Reference

<p>Grinning Face: &#128512;</p>
<!-- Renders as: --> 😀

Every emoji has a Unicode code point (for example, U+1F600). You can insert an emoji using a decimal numeric character reference in the form &#DECIMAL;. This is useful when you want to guarantee the exact character in your source code without relying on your editor supporting emoji input, or you can use the hexadecimal form &#xHEX; instead.

3) Common Emoji Reference Table

You can look up the code point for almost any emoji on the official Unicode Consortium website or an emoji reference site, then use it as a numeric character reference in your HTML.

4) Live Demo: Emoji Rendered in the Page

The paragraph above was written using a mix of literal emoji characters and numeric character references — both approaches render identically once the browser parses the UTF-8 encoded page.

5) Where You Can Use Emoji

<title>My Awesome Site 🚀</title>
<button>Add to Cart 🛒</button>
<li>✅ Task completed</li>

Emoji can appear almost anywhere regular text can appear — inside <title>, buttons, list items, headings, and even alt attributes — since to the browser they are simply characters, not images.