Icon-Design: ein konsistentes Icon-Set erstellen

Gutes Icon-Design misst man nicht an einem einzelnen Symbol, sondern an einem Set von Icons, die zusammengehören. Ein Icon, das für sich genommen großartig aussieht, kann eine Oberfläche ruinieren, wenn seine Linie dicker, seine Ecken schärfer oder seine Größe neben den Nachbarn unstimmig ist. Das Geheimnis eines konsistenten Sets liegt weniger im Talent als in vorab festgelegten Regeln: ein gemeinsames Grid, eine feste Strichstärke, derselbe Eckenradius und optische Balance. Dieser Artikel zeigt Schritt für Schritt, wie du ein Icon-Set von Grund auf nachhaltig aufbaust.

Grid und Canvas: wo alles beginnt

Bevor du irgendetwas zeichnest, definiere einen gemeinsamen Arbeitsbereich. Der Branchenstandard ist ein Canvas von 24×24 Pixeln; kleinere Oberflächen nutzen oft 20×20 oder 16×16. Entscheidend ist, jedes Icon auf demselben Canvas zu zeichnen. Platziere darin eine Live Area (Schutzzone): Bei einem 24px-Canvas lässt man meist 2px Rand und arbeitet in einem Bereich von 20×20. Das visuelle Gewicht jedes Icons sollte in dieser Zone bleiben.

Denke das Grid nicht nur als Quadrat. In der Praxis helfen vier Grundformen: ein Quadrat, ein vertikales Rechteck, ein horizontales Rechteck und ein Kreis. Ein Stift sitzt in der vertikalen Form, ein Umschlag in der horizontalen, eine Uhr im Kreis. So werden Icons unterschiedlicher Form trotzdem als gleich groß wahrgenommen.

Strichstärke: die DNA des Sets

In einem Linien- (Outline-) Set ist die sichtbarste Größe für Konsistenz die Strichstärke (Stroke). Für ein 24px-Grid ist die klassische Wahl ein Strich von 2px; für ein feineres Gefühl funktioniert auch 1,5px. Wähle die Regel einmal und brich sie nie im Set.

• Verwende dasselbe Ende für alle offenen Pfade: stroke-linecap: round für runde Enden, butt für flache.
• Lege auch die Eckverbindungen fest: stroke-linejoin: round oder miter — mische sie nicht.
• Richte die Striche am Pixelraster aus. Liegt die Mitte eines 2px-Strichs genau auf einer Pixelgrenze, werden die Kanten unscharf; verschiebe um einen halben Pixel, um sie scharf zu machen.

Halte das Design vektorbasiert, aber zeige es immer in Realgröße (etwa bei 16 und 24 Pixeln) in der Vorschau. Ein Strich, der bei 24 elegant wirkt, kann bei 16 wie Teig verkleben.

Eckenradius und visuelle Sprache

Der Eckenradius bestimmt die Persönlichkeit des Sets. Scharfe Ecken wirken technisch und seriös, weiche Ecken freundlich und modern. Wähle einen Radiuswert (etwa 2px) und wende ihn konsequent auf die Außenecken an. Den Radius an Innenecken leicht zu verkleinern, wirkt optisch oft korrekter, weil konkave Winkel für das Auge ohnehin weicher erscheinen.

Dieselbe Logik gilt für jedes wiederkehrende Detail: wie Enden geschnitten werden, der Winkel von Pfeilen (meist 45°), die Neigung von Kappen. Triff eine Entscheidung, dokumentiere sie, wende sie auf jedes Icon an. Die Konsistenz eines Sets ist die Summe dieser Mikroentscheidungen.

Optische Balance: dein Auge, nicht die Mathematik

Der am meisten übersehene Teil des Icon-Designs ist die optische Korrektur. Was geometrisch korrekt ist, wirkt nicht immer korrekt. Ein paar klassische Beispiele:

• Ein Kreis neben einem Quadrat gleicher Maße wirkt kleiner; du musst den Kreis leicht über das Grid hinaus vergrößern, damit er passt.
• Ein Dreieck (etwa ein „Play"-Icon) im geometrischen Zentrum wirkt nach links verschoben; du rückst es nach rechts, um seinen Massenschwerpunkt auszurichten.
• Horizontale Linien wirken dicker als vertikale Linien gleicher Breite; manche Sets verdünnen die Horizontalen leicht.

Regel: vertraue deinem Auge, nicht dem Lineal. Stelle ein Icon neben die anderen, kneife die Augen zusammen und korrigiere das, das hervorspringt oder zurückfällt.

Den Produktionsprozess systematisieren

Statt Konsistenz im Kopf zu behalten, baue sie in deine Werkzeuge ein. Wenn du Figma nutzt, richte diese Struktur ein:

• Baue Icons als Components und halte sie alle in derselben Frame-Größe (24×24).
• Lege Grid und Live Area in einen Vorlagen-Frame und kopiere ihn für jedes neue Icon.
• Speichere Strichstärke, Farbe und Endenstil als Stroke Style, damit du sie von einer Stelle aus ändern kannst.
• Halte die Benennung systematisch: Namen mit Slash wie arrow/left, arrow/right, user/filled werden in Figma automatisch in Ordner gruppiert.

Eine kurze Checkliste pro Icon hilft: richtiges Canvas, richtiger Strich, Striche pixelgenau ausgerichtet, lesbar bei 16px, korrekt benannt.

Als sauberes SVG exportieren

Ist das Design fertig, gehen die Icons als SVG in den Code. Achte für eine saubere Ausgabe auf ein paar Punkte:

• Lass Linien nach Möglichkeit als stroke stehen, statt sie in Outlines umzuwandeln; so bleiben Farbe und Stärke aus dem CSS steuerbar.
• Setze die Farbe auf currentColor, damit das Icon die Textfarbe erbt.
• Entferne unnötige Gruppen, leere <g>-Tags und Editor-Metadaten (SVGO erledigt das automatisch).

Ein typisch sauberes Icon sieht so aus:

<svg viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M13 6l6 6-6 6"/>
</svg>

Mit dieser Struktur bezieht ein Icon in einem Button seine Größe und Farbe aus color und font-size, ganz ohne separate Bilddatei.

Häufige Fragen

Welches Pixel-Grid sollte ich für ein Icon-Set verwenden?

Für die meisten Web- und Mobile-Oberflächen ist 24×24 Pixel ein solider Startpunkt. Für sehr dichte Oberflächen kannst du auf 20×20 oder 16×16 gehen; entscheidend ist, das ganze Set auf einem Grid zu halten und verschiedene Größen aus derselben Quelle abzuleiten.

Sollte ich Outline- oder gefüllte (Filled-) Icons verwenden?

Beides ist gültig; die Wahl hängt vom Kontext ab. Outline-Icons wirken leicht und neutral, gefüllte ziehen Aufmerksamkeit auf sich. Viele Sets bieten beides: Outline im Ruhezustand, Filled bei aktiv oder ausgewählt. Achte nur darauf, dass beide demselben Grid und derselben visuellen Sprache folgen.

Kann ich die Strichstärke später ändern?

Hast du die Linien im SVG als stroke belassen, änderst du die Stärke in einer Zeile mit stroke-width. Sobald du Linien aber in Outlines (Pfade) umwandelst, ist das Zurückdrehen schwierig — bewahre die Masterquelle daher immer mit Stroke auf.

Brauchst du ein konsistentes Icon-Set für deine eigene Marke? Ich helfe dir, es durchgängig aufzubauen, vom Grid bis zum sauberen SVG-Export. Nimm Kontakt auf und erzähl mir von deinem Projekt.