How to Find Unicode Icons and Use Them in CSS

Updated

Open a Unicode lookup tool such as AmpWhat, search for the symbol you want, switch the code display to CSS, then paste the escaped value into a CSS content property — usually on a ::before or ::after pseudo-element. The escape looks like \2192 (a backslash followed by the hex code point), not the raw character and not an HTML entity. This works for any Unicode character your chosen font can render; if the font lacks the glyph, you get a blank box instead of the icon.

Step 1: Find the character and its code point

AmpWhat is a searchable reference for Unicode characters, HTML entities, and symbols. Its own instructions describe the flow:

  1. Type in the search box, or click a pre-made search.
  2. Select and click a character to copy it (the cursor changes to ⧉ and ⊕).
  3. Explore further if you need variants.

For CSS work you don't want the copied character itself — you want its code point. AmpWhat's Settings panel lets you choose which code formats to display alongside each character:

Setting option What it gives you Use it for
Unicode – U+0000 Code point, e.g. U+2192 Reference, documentation
HTML – Decimal e.g. → HTML documents
HTML – Hex e.g. → HTML documents
JSON and Javascript e.g. \u2192 JS strings
CSS Property Values e.g. \2192 CSS content
URL Encoding – %N e.g. %E2%86%92 URLs
Windows Alt Keys Alt-code Windows text entry

Turn on CSS Property Values and the tool shows the exact escape sequence to drop into your stylesheet. That removes the guesswork of converting U+2192 to \2192 by hand.

Step 2: Write the escape into CSS

The CSS escape is a backslash plus the hexadecimal code point, placed inside a quoted string in the content property:

/* Right arrow on a link */
a.external::after {
  content: "\2192";
  margin-left: 0.25em;
}

/* Checkmark before a list item */
li.done::before {
  content: "\2714";
  color: green;
  margin-right: 0.4em;
}

Key rules:

  • Always quote the value. content: \2192; is invalid; content: "\2192"; is correct.
  • Use the hex code point, not the decimal one. \8594 is not the same as \2192.
  • Mind the trailing space. If the next character in the string is a hex digit or a space, insert a space after the escape to terminate it — "\2192 " — because CSS reads up to six hex digits. The space is consumed as a delimiter and does not render.
  • Pseudo-elements need content. A ::before or ::after rule with no content produces nothing.

Step 3: Verify it renders

Add the rule, reload, and check the element. If you see the icon, you're done. If you see a hollow box, a question mark, or nothing, move to the troubleshooting table.

Why escape instead of pasting the character?

You can write content: "→"; directly and it often works. The escaped form is safer because:

  • It survives file encoding changes. A raw character saved in the wrong encoding becomes mojibake; \2192 is pure ASCII.
  • It's unambiguous in minifiers, build pipelines, and diffs.
  • It matches what tools like AmpWhat output when CSS mode is on, so there's no manual conversion step.

Common reasons an icon doesn't show

Symptom Likely cause Fix
Empty box / tofu Font has no glyph for that code point Set a font-family that includes the glyph, or pick a more widely supported symbol
Nothing renders at all Missing content on the pseudo-element, or the selector doesn't match Add content; verify the selector in dev tools
Literal \2192 text appears Escape is outside a quoted string, or double-escaped (\\2192) Keep it inside "..." with a single backslash
Wrong symbol Decimal used where hex is expected, or vice versa Confirm the code point; \2192 is hex for →
Icon shows in one browser, not another Font fallback differs per platform Specify a fallback stack, e.g. font-family: "Segoe UI Symbol", "Noto Sans Symbols", sans-serif

Choosing symbols that render reliably

Not every Unicode character has a glyph in every font. Broadly safe choices include arrows (\2190–\2193), geometric shapes (\25A0 ■, \25B2 ▲), check marks (\2714), and common punctuation. Emoji and rarer pictographs depend heavily on the platform's emoji font and may render in color or not at all. When an icon must appear identically everywhere, test it in each target browser, or use an icon font or inline SVG instead of a raw Unicode character.

Quick reference: the same character in four formats

For the right arrow (U+2192):

  • Unicode: U+2192
  • HTML decimal: →
  • HTML hex: →
  • CSS: \2192

These are four encodings of one code point. Mixing them up — putting → in CSS, or \8594 in HTML — is the most common source of "it doesn't work" reports.