Iconography

Iconography bezeichnet die Gestaltung und den konsistenten Einsatz von Icons und Piktogrammen im Webdesign, die zur schnelleren Orientierung und visuellen Kommunikation dienen.

Was bedeutet Iconography im Webdesign?

Iconography (Icon-Design) beschreibt die Gestaltung und den konsistenten Einsatz von Icons und Piktogrammen in digitalen Interfaces. Icons sind visuelle Abkürzungen: Sie sollen Funktionen, Inhalte oder Statusmeldungen schnell verständlich machen, ohne dass Nutzer lange lesen müssen.

Gute Icons unterstützen:

  • Orientierung (Navigation, Menüs, Kategorien)
  • Bedienung (Buttons, Aktionen, Tools)
  • Status-Kommunikation (Fehler, Erfolg, Warnung)
  • Markenwirkung (Ton, Stil, Wiedererkennung)

Warum Icon-Design oft unterschätzt wird

Icons wirken klein, haben aber großen Einfluss. Wenn sie inkonsistent sind, entstehen typische Probleme:

  • Nutzer zögern, weil die Bedeutung unklar ist
  • Interfaces wirken unruhig und unprofessionell
  • Barrierefreiheit leidet, wenn Icons Informationen ohne Text tragen
  • Entwickler bauen unnötige Sonderfälle, weil Größen und Styles variieren

Anforderungen an gutes Icon-Design

Eindeutigkeit

Ein Icon muss in seinem Kontext sofort verständlich sein. Wenn es ohne Erklärung nicht funktioniert, ist es meist kein gutes UI-Icon, sondern eher Illustration.

Beispiele, die oft gut funktionieren:

  • Haus für Startseite
  • Lupe für Suche
  • Papierkorb für Löschen
  • Zahnrad für Einstellungen

Konsistenz

Icons sollten sich wie eine Familie anfühlen. Wichtige Konsistenzregeln:

  • gleiche Linienstärke
  • gleiche Rundungen (Eckenradius)
  • gleiche Perspektive (Outline vs Filled)
  • ähnliche Detailtiefe
  • gleiche optische Größe (nicht nur gleiche Pixelgröße)

Skalierbarkeit

Icons müssen in verschiedenen Größen sauber funktionieren, zum Beispiel:

  • 16 px in einer Navigation
  • 24 px in Buttons
  • 32 bis 48 px in Feature-Listen

Zu filigrane Details brechen in kleinen Größen schnell weg.

Wiedererkennbarkeit und Stil

Der Stil sollte zur Marke passen. Ein tech-lastiges Produkt kann präzise, kantige Icons nutzen, eine Lifestyle-Marke eher weiche, runde Formen. Wichtig ist, dass Stil nicht auf Kosten der Verständlichkeit geht.

Icon-Formate: Was ist sinnvoll?

SVG als Standard

In modernen Webprojekten ist SVG häufig die beste Wahl:

  • scharf in jeder Größe
  • gut für Dark Mode und Farbwechsel per CSS
  • kleine Dateigrößen möglich
  • gut kombinierbar mit Icon-Sets

Icon Fonts: heute oft weniger sinnvoll

Icon Fonts waren lange verbreitet, bringen aber Nachteile mit:

  • Rendering kann je nach Browser unsauber sein
  • Accessibility ist schwieriger
  • einzelne Icons können nicht so flexibel optimiert werden wie SVG

Wenn möglich: lieber SVG verwenden.

Iconography und Barrierefreiheit

Icons dürfen nicht voraussetzen, dass jeder sie korrekt interpretiert. Besonders wichtig:

  • Icons, die allein eine Funktion erklären sollen, brauchen einen Text oder eine klare Beschriftung
  • interaktive Icons benötigen sinnvolle Labels für Screenreader

Beispiel: Button-Icon mit aria-label (Code Snippet)

<button type="button" aria-label="Suche öffnen">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="..." />
  </svg>
</button>

Grundregel:

  • aria-hidden="true" beim SVG, wenn der Button selbst das Label trägt
  • aria-label oder sichtbarer Text für die Aktion

Icon-System im Design System

In Design Systems werden Icons wie Komponenten behandelt:

  • klarer Name pro Icon (z. B. icon/search, icon/settings)
  • definierte Größen (z. B. 16, 20, 24)
  • definierte Linienstärken und Rastersystem
  • Varianten (Outline, Filled), aber nur wenn wirklich nötig

Mini-Check: Icon-Set in der Praxis

  • Gibt es ein Raster (z. B. 24 x 24)?
  • Haben alle Icons die gleiche optische Gewichtung?
  • Sind die wichtigsten Icons in kleinen Größen testbar?
  • Sind Namen logisch und eindeutig?

Typische Fehler beim Icon-Design

  • zu viele unterschiedliche Stile in einem UI
  • Icons sind zu detailreich für kleine Größen
  • Icons werden als Ersatz für Text benutzt, obwohl die Bedeutung nicht universal ist
  • keine klare Entscheidung: Outline und Filled werden gemischt
  • fehlende Zustände: aktiv, inaktiv, hover, disabled

Checkliste: Gutes Icon-Design

  • Icon ist im Kontext sofort verständlich
  • Stil und Linienstärke sind einheitlich
  • optische Größen wirken harmonisch
  • Icons funktionieren in kleinen Größen (16 bis 24 px)
  • SVG wird genutzt (wenn möglich)
  • Accessibility ist berücksichtigt (Labels, nicht nur Farbe, klare Zustände)
  • Icons sind als Teil des Design Systems dokumentiert

Fazit

Iconography ist ein zentraler Baustein guter UI-Gestaltung. Gute Icons sparen Zeit beim Verstehen, verbessern Navigation und stärken die Markenwirkung. Entscheidend sind Eindeutigkeit, Konsistenz, Skalierbarkeit und saubere technische Umsetzung, idealerweise als SVG und eingebettet in ein Design System.

jetzt online