Icon-Systeme & Icon Design
Ein Icon ist eine der härtesten Designaufgaben überhaupt: 16 mal 16 Pixel, eine Bedeutung, kein Erklärtext. Wenn es schlecht gemacht ist, fragen Nutzer das Customer Support Team, was das Symbol bedeutet. Wenn es gut gemacht ist, fällt es niemandem auf, weil es einfach funktioniert. Wir bauen Icon-Systeme, die zur zweiten Sorte gehören. Das gelingt nicht durch hübsche Striche, sondern durch ein konsequent gezogenes Konstruktionsprinzip.
Was ein Icon-System tragfähig macht
Ein belastbares Set hat sechs technische Konstanten: eine definierte Grundbox (häufig 24 mal 24 Pixel), eine einheitliche Strichstärke (meist 1,5 oder 2 Pixel), klar definierte Eckenradien, eine konsistente Endpunktbehandlung (gerundet, gerade, gestutzt), ein System für Innen- und Außenformen, und einen Optical-Size-Ansatz für unterschiedliche Anwendungen. Konkret heißt das: Wir entwickeln die Konstanten vor dem ersten Icon, nicht danach. So passt das vierzigste Icon zum ersten, und das nachgereichte 81. zur gesamten Familie.
Inhaltlich folgt ein Icon der Funktion, nicht der Geste. Ein Suchen-Icon ist eine Lupe, kein Detektiv. Ein Einstellungs-Icon ist ein Zahnrad, kein abstrakter Hub. Wo es um wiederholt verwendete Aktionen geht, gewinnt die etablierte Konvention. Wo es um markenrelevante Inhalte geht (Speisekarte, Produktkategorien, Service-Schritte), entstehen oft eigene Lösungen, die zur Visual Identity passen.
Übergabe so, dass Entwickler und Designer damit arbeiten
Ein Icon-Set ohne ordentliche Übergabe ist ein PNG-Ordner mit gemischten Auflösungen. Wir liefern SVGs mit semantischer Struktur, optimierten Pfaden und einheitlichen Bezeichnungen, dazu eine Figma-Library mit Komponenten und Auto-Layout-Anbindung. Auf Wunsch ergänzen wir eine Icon-Font (z. B. via Fontello) oder ein React-Component-Set. Die Bezeichnungen folgen einem konsistenten Schema (action-edit, status-success, nav-home), damit das Entwicklungsteam ohne Rückfragen einsetzen kann.
Ein Icon-System wird selten allein gebaut. Es ist Teil der Visual Identity, beeinflusst das Webdesign und steht in den Brand Guidelines. Bei Wegeleitsystemen wird daraus ein eigener Strang, der mit Schildgrößen und Lesbarkeit aus zehn Metern Entfernung verhandelt. Was wir nicht machen: 200 Stock-Icons in einem Drive ablegen und Liste nennen. Ein System ist gezeichnet, nicht eingesammelt.
Eine Sprache, nicht ein Sammelsurium
Strichstärke, Eckenradius, Größenraster und Stil werden für alle Icons gemeinsam definiert. So entsteht ein System, das wachsen kann, ohne unruhig zu werden.
Funktional vor dekorativ
Ein Icon ist eine Abkürzung. Wir zeichnen so, dass die Funktion in 16 Pixeln genauso lesbar ist wie auf einem A1-Plakat, nicht nur die Geste.
Technisch sauber, in jedem Tool nutzbar
SVG-Optimierung, korrekte Bezeichnungen, semantische Strukturen und Übergabe als Figma-Library oder Icon-Font. Damit das Entwicklerteam keine Kompromisse eingehen muss.
Erweiterbar nach klarer Logik
Wir dokumentieren das Konstruktionsprinzip. Neue Icons können vom Team weitergezeichnet werden, ohne dass das System bricht.
Ausgewählte Arbeiten
Finanzguru – Brand Design
Eine Fintech-Marke, die im U-Bahn-Schacht funktioniert: Kampagnen, Iconografie und Sprachton für Finanzguru.
Velvet Soul Street – Corporate Design
Streetwear-Energie in einem gestickten Wortmarken-Logo: Identity, Verpackung und Stationery für ein Label.
ANNA YUNA – Musik-Branding
Eine Bildsprache, die zwischen Neonlicht und Mondlicht oszilliert — Cover-Artwork und Bühnenauftritt für eine Musikerin.
Häufige Fragen
Ein durchgängiges Set aus 30 bis 80 Icons inklusive Konstruktionsprinzip und Übergabe als Figma-Library liegt typischerweise zwischen 3.500 € und 9.000 €. Größere Bibliotheken mit 150 oder mehr Icons und mehreren Stilvarianten (filled, outline) starten bei 8.000 € aufwärts.
3 bis 8 Wochen, abhängig von Anzahl und Komplexität der Icons. Bei einem Set von 40 Icons sind 4 Wochen realistisch, ein größeres Bibliotheksprojekt mit 200 Icons braucht 8 bis 12 Wochen mit Reviewschleifen.
Das entscheidet die Anwendung. Für UI-Produkte mit States empfehlen wir oft beide Varianten (filled für aktiv, outline für inaktiv). Für Print und Signage reicht meist eine konsequent gezogene Outline. Wir klären die Entscheidung im Kick-off.
{ "Wenn sie zur neuen Logik passen, ja": { " Häufig liegt das Problem aber genau hier": "vorhandene Sets stammen aus unterschiedlichen Quellen, haben verschiedene Strichstärken und unterschiedliche Auffassungen von Detail. Wir prüfen das im [Brand Audit](/leistungen/strategie/brand-audit) und entscheiden gemeinsam." } }
Ja. Recherche, Skizzen-Reviews und Übergabe laufen vollständig remote über Figma und Loom. Vor-Ort-Workshops sind nach Absprache möglich, deutschlandweit.
Projekt starten?
Erzähl mir kurz, worum es geht — in einem 30-minütigen Erstgespräch klären wir, ob und wie wir zusammen arbeiten.