How to find the unicode codepoint and css escape for any icon-font glyph
- Step 1Upload the icon font — Drop a `.ttf`, `.otf`, `.woff`, or `.woff2`. These four are the supported formats; anything else (including `.ttc` collections and `.svg` sprites) is rejected.
- Step 2Wait for the grid — The font is parsed and embedded as a base64 `@font-face` in your browser. The header line reports how many encoded glyphs were found and how many are shown.
- Step 3Locate your glyph — Scan visually. Each cell renders one glyph from the `cmap` at 28px with a `U+XXXX` caption underneath.
- Step 4Read the codepoint — The caption is the codepoint in hex, upper-case, padded to at least 4 digits. `U+E042` is your raw value.
- Step 5Convert to the form you need — CSS escape = drop `U+`, lower-case, drop leading zeros: `\e042`. HTML entity = ``. JavaScript = `\uE042` (or `String.fromCodePoint(0xE042)`).
- Step 6Verify in the same grid — Before committing, confirm the cell you read actually renders the glyph you mean — the previewer paints the true outline, so an empty box means the outline is missing even though the codepoint exists.
One codepoint, four representations
Every form below is derived from the single U+ codepoint shown in the grid caption. The tool shows the codepoint and (on hover) the CSS escape; the rest are mechanical conversions.
| Form | How to derive it from `U+E042` | Result | Where used |
|---|---|---|---|
| Grid caption | as shown | U+E042 | the previewer |
| CSS escape | drop U+, lower-case, trim leading zeros | \e042 | content: in CSS |
| HTML entity | &#x + hex + ; |  | inline HTML |
| JS string | \u + 4-hex (or fromCodePoint) | \uE042 | JS / TS |
| Decimal | parse hex to base 10 | 57410 | rarely; tables/specs |
Reading the caption correctly
The caption is always upper-case and padded to 4 hex digits. Watch the padding when you write the CSS escape — CSS does not require the padding but it must match the codepoint.
| Caption | Codepoint | CSS escape | Note |
|---|---|---|---|
U+E042 | 0xE042 | \e042 | Private Use Area — typical icon font |
U+F015 | 0xF015 | \f015 | Also PUA (FA range) |
U+00A9 | 0x00A9 | \a9 or \0000a9 | Low codepoint keeps padding in the caption |
U+1F600 | 0x1F600 | \1f600 | Above U+FFFF — caption shows 5 digits, not padded to 4 |
Cookbook
Going from the codepoint the grid shows to working code in CSS, HTML, and JS. Codepoints are illustrative — read your font's real captions.
Caption to CSS content
ExampleRead U+E042 in the grid, write the lower-case escape with leading zeros trimmed.
/* grid caption: U+E042 */
.icon-bell::before {
font-family: "MyIcons";
content: "\e042";
}Caption to HTML entity
ExampleSame codepoint, inline in markup. The entity is the &#x form of the hex.
<!-- grid caption: U+E042 -->
<span class="icon" aria-hidden="true"></span>
<style>.icon { font-family: "MyIcons"; }</style>Caption to JavaScript
ExampleInject the glyph from JS — either an escape in a string literal or fromCodePoint for clarity.
// grid caption: U+E042 el.textContent = "\uE042"; // or, clearer for codepoints above U+FFFF: el.textContent = String.fromCodePoint(0xE042);
A low codepoint with padding
ExampleIf the caption shows U+00A9 (©), the CSS escape needs a delimiter or full padding so the parser knows where the escape ends.
/* grid caption: U+00A9 */
.icon-copy::before {
/* trailing space ends the escape */
content: "\a9 ";
/* or fully padded, no space needed */
content: "\0000a9";
}An astral codepoint (above U+FFFF)
ExampleIf the caption shows five hex digits like U+1F600, the JS escape needs the codepoint form, not the 4-digit \u form.
/* grid caption: U+1F600 */
.emoji::before { content: "\1f600"; } /* CSS is fine */
// JS: \u only takes 4 hex digits, so use:
el.textContent = String.fromCodePoint(0x1F600);Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
CSS escape painted nothing because of padding
Author error — not a tool bugThe grid shows U+00A9 but content:"\a9text" swallows the following letters into the hex run. CSS terminates a \ escape at 6 hex digits or the first non-hex char or a single trailing space. Write "\a9 " (space) or "\0000a9" (full pad). The caption's padding is the hint.
Glyph reachable only by a ligature, not a codepoint
Not shownMaterial-style fonts map home via a ligature feature, and the underlying glyph may have no direct codepoint. Those glyphs have unicode == null and are skipped. The previewer is a codepoint map; ligature-only access won't appear as a cell.
A glyph has more than one codepoint
Only the primary is shownIf a glyph is mapped from several codepoints, the previewer reports only glyph.unicode (the primary). Alternate codepoints that hit the same outline won't each get a cell. Use a glyph inspector for full per-glyph codepoint lists.
Two cells look identical but have different captions
ExpectedMany icon fonts duplicate an outline across PUA points (e.g. an alias). The grid honestly shows each codepoint separately, so you'll see the same picture under two captions. Pick whichever codepoint your stylesheet already uses.
Astral codepoint shows 5 digits in the caption
ExpectedCodepoints above U+FFFF (e.g. emoji at U+1F600) are not padded to 4 — they appear as their natural hex length. In JS use String.fromCodePoint, not \uXXXX, which only takes four hex digits.
No file selected
Error — upload requiredThe handler throws 'Upload a font file.' when run with no file. The previewer needs a font to read codepoints from; there is no demo font baked in.
Glyph name missing from tooltip
Expected — post table strippedNames come from the post table. When it's absent the hover tooltip shows only the codepoint and CSS escape. The codepoint is the load-bearing value, so this doesn't block lookup.
Over 1500 encoded glyphs in the font
Truncated to 1500 shownDisplay is capped at the first 1500 encoded glyphs for performance; the header reports the true total. If your target glyph sits beyond 1500, subset the font down first so it falls within the shown range.
Frequently asked questions
Where does the codepoint come from?
Straight from the font's cmap table via opentype.js — it's glyph.unicode rendered as upper-case hex, padded to 4 digits. It reflects your file, not external documentation.
How do I turn the caption into a CSS escape?
Drop the U+, lower-case it, and trim leading zeros: U+E042 becomes \e042. For low codepoints add a trailing space or full padding so the parser knows where the escape ends.
What's the HTML entity form?
&#x + the hex + ;. U+E042 becomes . The previewer uses this entity internally to render each glyph.
Why doesn't a glyph I know exists show up?
It has no Unicode codepoint — it's a ligature target, composite, or .notdef. Those are skipped because content: can't address them by codepoint.
A glyph has two codepoints — will I see both?
No. Only the primary glyph.unicode is reported, so a glyph mapped from multiple codepoints gets one cell. For the full list per glyph, use the glyph inspector.
How do I see the font's overall codepoint coverage, not just icons?
This grid lists encoded glyphs one cell at a time. For a block-by-block coverage summary use the character coverage map; for raw counts use the glyph-count analyzer.
Which format is my file — and can I confirm it before previewing?
The previewer decodes TTF/OTF/WOFF/WOFF2 automatically. For an explicit magic-byte report (including spotting a .ttc), use the font format identifier.
My CSS escape printed extra characters — what went wrong?
A \ escape eats following hex characters. After a short escape like \a9, add a single trailing space or pad to six digits (\0000a9) so the parser stops at the right place.
Does it cover emoji / astral codepoints?
Yes — if the font encodes a codepoint above U+FFFF, the caption shows its full hex (e.g. U+1F600). Use String.fromCodePoint in JS rather than \uXXXX.
Is anything uploaded to a server?
No. Parsing and rendering are entirely client-side; the font stays in your browser.
What formats can I upload?
TTF, OTF, WOFF, and WOFF2. WOFF2 is Brotli-decompressed and WOFF zlib-decompressed in the browser. TTC collections and SVG sprites are not supported.
I have icon names and want codepoints assigned — is that this tool?
No. This reads codepoints out of an existing font. To assign Private Use Area codepoints to a list of names and generate CSS, use the PUA point assigner, then preview the result here.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.