How to Display Any Unicode Character in HTML

· 2 min read

Every Unicode character—all 154,000+ assigned code points—can be displayed in a web page. The method you choose depends on whether the character is in the font stack, whether you need it to copy-paste correctly, and whether you want it to be accessible to search engines and screen readers. Here's a complete guide.

Option 1: Include the Character Directly

With <meta charset="UTF-8"> in your document head and a UTF-8 encoded HTML file, you can type or paste any Unicode character directly into your markup. This is always the preferred approach when the character is typeable and your text editor and deployment pipeline support UTF-8 cleanly. Use CharLookup search to find the character you need, then copy it.

Option 2: HTML Numeric Character Reference

Use &#xHHHH; (hexadecimal) or &#DDDDD; (decimal) to reference any code point without including the character in your source. The hex form is more readable because it matches the U+XXXX notation:

  • &#x1F525;🔥
  • &#x2665;
  • &#x20AC;

This approach is useful when you need to include a character that might not render in your code editor, or when you want to make the code point explicit for documentation purposes. See the full HTML entities reference for named entity alternatives.

Option 3: CSS content Property

For decorative characters inserted via CSS pseudo-elements, use the hex code point in a CSS string: content: "\1F525". Unlike HTML, CSS uses a backslash prefix and omits the U+ prefix. Note that CSS-inserted content is typically ignored by screen readers—use aria-hidden or an accessible text alternative alongside it.

Font Fallbacks

The character only displays correctly if a font in the user's font stack contains a glyph for it. Emoji and symbols usually fall back to the operating system's emoji font (Apple Color Emoji, Segoe UI Emoji, or Noto Color Emoji). For obscure historic scripts or mathematical symbols, you may need to load a web font that includes the required glyphs. Test with different OS and browser combinations when targeting characters outside the BMP.