Sign Up Sign Up
Icon Font Extractor

Icon Font Extractor

Decode a WOFF2, WOFF, TTF or OTF icon font into individual, named SVG icons. Preview every glyph, recover names from the font or your CSS, then download separate SVG files or an SVG sprite.

Back to Library
Upload Icon Font

WOFF2, WOFF, TTF or OTF up to 10MB. Attach the CSS or paste a font URL for better names.

Ready
Drop an icon font here or click to upload

WOFF2, WOFF, TTF or OTF — up to 10MB

WOFF2 WOFF TTF OTF
1
Upload font
WOFF2, WOFF, TTF or OTF (or a URL)
2
Decode glyphs
Extract outlines & recover names
3
Pick & export
Download SVGs or a sprite

More Icons Tools

Loader Generator
Design CSS/HTML loading spinners
Sprite Generator
Create SVG sprites and icon fonts
Icon Library
Browse thousands of icons

How the Icon Font Extractor Works

Turn a WOFF2, WOFF, TTF or OTF icon font into clean, named SVG icons — separate files or a sprite, production-ready.

Any Icon Font

Upload WOFF2, WOFF, TTF or OTF — or paste a font URL. The extractor decodes every glyph outline directly from the font, no quality loss, no tracing.

Real Names, Not Codepoints

Names are recovered from the font (glyph names, ligatures) and, when you attach the CSS, from your class names like .icon-home — so you get home.svg, not icon-e900.svg.

Separate SVGs or a Sprite

Download every icon as an individual optimized SVG (ZIP) or a single SVG sprite with one symbol per icon. Both use currentColor so you can recolor in CSS.

Migrate Legacy Icon Sets

Got an old project on an icon font but no original SVGs? Recover the whole set as clean, named SVG files ready for a sprite, React/Vue components or Figma.

Frequently Asked Questions

WOFF2, WOFF, TTF and OTF. The font is parsed server-side with fontTools, so even compressed WOFF2 files work. You can also paste a direct font URL.

In priority order: your CSS class (if you attach the CSS), the font ligature, the OpenType glyph name, the Unicode name, then a generated icon-XXXX fallback.

Text fonts are not icon sets. By default only Private-Use-Area glyphs (where icon fonts live) are extracted, so a normal font yields little or nothing.

Yes — each icon is a real vector path with a viewBox and fill="currentColor". Open them in the SVG Editor, drop them in a sprite, or import into Figma as vectors.