Ein einzelnes Icon ist schnell gezeichnet. Ein ganzes Set, das in Navigation, Buttons und leichten Zuständen (aktiv/inaktiv) sauber funktioniert, ist deutlich anspruchsvoller. Häufige Probleme: unterschiedliche Rundungen, wechselnde Strichstärken, unruhige Details oder unsaubere Ausrichtung. Das Ergebnis wirkt „zusammengeklickt“ – auch wenn jedes Icon für sich gut aussieht.
Mit einem klaren System lässt sich das vermeiden. Wichtig sind drei Dinge: ein gemeinsamer Bauplan (Raster und Regeln), wiederholbare Formen (Bauteile) und ein Export, der im Web zuverlässig scharf bleibt. Die folgenden Schritte sind so aufgebaut, dass sie in Figma, Illustrator oder ähnlichen Programmen funktionieren.
Icon-Stil festlegen: Linie oder Fläche – und warum das entscheidend ist
Bevor ein einziges Icon entsteht, braucht es eine Stil-Entscheidung. Denn Line-Icons (nur Kontur) verhalten sich anders als Filled-Icons (gefüllte Fläche). Mischformen können funktionieren, wirken aber schnell inkonsistent, wenn keine klaren Regeln existieren.
Line-Icons: gut für leichte UIs, aber regel-sensibel
Line-Icons leben von Strichstärke und Detail-Disziplin. Schon kleine Abweichungen (z. B. mal runde, mal eckige Enden) fallen im Set sofort auf. Line-Icons sollten bei kleinen Größen besonders einfach bleiben, sonst „verstopfen“ Linien und Abstände optisch.
Filled-Icons: stabil bei kleinen Größen, aber auf Gewicht achten
Filled-Icons sind oft besser lesbar in kleinen Buttons oder dichten Toolbars. Dafür muss das „Gewicht“ stimmen: Ein Herz-Icon darf nicht deutlich schwerer wirken als ein Stern-Icon. Hier helfen einheitliche Innenabstände und ähnlich große Flächenanteile.
Mischstil nur mit klarer Rolle
Ein Praxisweg: Ein Stil für primäre Aktionen (z. B. filled) und ein anderer für sekundäre Inhalte (z. B. line). Dann aber konsequent – inklusive Dokumentation. Wer noch kein System hat, startet am besten mit einem Stil und erweitert später.
Raster, Größen und optische Korrekturen: so bleiben Icons ruhig
Icons sehen nicht automatisch „zentriert“ aus, nur weil sie mathematisch in der Mitte stehen. Menschen nehmen Formen optisch wahr: Kreise wirken kleiner als Quadrate, Diagonalen wirken länger als horizontale Linien. Darum braucht ein Set neben einem Raster auch optische Korrekturen.
Mit einem festen Raster arbeiten
Ein Raster ist der Baukastenrahmen: Icons entstehen innerhalb einer festen Zeichenfläche (z. B. 24×24 oder 20×20). Wichtig ist nicht die konkrete Zahl, sondern dass alle Icons dieselbe Grundfläche nutzen. So lassen sie sich in UI-Komponenten austauschen, ohne dass Abstände springen.
„Optisches Zentrum“ statt mathematischer Mitte
Ein Lupen-Icon mit Griff wirkt oft nach unten gezogen, obwohl es zentriert ist. Die Lösung: minimal nach oben schieben, bis es visuell mittig wirkt. Gleiches gilt für Pfeile, die durch ihre Spitze „gewichtiger“ erscheinen. Diese Korrekturen sind normal und gehören zur Qualitätsarbeit.
Einheitliche Ecken und Rundungen
Wenn ein Set runde Ecken nutzt, sollten Rundungen wiedererkennbar gleich sein. Unterschiedliche Radien lassen Icons beliebig wirken. Ein guter Test: zwei Icons nebeneinander – wirken die Ecken wie aus derselben Familie?
Formregeln definieren: Bauteile statt jedes Icon neu erfinden
Konsistenz entsteht, wenn Icons aus wiederverwendbaren Teilen gebaut werden. Das spart Zeit und sorgt dafür, dass Details zusammenpassen. Diese Regeln sollten einmal festgelegt und dann als Standard genutzt werden.
Ein „Teileregal“ anlegen
Typische Bauteile sind: Pfeilspitzen, Kreise, Plus/Minus, Haken, einfache Ordner- oder Dokumentformen. Diese Teile können als Komponenten/Symbole abgelegt werden. So bleibt z. B. die Pfeilspitze in allen Richtungen identisch.
Abstände bewusst festlegen
Line-Icons wirken schnell zu eng, wenn Linien nahe aneinander liegen. Die wichtigste Regel ist oft nicht die Strichstärke, sondern der Mindestabstand zwischen parallelen Linien und zwischen Linie und Außenkante. So bleiben Icons auch in klein lesbar.
Detail-Level nach Einsatzzweck staffeln
Ein Icon für eine Einstellungsseite darf etwas detailreicher sein als ein Icon in einer Tab-Bar. Sinnvoll ist eine kleine interne Einteilung: „klein“ (z. B. 16 px in Buttons) vs. „normal“ (z. B. 24 px in Navigation). Die Form bleibt gleich, Details werden reduziert.
Konkreter Workflow in Figma/Illustrator: vom Sketch zum fertigen SVG
Unabhängig vom Programm ist der Ablauf ähnlich: erst grob, dann präzise, dann testen. Wer direkt „perfekt“ zeichnet, verliert schnell Zeit und übersieht Set-Probleme.
Skizzieren, dann vereinfachen
Startpunkt ist die Bedeutung: Was muss das Icon sofort ausdrücken? Danach folgt Vereinfachung: unnötige Innenlinien entfernen, Formen klarer machen, Symbole vereinheitlichen. Als Regel gilt: Wenn ein Detail bei kleiner Anzeige nicht mehr lesbar ist, ist es meist zu viel.
Sauber bauen: Outlines, Knotenpunkte und Symmetrie
Weniger Knotenpunkte (Ankerpunkte) führen zu saubereren Kurven. Kurven sollten nicht aus zu vielen Punkten bestehen. Symmetrische Teile (z. B. Kreis, Schild, Herz) am besten spiegeln oder mit exakten Formen bauen, statt frei zu ziehen. Bei Line-Icons ist außerdem wichtig, dass Linienenden und Ecken (Caps/Joins) überall gleich eingestellt sind.
Export testen, nicht nur speichern
Ein exportiertes SVG kann anders wirken als die Editor-Ansicht. Darum: in typischen UI-Größen prüfen, in hell/dunkel ansehen und auf Kantenflimmern achten. Für SVG lohnt sich der Abgleich mit einem Artikel zu sauberem Export, z. B. SVG fürs Web korrekt exportieren.
Schärfe und Lesbarkeit: warum Pixel-Grid und Strokes zählen
Icons wirken im Web unscharf, wenn Linien auf „halben Pixeln“ liegen oder wenn Strokes (Konturen) beim Skalieren ungünstig brechen. Das ist kein Hexenwerk – es ist Kontrolle.
Auf das Pixel-Grid achten
Gerade horizontale und vertikale Linien sollten möglichst auf dem Pixel-Grid sitzen (also nicht zwischen zwei Pixelreihen). Sonst werden sie weich gerendert. Viele Tools bieten Snap-to-Pixel/Pixelfitting-Funktionen. Sie helfen, ersetzen aber nicht den visuellen Check.
Strokes sinnvoll handhaben
Bei Line-Icons ist die Frage wichtig: Bleibt die Strichstärke beim Skalieren gleich oder skaliert sie mit? Für UI-Icons ist oft sinnvoll, dass die Strichstärke zum Icon mitskaliert, damit das Verhältnis stimmt. Entscheidend ist Konsistenz innerhalb des Sets.
Kontrast im Interface mitdenken
Icons sind UI-Elemente – sie müssen im Kontext funktionieren. Wenn ein Icon zu dünn ist, hilft oft kein „dunkleres Grau“, sondern eine klare Regel für Strichstärke und Minimalgröße. Mehr dazu passt thematisch in Farbkontraste im UI optimieren, weil Lesbarkeit immer Zusammenspiel aus Form und Kontrast ist.
Entscheidungshelfer: welches Icon-Format für welchen Zweck?
- SVG-Icons sind meist die beste Wahl für UI: skalierbar, klein, leicht färbbar (z. B. per CSS).
- PNG lohnt sich für sehr komplexe, bildhafte Symbole (selten bei UI-Icons) oder wenn ein exakter Look nötig ist.
- Icon-Fonts sind heute oft weniger beliebt, weil sie bei Barrierefreiheit und Rendering Nachteile haben können. Für neue Projekte werden häufig SVG-Lösungen bevorzugt.
Wenn im Projekt viele Bildformate zusammenkommen, hilft ein klarer Standard. Ergänzend kann Bildkompression fürs Web: PNG, JPG, WebP beim generellen Format-Verständnis unterstützen.
Praktische Schritte: ein Set in 60 Minuten stabil aufsetzen
- Stil wählen: Line oder Filled (nicht mischen, außer mit klarer Rolle).
- Zeichenfläche festlegen (einheitliche Icon-Größe) und Raster/Snapping aktivieren.
- Regeln notieren: Strichstärke, Ecken (rund/eckig), Enden, Mindestabstände.
- 5 Kern-Icons bauen (z. B. Suche, Menü, Zurück, Schließen, Einstellungen) und nebeneinander vergleichen.
- Optische Korrekturen vornehmen (Zentrierung, Gewicht, Rundungen angleichen).
- Als Komponenten/Symbole speichern und wiederverwendbare Bauteile anlegen.
- SVG exportieren und in typischen UI-Größen testen (hell/dunkel, aktiv/inaktiv).
Qualitätskontrolle im Team: Übergabe, Benennung und Varianten
Icons werden selten nur einmal genutzt. Sie landen in Komponenten, werden von Entwickler:innen eingebunden und später erweitert. Darum lohnt sich ein kleiner „Hygiene“-Standard.
Benennung: klar, stabil, ohne Rätsel
Beispiele: „icon/search“, „icon/close“, „icon/arrow-left“. Vermeidet kreative Namen wie „magnifier2“. Für Zustände eignen sich Suffixe wie „-filled“ oder „-outline“, wenn diese Varianten wirklich Teil des Systems sind.
Varianten bewusst planen
Wenn es mehrere Strichstärken oder Größen geben soll, dann als echte Varianten – nicht als zufällige Kopien. Sonst entstehen im Laufe des Projekts unbemerkt unterschiedliche Stile. Wer Icons an Komponenten koppelt, profitiert von sauberer Übergabe, z. B. über Design-Handoff für Entwickler.
Kurzer Realitäts-Check in echten Screens
Das Set sollte in typischen UI-Elementen geprüft werden: Navigation, Buttons, Formularfelder, Listen. Gerade in Formularen fallen zu kleine oder zu feine Icons schnell auf, weil daneben Text und Eingabeflächen strenge Kanten haben.
Mini-Vergleich: selbst erstellen oder Icon-Set anpassen?
| Ansatz | Vorteile | Nachteile |
|---|---|---|
| Eigenes Set erstellen | Perfekt passend zur Marke, volle Kontrolle über Stil und Details | Mehr Zeit, braucht klare Regeln und QA (Qualitätsprüfung) |
| Bestehendes Set anpassen | Schneller Start, viele Icons sofort verfügbar | Stil-Anpassungen können aufwändig werden, inkonsistente Details möglich |
| Mix aus mehreren Sets | Flexibel bei Spezial-Icons | Hohes Risiko für Stilbruch, mehr Abstimmungsaufwand |
Ein guter Mittelweg ist oft: ein Basis-Set übernehmen und so stark vereinheitlichen, dass es wie „eigen“ wirkt. Dafür sind die Regeln aus den Abschnitten zu Raster, Rundungen und Bauteilen entscheidend.
