How to add emoji in HTML

Q: How do I put an emoji in HTML?

Ensure <meta charset="utf-8"> and paste the emoji, or use an HTML entity like &#x1F680; for 🚀.

Q: Should emoji have aria-labels?

For meaningful emoji, yes — wrap them in role="img" with an aria-label so screen readers announce them clearly.

Adding emoji to a web page is easy — they're just text. You can paste them directly, use an HTML entity, or insert them via CSS. Here are the methods plus the accessibility bit people forget.

1. Paste it directly

With <meta charset="utf-8"> in your page (you should always have this), you can paste the emoji straight into your HTML:

<p>We shipped it 🚀</p>

2. HTML entity

If you'd rather not paste raw emoji, use a numeric character reference with the decimal or hex code point:

<p>We shipped it &amp;#128640;</p>   <!-- 🚀 -->
<p>We shipped it &amp;#x1F680;</p>   <!-- 🚀 -->

3. Accessibility

Screen readers announce emoji by their Unicode name, which can be verbose or odd mid-sentence. For a decorative emoji, wrap it so it's skipped or labelled clearly:

<span role="img" aria-label="rocket">🚀</span>

Want a crisp icon instead?

Emoji render differently per device. For consistent branding, use an SVG icon — free on IconStash.

Browse icons →

Frequently asked questions

How do I put an emoji in HTML?

Ensure <meta charset="utf-8"> and paste the emoji, or use an HTML entity like 🚀 for 🚀.

Should emoji have aria-labels?

For meaningful emoji, yes — wrap them in role="img" with an aria-label so screen readers announce them clearly.