Icons sind kleine Bildzeichen, die eine Funktion oder einen Inhalt auf einen Blick erkennbar machen. Sie sparen Platz und helfen beim Wiederfinden, funktionieren aber nur, wenn ihre Bedeutung bekannt ist.
- Icons
Kleine Bildzeichen, die eine Funktion oder einen Inhalt auf einen Blick erkennbar machen.
Beispiel: „Das Icon mit der Lupe öffnet die Suche.“Auch: Piktogramm oder Symbol. Piktogramm betont die bildhafte Darstellung, Icon den Einsatz in einer Benutzeroberfläche.
Abgrenzung zum Logo: Ein Logo steht für einen Absender und ist einmalig. Ein Icon steht für eine Funktion und folgt einer Konvention, die möglichst viele kennen.
Nur wenige Icons werden ohne Text verstanden
Lupe, Warenkorb, Haus und das Kreuz zum Schließen sind so verbreitet, dass sie allein stehen können. Fast alles andere wird geraten. Ein Zahnrad kann Einstellungen meinen oder einen Bearbeitungsmodus, drei Punkte je nach Richtung ein Menü oder eine Fortsetzung.
Unsere Empfehlung ist deshalb schlicht: Icon und Beschriftung zusammen, wo der Platz es zulässt. Das Icon beschleunigt das Wiederfinden, der Text verhindert das Raten. Steht ein Icon allein, braucht es ein aria-label mit dem Namen der Funktion.
Einheitlich aus einem Satz
Icons aus verschiedenen Quellen unterscheiden sich in Strichstärke, Rundung und optischer Größe. Nebeneinander fällt das sofort auf. Wir verwenden deshalb je Projekt einen Satz und zeichnen fehlende Zeichen im selben Stil nach, statt sie woanders zu holen.
SVG ist das richtige Format
Ein Icon als SVG bleibt in jeder Größe scharf, lässt sich über CSS einfärben und wiegt wenige hundert Byte. Als PNG bräuchte es mehrere Größen und wäre in der Farbe festgelegt. Nur bei mehrfarbigen, fotoartigen Zeichen lohnt sich ein Pixelformat.
Lange üblich waren Icon-Schriften, bei denen die Zeichen als Buchstaben einer eigenen Schrift geladen wurden. Sie haben zwei Nachteile: Lädt die Schrift nicht, erscheinen zufällige Buchstaben, und ein Screenreader liest diese mit vor. Eingebundene SVG-Dateien haben beides nicht und sind heute der übliche Weg.