Icons im Webdesign: Stile, Formate und Quellen

Icons sind kleine Bildzeichen, die Funktionen und Inhalte auf einen Blick erkennbar machen: die Lupe für die Suche, der Pfeil für “weiter”, das Häkchen für “erledigt”. Damit sie im Webdesign funktionieren, brauchen sie drei Dinge: einen einheitlichen Stil, das richtige Format, und das ist heute fast immer SVG, sowie eine zugängliche Einbindung, damit auch Screenreader-Nutzer wissen, was ein Icon bedeutet.

Grundlagen zu Pixel- und Vektorgrafik sowie zu den gängigen Bildformaten stehen im Ratgeber Bildformate und Auflösung.

Wann Icons helfen und wann nicht

Icons sind stark, wenn ihre Bedeutung allgemein bekannt ist. Bei weniger eindeutigen Funktionen helfen sie nur zusammen mit Text.

Ein Icon, das erst erklärt werden muss, kostet mehr Aufmerksamkeit, als es spart. Im Zweifel gilt: Icon und Text zusammen sind fast immer verständlicher als jedes für sich.

Icon-Stile im Überblick

Ein verbreitetes Muster kombiniert Outline und Filled: Der inaktive Menüpunkt zeigt die Kontur, der aktive die gefüllte Variante. Das funktioniert aber nur, wenn beide Varianten aus demselben Set stammen.

Einheitlichkeit: der wichtigste Punkt

Icons aus verschiedenen Sets nebeneinander wirken unruhig, selbst wenn jedes für sich gut gezeichnet ist. Achten Sie auf:

• Ein Set für die gesamte Website, Ergänzungen im selben Stil nachzeichnen.
• Gleiche Strichstärke, zum Beispiel durchgehend 1,5 oder 2 Pixel bei 24 Pixel Größe.
• Gemeinsames Raster und gleiche Innenabstände, damit Icons optisch gleich groß wirken.
• Gleiche Ecken, also entweder abgerundete oder spitze Linienenden.
• Eine Perspektive, nicht flache und dreidimensionale Icons gemischt.

Der gewählte Stil gehört in den Styleguide, damit spätere Ergänzungen zum Bestand passen.

Das richtige Format

Für die meisten Websites ist SVG inline oder als Sprite die beste Lösung. Ein praktischer Kniff: Wird die Linien- oder Füllfarbe im SVG auf currentColor gesetzt, übernimmt das Icon automatisch die Textfarbe des umgebenden Elements. So passt es sich ohne weitere Regeln an Hover-Zustände und den Dunkelmodus an.

Wie SVG-Dateien aufgebaut sind und wie Sie sie verkleinern, erklärt der Artikel SVG im Webdesign.

Icons barrierefrei einbinden

Für die Zugänglichkeit kommt es darauf an, welche Rolle ein Icon spielt:

Dekorative Icons

Steht neben dem Icon bereits ein Text, etwa ein Telefonsymbol vor der Telefonnummer, ist das Icon dekorativ. Es wird mit aria-hidden="true" für Screenreader ausgeblendet, damit die Information nicht doppelt vorgelesen wird.

Icons ohne sichtbaren Text

Ein Button, der nur aus einem Kreuz zum Schließen besteht, braucht einen zugänglichen Namen. Bewährt hat sich ein aria-label am Button, zum Beispiel “Dialog schließen”, während das Icon selbst ausgeblendet wird. Alternativ wird ein Text eingefügt, der nur für Screenreader sichtbar ist.

<button type="button" aria-label="Dialog schließen">
  <svg aria-hidden="true" focusable="false" width="24" height="24">…</svg>
</button>

Kontrast und Größe

Icons, die eine Bedeutung tragen und ohne Text auskommen, müssen sich mit mindestens 3 zu 1 vom Hintergrund abheben. Außerdem braucht jedes Bedienelement eine ausreichend große Klickfläche. Nach WCAG 2.2 sind auf Stufe AA mindestens 24 mal 24 CSS-Pixel gefordert, sofern kein ausreichender Abstand zu Nachbarelementen besteht. Auf Touch-Geräten sind größere Flächen deutlich angenehmer. Das Icon kann dabei kleiner sein als die Klickfläche, der Innenabstand des Buttons gleicht das aus.

Weitere Grundlagen zu Tastaturbedienung, Fokus und Kontrasten fasst der Ratgeber Barrierefreies Webdesign zusammen.

Icons richtig platzieren

Wo ein Icon steht, beeinflusst, wie schnell es verstanden wird. Einige bewährte Regeln:

• Vor dem Text: In Listen, Menüs und Buttons steht das Icon in der Regel links vom Text. Das Auge erfasst zuerst das Symbol und liest dann die Beschriftung.
• Nach dem Text: Richtungspfeile für “weiter” oder Hinweise auf externe Links stehen dahinter, weil sie beschreiben, was nach dem Klick passiert.
• Optisch ausrichten: Icons sollten mittig zur Textzeile sitzen. Da Schriften unterschiedliche Höhen haben, ist dafür manchmal eine kleine manuelle Korrektur nötig.
• Abstand zum Text: Ein fester Abstand, etwa ein Viertel bis die Hälfte der Icon-Größe, wirkt ruhig, wenn er überall gleich ist.
• Sparsam einsetzen: Ein Icon vor jeder Überschrift und jedem Absatz verliert seine Signalwirkung. Icons sollten dort stehen, wo sie Orientierung geben.

In Navigationsleisten für Smartphones hat sich die Kombination aus Icon und kurzer Beschriftung darunter bewährt. Reine Icon-Leisten sind nur dann verständlich, wenn die Symbole sehr bekannt sind.

Quellen für Icons und ihre Lizenzen

Es gibt zahlreiche frei verfügbare Icon-Sets, die von Designsystemen großer Unternehmen oder von Open-Source-Projekten gepflegt werden. Verbreitet sind zum Beispiel Material Symbols, Lucide, Heroicons, Tabler Icons, Phosphor und Bootstrap Icons. Sie unterscheiden sich im Stil, im Umfang und in der Lizenz.

Worauf Sie bei der Auswahl achten sollten:

• Lizenz lesen: Freie Lizenzen wie MIT, ISC oder Apache 2.0 erlauben in der Regel auch die kommerzielle Nutzung, verlangen aber teils, dass der Lizenztext mitgeliefert wird. Andere Lizenzen verlangen eine Namensnennung. Bewahren Sie die Lizenzdatei im Projekt auf.
• Umfang prüfen: Enthält das Set alle Symbole, die Sie brauchen, auch in einem Jahr noch? Ein Wechsel mitten im Projekt ist aufwendig.
• Varianten: Gibt es Outline- und Filled-Varianten, verschiedene Strichstärken?
• Pflege: Wird das Set weiterentwickelt?
• Nicht im Logo: Frei verfügbare Icons eignen sich nicht als Markenzeichen. Manche Lizenzen schließen das ausdrücklich aus.

Bei kostenpflichtigen Icon-Paketen und Bilddatenbanken gelten die jeweiligen Lizenzbedingungen, die sich je nach Anbieter deutlich unterscheiden.

Icons selbst gestalten

Wenn kein Set passt oder die Website ein eigenes Erscheinungsbild braucht, lassen sich Icons auch selbst zeichnen, etwa in Figma, Penpot oder Inkscape. Halten Sie sich dabei an die Regeln guter Sets: festes Raster, etwa 24 mal 24 Pixel mit 2 Pixel Innenabstand, einheitliche Strichstärke, einfache Formen. Exportieren Sie als SVG und entfernen Sie überflüssige Metadaten. Ein Icon, das als Favicon oder App-Symbol dienen soll, braucht zusätzliche Größen, wie im Artikel Favicon erstellen beschrieben.

Checkliste: Icons auf Ihrer Website

• Alle Icons stammen aus einem Set oder folgen demselben Stil.
• Strichstärke, Raster und Linienenden sind einheitlich.
• Icons liegen als SVG vor und übernehmen per currentColor die Textfarbe.
• Dekorative Icons sind mit aria-hidden="true" ausgeblendet.
• Icon-Buttons ohne Text haben einen zugänglichen Namen.
• Bedeutungstragende Icons erreichen 3 zu 1 Kontrast.
• Klickflächen sind mindestens 24 mal 24 Pixel groß.
• Die Lizenz des Icon-Sets ist dokumentiert.

So bleiben Icons das, was sie sein sollen: kleine Helfer, die Orientierung geben, ohne Aufmerksamkeit zu fordern.