Warum Icons verschwinden, wenn du eine Webseite nach Figma importierst

Alles kommt an außer den Icons. Leere Kästen, schwarze Quadrate oder kleine Rechtecke, wo die Pfeile waren. Es gibt vier Ursachen, und welche du hast, entscheidet, ob es sich beheben lässt.

Du überführst eine Seite nach Figma, und alles kommt an außer den Icons. Wo die Pfeile, die Lupe und die kleinen Externer-Link-Symbole waren, stehen leere Quadrate, schwarze Klötze oder gar nichts.

Das ist nicht ein Fehler. Icons werden im Web auf vier völlig verschiedene Arten gezeichnet, und jede geht anders kaputt. Zu wissen, welche Art du vor dir hast, sagt dir, ob sich das beheben lässt und wie.

Die vier Arten und ihr jeweiliges Versagen

1. Inline-SVG

Der einfache Fall. Das Icon steht direkt im HTML als <svg>-Element mit seinen Pfaden darin. Jeder Konverter, der das DOM liest, sieht die Geometrie und kann Figma einen Vektor übergeben.

Wenn das scheitert, hat der Konverter meist etwas plattgemacht: eine <use>-Referenz auf ein anderswo definiertes Symbol, einen CSS-filter, oder eine currentColor-Füllung, die außerhalb ihrer Kaskade keine Farbe mehr hat.

2. SVG-Sprites

Eine Datei enthält jedes Icon als <symbol>, und an jeder Stelle steht nur eine Referenz.

<svg class="icon"><use href="/icons.svg#chevron-down" /></svg>

Im Web effizient, für einen naiven Konverter unsichtbar. Das Element im DOM enthält keine Pfade. Liest man es wörtlich, bekommt man ein leeres <svg>, und deshalb landen Sprites so oft als leere Kästen in der richtigen Größe.

Auflösen heißt: der Referenz folgen, die Sprite-Datei holen, das Symbol per id finden und die Geometrie einsetzen. Liegt die Sprite-Datei auf einer anderen Origin, muss dieser Abruf überhaupt erlaubt sein.

3. Icon-Fonts

Das Icon ist ein Zeichen in einer Schrift. Font Awesome, Material Icons und jede hauseigene Icon-Schrift funktionieren so: ein Element mit einer Klasse, ein ::before-Pseudoelement und eine content-Eigenschaft mit einem Codepoint aus dem privaten Unicode-Bereich.

.fa-search::before { content: "\f002"; }

Zwei Dinge gehen schief. Erstens lebt das Icon in einem Pseudoelement, und das steht nicht im DOM — durch den Elementbaum zu laufen findet es nicht. Zweitens: Erfasst ein Konverter es doch als Text, kommt es in Figma als das buchstäbliche Zeichen an, und ohne die Icon-Schrift auf deinem Rechner rendert Figma seinen Ersatz. Ein leerer Kasten oder eine beliebige Glyphe.

Daher kommt das bekannte Symptom, dass eine importierte Seite voller kleiner Rechtecke ist.

4. CSS-Masken-Icons

Verdient eine eigene Überschrift, weil dieser Fall zunimmt und auf eine Weise scheitert, die nach Erfolg aussieht. Das Element hat gar keinen Inhalt, nur eine Hintergrundfarbe und eine Maske.

.icon {
  background-color: currentColor;
  -webkit-mask-image: url(/icons/search.svg);
  mask-size: contain;
}

Die Form steckt im Maskenbild, die Farbe im Element. Ein Konverter, der den Hintergrund liest, bekommt ein einfarbiges Rechteck in der Farbe des Icons. Deshalb kommen diese oft als schwarze oder farbige Quadrate an statt als nichts: Die Farbe stimmt, die Form ist weg.

Dokumentationsseiten auf VitePress-Basis nutzen dieses Muster stark. So sind wir zum ersten Mal darauf gestoßen — jemand meldete, dass auf einer Doku-Seite jedes Icon als schwarzes Quadrat importiert worden war.

Warum Konverter sie übersehen

Weil alle vier zu beherrschen vier verschiedene Dinge bedeutet, und drei davon verlangen mehr, als das DOM zu lesen.

• Sprites brauchen die referenzierte Datei und das extrahierte Symbol.
• Icon-Fonts brauchen gelesene Pseudoelement-Stile, einen aufgelösten Codepoint und eine als Vektor gezeichnete Glyphe statt weitergereichten Text.
• Masken-Icons brauchen das geholte Maskenbild und die Farbe des Elements auf der entstehenden Form statt auf einem Rechteck.

Ein Konverter, der nur durchs DOM läuft und kopiert, was er findet, schafft Fall eins und scheitert am Rest still. Das ist das übliche Verhalten, nicht das ungewöhnliche.

So erkennst du deinen Fall

Seite öffnen, Rechtsklick aufs Icon, untersuchen. Dreißig Sekunden genügen.

Was Snapture mit jedem Fall macht

Alle vier werden behandelt, und es lohnt sich, konkret zu werden, denn „wir unterstützen Icons" behauptet jedes Werkzeug.

• Inline-SVG geht als Vektorgeometrie durch. Wo ein SVG so komplex ist, dass Figmas Importer daran scheitern würde — verschachtelte Masken, Filter, foreignObject — wird stattdessen rasterisiert. Eine bewusste Verschlechterung statt eines stillen Fehlschlags.
• Sprites werden aufgelöst, indem der <use>-Referenz gefolgt, das Sprite geholt und die Geometrie des referenzierten Symbols mit der richtigen viewBox eingesetzt wird.
• Icon-Fonts werden über den berechneten content des Pseudoelements erkannt, und die Glyphe wird als Form gezeichnet, nicht als Zeichen an Figma gereicht. Das Ergebnis hängt nicht davon ab, ob du die Icon-Schrift installiert hast.
• CSS-Masken-Icons werden aufgelöst, indem das Maskenbild geholt und die Farbe des Elements auf die entstehende Form angewendet wird. So kommt ein Masken-Icon in seiner echten Farbe an statt als gefülltes Rechteck.

In der Messreihe auf der Messseite ergab Linears Startseite 215 Vektorknoten und Stripes 153. Das meiste davon ist Icon-Arbeit, und darin liegt der Unterschied zwischen einer Datei, die du bearbeiten kannst, und einer mit Löchern.

Wenn deine Icons in einer Datei schon kaputt sind

Für ein rasterisiertes schwarzes Quadrat gibt es keine Reparatur; die Forminformation hat es nie in die Datei geschafft. Importiere neu, mit einem Werkzeug, das deinen Fall auflöst.

Die eine Ausnahme sind Icon-Fonts. Sind die Icons als Textzeichen angekommen und hast du die Icon-Schrift lokal, rendert Figma sie auf deinem Rechner korrekt — für jeden ohne diese Schrift bricht die Datei aber. Neu importieren lohnt sich trotzdem, statt eine Datei weiterzugeben, die nur bei dir funktioniert.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia