Ein Icon ist eine kleine grafische Darstellung, die einen Begriff, eine Funktion oder eine Aktion visuell komprimiert vermittelt. Auf Websites werden Icons heute hauptsächlich als skalierbare SVG-Grafiken oder über Icon-Fonts wie Font Awesome eingebunden.
Was bedeutet das?
Der Begriff stammt vom griechischen Wort „eikon“ (Bild) und bezeichnet im digitalen Kontext kompakte Symbole, die Nutzern erlauben, Inhalte und Funktionen schnell zu erfassen. Ein Lupen-Icon steht für Suche, ein Zahnrad-Icon für Einstellungen, ein Haus-Icon für die Startseite. Diese visuelle Sprache ist so weit standardisiert, dass viele Icons ohne Beschriftung verstanden werden.
Technisch gibt es drei verbreitete Methoden, Icons in Websites einzubinden. Die erste Methode ist das Icon-Font-Verfahren: Eine Schriftartendatei enthält statt Buchstaben Symbole. Der Browser rendert sie wie Text, was einfaches Styling per CSS erlaubt, zum Beispiel Farbe, Größe und Schatten. Das bekannteste Beispiel ist Font Awesome, das Tausende Icons in verschiedenen Stilvarianten bereitstellt. Der Nachteil von Icon-Fonts ist, dass der Browser eine vollständige Schriftdatei lädt, auch wenn nur wenige Icons genutzt werden.
Die zweite und heute empfohlene Methode ist SVG (Scalable Vector Graphics). SVG-Icons sind Vektorgrafiken im XML-Format, die ohne Qualitätsverlust auf jede Größe skaliert werden können. Sie können direkt in den HTML-Quellcode eingebettet werden (Inline-SVG), was volle CSS- und JavaScript-Kontrolle ermöglicht, oder als externe Datei über <img src="icon.svg"> eingebunden werden. Inline-SVG-Icons können per CSS mit fill oder stroke einfärbt werden und reagieren auf :hover-Zustände, ohne JavaScript. MDN dokumentiert das SVG-Element als baseline-verfügbar seit Juli 2015 in allen modernen Browsern.
Die dritte Methode sind Rasterbilder (PNG, GIF). Sie verlieren bei Vergrößerung an Schärfe und sind heute in der Regel nur noch sinnvoll, wenn ein Logo oder ein komplexes Bild als Icon eingesetzt wird. Für einfache Symbole sind SVG oder Icon-Fonts überlegen.
In WordPress-Themes spielen Icons eine zentrale Rolle. Das Theme Impreza zum Beispiel verwendet Material Icons und Font Awesome, die über den Theme-eigenen Icon-Picker direkt in Shortcodes wie eingesetzt werden können. Der Vorteil gegenüber Inline-HTML mit selbst definierten Icon-Klassen: Das Theme optimiert das Laden und stellt sicher, dass die Icons responsive und barrierefrei dargestellt werden.
Beispiel aus der Praxis
Sie bauen eine WordPress-Dienstleistungsseite und möchten in einer dreispaltigen Box-Reihe jeweils ein passendes Icon über dem Text zeigen. Im Impreza-Theme verwenden Sie dafür den Shortcode für einen Sicherheitshinweis und für einen Hinweis auf deutschen Serverstandort. Das Theme rendert das Icon korrekt in der richtigen Farbe und Größe, ohne dass Sie eine externe Icon-Font-Bibliothek manuell einbinden oder SVG-Dateien hochladen müssen. Das Icon passt sich automatisch an die vom Theme definierten Farben an.
Tipp aus der Praxis
Wenn Sie SVG-Icons direkt in den Code einbetten, fügen Sie stets ein aria-label-Attribut am <svg>-Element oder ein verstecktes <title>-Element innerhalb des SVGs hinzu. Screenreader ignorieren SVG ohne diese Attribute vollständig, was die Bedienbarkeit der Seite für sehbehinderte Nutzer beeinträchtigt. Außerdem empfiehlt es sich, das SVG mit role="img" zu markieren, damit Hilfstechnologien es korrekt als Bild einordnen. Nutzen Sie hingegen ein dekoratives Icon ohne semantischen Mehrwert, setzen Sie aria-hidden="true", damit Screenreader es übergehen.