Icon-Font-Extraktor
5 / 5Zerlege einen Icon-Font im Format WOFF2, WOFF, TTF oder OTF in einzelne, benannte SVG-Icons. Sieh dir jede Glyphe an, übernimm die Namen aus dem Font oder deinem CSS und lade einzelne SVG-Dateien oder ein SVG-Sprite herunter.
Icon-Font hochladen
WOFF2, WOFF, TTF oder OTF bis 10 MB. Häng das CSS an oder füge eine Font-URL ein, um bessere Namen zu erhalten.
WOFF2, WOFF, TTF oder OTF – bis 10 MB
So funktioniert der Icon-Font-Extraktor
Verwandle einen Icon-Font (WOFF2, WOFF, TTF oder OTF) in saubere, benannte SVG-Icons – als einzelne Dateien oder Sprite, produktionsreif.
Jeder Icon-Font
Lade WOFF2, WOFF, TTF oder OTF hoch – oder füge eine Font-URL ein. Der Extraktor dekodiert jede Glyphenkontur direkt aus dem Font: ohne Qualitätsverlust, ohne Nachzeichnen.
Echte Namen statt Codepoints
Die Namen stammen aus dem Font (Glyphennamen, Ligaturen) und – wenn du das CSS anhängst – aus deinen Klassennamen wie .icon-home. So bekommst du home.svg statt icon-e900.svg.
Einzelne SVGs oder ein Sprite
Lade jedes Icon als einzelnes, optimiertes SVG (ZIP) herunter oder ein SVG-Sprite mit einem symbol pro Icon. Beide nutzen currentColor, sodass du die Farbe per CSS ändern kannst.
Alte Icon-Sets migrieren
Ein altes Projekt mit Icon-Font, aber ohne die Original-SVGs? Stelle das ganze Set als saubere, benannte SVG-Dateien wieder her – bereit für ein Sprite, React/Vue-Komponenten oder Figma.
Häufig gestellte Fragen
WOFF2, WOFF, TTF und OTF. Der Font wird serverseitig mit fontTools ausgelesen, daher funktionieren auch komprimierte WOFF2-Dateien. Du kannst auch eine direkte Font-URL einfügen.
In dieser Reihenfolge: deine CSS-Klasse (wenn du das CSS anhängst), die Ligatur im Font, der OpenType-Glyphenname, der Unicode-Name und als Fallback ein generierter Name icon-XXXX.
Textschriften sind keine Icon-Sets. Standardmäßig werden nur Glyphen aus der Private Use Area extrahiert (dort liegen die Icons von Icon-Fonts), daher liefert eine normale Schrift wenig oder gar nichts.
Ja – jedes Icon ist ein echter Vektorpfad mit viewBox und fill="currentColor". Öffne die Icons im SVG-Editor, pack sie in ein Sprite oder importiere sie als Vektoren in Figma.