How to add emoji in CSS

Q: How do I use an emoji in CSS content?

Set content: "🚀" with a UTF-8 file, or use a unicode escape like content: "\1F680".

You can add emoji through CSS with the content property on ::before and ::after — handy for list bullets, labels and decorative flourishes.

Direct character

If your CSS file is saved as UTF-8, you can put the emoji straight in content:

.done::before { content: "✅ "; }

Unicode escape

To avoid encoding issues, use a CSS unicode escape — a backslash followed by the hex code point:

.rocket::before { content: "\1F680 "; }   /* 🚀 (note the trailing space) */

Keep it decorative

CSS content emoji are generally decorative and may be skipped by assistive tech. Don't put essential information only in CSS-generated emoji; if it matters, put it in the HTML with a proper label.

Frequently asked questions

How do I use an emoji in CSS content?

Set content: "🚀" with a UTF-8 file, or use a unicode escape like content: "\1F680".

Are CSS content emoji accessible?

They're treated as decorative and may be ignored by screen readers — don't rely on them for essential meaning.