Font Icon Extractor

Extract icons from any font and save each glyph as SVG, PNG or ICO. Works with icon fonts like Font Awesome and Material Icons, dingbat and symbol fonts - turn one into a website icon with SVG to Favicon.

Every glyph Names from CSS No upload No font handy?
Related Tools
SVG to ICO SVG to PNG Compress SVG SVG Icon Editor Favicon Generator

How to extract icons from a font

  1. Add your font. Drop a TTF, OTF, WOFF, WOFF2, TTC, EOT or SVG font into the box, or a ZIP package with the font and its CSS inside.
  2. Name the icons. Names come from ligatures and glyph names automatically. For icon fonts like Font Awesome, add the CSS file to get the real class names.
  3. Find the icons you need. Search by name or codepoint, filter to named icons or ligatures, and click a glyph to see it large.
  4. Pick a format. Choose how the SVG is framed (font metrics, square or trimmed), the colour and the PNG or ICO sizes.
  5. Download. Save one icon as SVG, PNG or ICO, or save all of them (or the ones you picked) in one ZIP.

Need the icon at other sizes later? The Icon Resizer and ICO Analyzer take it from there.

Icon font to SVG - what you get

  • Clean SVG paths. Each glyph is flipped right side up with a viewBox that fits - framed like the font, square, or trimmed to the shape.
  • Real names. From ligatures, glyph names or your CSS, so files are called home.svg, not uE900.svg.
  • PNG and ICO. Sharp PNG at up to 2048 px, and Windows-ready ICO files with every size from 16 to 256.
  • Developer bits. CSS content values, HTML entities, data URIs, an SVG sprite and a JSON map.
  • The licence, up front. Copyright and licence text from the font are shown above the grid and saved in the ZIP.

Want a pixel-perfect PNG of an SVG you already have? Use SVG to PNG.

Supported font formats

FormatNotes
TTF / OTFTrueType and CFF outlines, including fonts with thousands of glyphs
WOFF / WOFF2Web fonts are unpacked in your browser - ttf to svg and woff to svg in one step
TTC / OTCFont collections - you pick which font to open
EOTUncompressed EOT files (most icon font packages); MTX-compressed EOT is not supported
SVG fontOld-style SVG fonts from IcoMoon and Fontello packages
ZIPWhole font packages - the font and its CSS are found for you

Font Awesome, Material Icons and dingbats

Icon fonts store each icon at a Private Use codepoint like U+E900.

The names live in the CSS file. Add it and every icon gets its class name - fa-house becomes house.svg.

Material Icons and Material Symbols use ligatures instead, and those names are read from the font itself. Dingbat fonts like Wingdings work too - each glyph is named after its character.

Making a desktop icon from a glyph? Save it as ICO here, or start from any picture with Image to ICO. More converters live in Icon Converters.

Frequently Asked Questions

Drop the font into the box - TTF, OTF, WOFF, WOFF2, TTC, EOT, an SVG font or a whole ZIP package. Every glyph shows up in a grid.

Download one icon as SVG, PNG or ICO, or pick several and save them in one ZIP.

Open the font here and press Download all. Each glyph becomes its own SVG file with a clean path and a correct viewBox.

You get one SVG per icon, not a single SVG font. Shrink them further with Compress SVG.

Yes. Drop the Font Awesome ZIP, or the .woff2 file from its webfonts folder together with all.css, and every icon gets its real name, like house or user.

Font Awesome Free icons are licensed CC BY 4.0, so keep the attribution when you use them.

Most icon fonts keep the names in a CSS file, not in the font. Paste that CSS (or drop the .css file) into Name icons from CSS and names like home or arrow-left appear.

IcoMoon selection.json and codepoints.json files work too.

Yes. Ligature names such as home or settings are read straight from the font, so Material Icons and Material Symbols show their names without any CSS.

Use the Ligatures filter to see only those glyphs.

Open the font and the grid shows every glyph with its name and Unicode codepoint. Search by name, by code (e900, U+E900 or \e900) or paste the character itself.

Click a glyph for a big preview, its CSS content value and its HTML entity.

That depends on the font’s licence, and extracting icons does not change it. The tool shows the licence and copyright stored in the font right above the grid.

Open-source icon fonts (SIL OFL, MIT, Apache, ISC) are usually fine to reuse. Commercial fonts often are not.

No. The font is read by your browser and never leaves your device, so private and paid fonts stay private.

The last few fonts you opened are kept in your browser only, so you can reopen them with one click.

Guides & Tutorials

All 14 guides
Guide Old vs New ICO Files: Bitmap Icons, PNG Icons and Every Icon Type Explained Read the guide Comparison ICO vs SVG: Which Icon Format Should You Use? Read the guide Guide Complete ICO File Guide: Understanding, Opening & Converting Icon Files Read the guide