Icon-Design ist die Gestaltung kleiner, symbolhafter Grafiken, die Informationen, Funktionen oder Konzepte visuell vermitteln. Icons sind ein zentrales Element des UI-Designs und durchdringen unseren digitalen Alltag – von App-Icons über Navigationsmenüs bis hin zu Infografiken.
Grundprinzipien des Icon-Designs
Klarheit
Ein Icon muss auf den ersten Blick verständlich sein. Wenn Nutzer überlegen müssen, was es bedeutet, hat es seinen Zweck verfehlt. Universell verstandene Symbole (Lupe = Suchen, Herz = Favorit, Warenkorb = Shop) sind immer die sicherste Wahl.
Konsistenz
Alle Icons eines Sets müssen den gleichen Stil verfolgen: gleiche Strichstärke, gleiche Eckenradien, gleiche optische Größe, gleiche Detailtiefe. Inkonsistente Icons wirken unprofessionell.
Skalierbarkeit
Icons müssen von 16×16px bis hin zu großen Darstellungen funktionieren. Deshalb werden sie als Vektorgrafiken erstellt und auf einem Pixel-Grid designed, um bei kleinen Größen gestochen scharf zu bleiben.
Reduktion
Weniger ist mehr. Jedes Detail, das nicht zur Verständlichkeit beiträgt, wird entfernt. Die besten Icons bestehen aus wenigen, klaren Linien und Formen.
Icon-Stile
Outline Icons
Nur Linien, keine gefüllten Flächen. Leicht, modern, luftig. Standard in vielen Webdesign-Projekten. Herausforderung: Müssen bei kleinen Größen noch erkennbar sein.
Filled Icons
Komplett gefüllte Flächen. Stärker, auffälliger, besser erkennbar bei kleinen Größen. Ideal für Navigation und wichtige Aktionen.
Duotone Icons
Zwei Farben oder Opazitätsstufen erzeugen Tiefe, ohne die Klarheit zu gefährden. Trendy und vielseitig.
Das Icon-Grid
Professionelle Icons werden auf einem standardisierten Raster entworfen. Apple verwendet ein 28×28pt-Grid, Material Design ein 24×24dp-Grid. Das Grid definiert:
- Zeichenfläche: Der Gesamtbereich des Icons
- Safe Area: Der Bereich, in dem das Icon platziert wird
- Keyline Shapes: Grundformen (Kreis, Quadrat, Hochformat, Querformat), die die optische Größe normieren
Icons im Corporate Design
Im Corporate Design werden Icons als Teil des visuellen Systems definiert:
- Stil: Outline, Filled oder Duotone – passend zum Gesamtdesign
- Strichstärke: Konsistent (z.B. 2px für alle Icons)
- Farbe: Aus der Farbpalette der Marke
- Ecken: Rund oder eckig – konsistent über das gesamte Set
Der Styleguide dokumentiert alle Regeln und liefert das komplette Icon-Set als SVG-Dateien.
Icon-Design-Workflow
- Recherche: Welche Icons werden benötigt? Welche Metaphern funktionieren?
- Skizzieren: Erste Ideen auf Papier oder im Tablet
- Vektorisieren: Umsetzung auf dem Icon-Grid in Figma oder Illustrator
- Testen: In verschiedenen Größen und Kontexten prüfen
- Optimieren: SVG-Code bereinigen, Pixel-Perfect sicherstellen
- Dokumentieren: Benennung, Verwendungsregeln, Exportformate festhalten
Icons sind die Sprache der Interfaces. Professionelles Icon-Design verbessert die Usability, stärkt die visuelle Hierarchie und gibt der Marke einen unverwechselbaren Charakter.