How to build an icon font catalogue with the glyph inspector
- Step 1Drop your icon font — Any custom icon font (Font Awesome, Material Icons, Bootstrap Icons, or your own). The inspector parses every glyph and renders thumbnails.
- Step 2Export the JSON — Click Export. The JSON includes per-glyph metadata: name (when present), Unicode (e.g., U+E001), advance width, SVG path. Drop into your docs pipeline.
- Step 3Generate Storybook stories — Convert the JSON to Storybook controls. Each icon becomes a story with name + escape sequence + live preview. Designers browse, copy escape, paste into CSS.
Frequently asked questions
What about Material Icons?+
Works perfectly. Material Icons ship with rich glyph names (home, search, etc.). The inspector reads them via the post table and surfaces them in the export.
Can I re-run when icons are added?+
Yes — drop the new font version. The export reflects the current state. Diff against the previous JSON to see which icons were added/removed/renamed.
What about animated icon fonts?+
Static glyphs only — animations live in CSS or SMIL outside the font binary. The inspector shows the static icon shape; animations layer on via separate CSS rules.
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.