Icons und Illustrationen

Icons sind die kleinsten Bilder einer Website und oft die am meisten unterschätzten. Eine Lupe für die Suche, ein Telefonhörer neben der Nummer, ein Häkchen in einer Aufzählung – sie beschleunigen die Orientierung, sparen Platz und geben einer Oberfläche Struktur. Gleichzeitig verraten sie schnell, wie sorgfältig ein Auftritt gestaltet ist. Icons aus fünf verschiedenen Quellen mit unterschiedlichen Strichstärken wirken unordentlich, auch wenn Besucher den Grund nicht benennen können. Illustrationen gehen einen Schritt weiter: Sie sind eigenständige Bilder, die komplexe Inhalte erklären oder einer Marke Persönlichkeit geben.

1. Wozu Icons dienen

Icons erfüllen drei Aufgaben. Sie beschleunigen das Erkennen, weil ein bekanntes Zeichen schneller erfasst wird als ein Wort. Sie gliedern, weil sie Listen und Abschnitte optisch strukturieren. Und sie sparen Platz, besonders auf mobilen Geräten. Allerdings gilt das nur für wirklich bekannte Zeichen. Untersuchungen zur Verständlichkeit von Icons zeigen, dass nur wenige Symbole allgemein verstanden werden: die Lupe für Suche, das Haus für Startseite, der Warenkorb, das Druckersymbol. Die meisten anderen werden unterschiedlich gedeutet.

Daraus folgt die wichtigste Regel: Icons sollten in aller Regel von einem Text begleitet werden. Das Wort erklärt, das Icon beschleunigt. Ein Zahnrad allein kann Einstellungen, Technik oder Service bedeuten; mit dem Wort „Einstellungen“ daneben ist es eindeutig. Ausnahmen sind die wenigen allgemein bekannten Symbole – und selbst dann braucht das Icon einen zugänglichen Namen für Screenreader.

2. Ein Set, eine Familie

Der häufigste Fehler im Umgang mit Icons ist die Mischung. Ein Icon kommt aus einer kostenlosen Sammlung, ein anderes aus dem Theme, ein drittes hat die Agentur gezeichnet. Probieren Sie den Unterschied aus:

Ein einheitliches Set teilt Strichstärke, Rastergröße, Eckenradius, Perspektive und die Entscheidung zwischen Umriss und Füllung. Es gibt hervorragende freie Sets, die Hunderte oder Tausende von Icons in einem Stil bieten, etwa Lucide, Phosphor, Heroicons oder Material Symbols. Wer sich für ein Set entscheidet, sollte dabei bleiben und fehlende Icons im gleichen Stil nachzeichnen lassen, statt aus einem anderen Set zu ergänzen.

3. Icons und Barrierefreiheit

Für Screenreader sind Icons zunächst unsichtbar oder werden mit ihrem technischen Namen vorgelesen. Deshalb gilt: Steht ein Icon neben einem Text, der dasselbe sagt, wird es als dekorativ markiert und vom Screenreader übersprungen. Steht ein Icon allein in einem Knopf, braucht der Knopf einen zugänglichen Namen, etwa „Menü öffnen“ oder „Suche“. Außerdem müssen Icons, die Informationen tragen, einen Kontrast von mindestens 3:1 zum Hintergrund haben. Ein zartgraues Icon auf weißem Grund mag elegant aussehen, ist für viele Menschen aber kaum erkennbar.

4. Illustrationen

Illustrationen sind größer, freier und persönlicher als Icons. Sie können Abläufe erklären, die sich schwer fotografieren lassen, etwa einen digitalen Prozess oder die Funktionsweise einer Maschine. Sie können Stimmungen erzeugen, leere Zustände freundlicher machen und einer Marke ein unverwechselbares Gesicht geben. Viele Technologieunternehmen setzen deshalb auf einen eigenen Illustrationsstil.

Die Herausforderung ist dieselbe wie bei Fotos und Icons: Konsistenz. Illustrationen aus verschiedenen Quellen und Stilen wirken zusammengewürfelt. Frei verfügbare Illustrationssammlungen sind ein guter Anfang, haben aber denselben Nachteil wie Stockfotos – sie sind auf vielen Websites zu sehen. Wer Illustrationen als Markenelement nutzen will, sollte einen eigenen Stil entwickeln lassen: Farbpalette, Linienführung, Proportionen von Figuren, Detailgrad. Ein solcher Stilleitfaden erlaubt es später auch anderen Illustratoren, im gleichen Stil weiterzuarbeiten.

Für technische Erklärungen sind schematische Grafiken oft besser geeignet als bildhafte Illustrationen. Eine klare Darstellung mit wenigen Formen, Pfeilen und Beschriftungen erklärt einen Ablauf schneller als eine detailreiche Szene. Die Abbildungen in diesem Kurs folgen diesem Prinzip: wenige Farben, klare Formen, direkte Beschriftung.

5. Icons und Illustrationen im Alltag

Damit Icons und Illustrationen über Jahre einheitlich bleiben, braucht es wenige Regeln. Das gewählte Icon-Set wird im Designsystem festgehalten, samt Größen und Farben. Neue Icons werden nur aus diesem Set gewählt. Für Präsentationen und Dokumente gibt es eine Sammlung der wichtigsten Icons als Dateien, damit niemand im Internet nach Ersatz sucht. Und Illustrationen werden entweder nach dem Stilleitfaden erstellt oder gar nicht verwendet. Diese Disziplin kostet wenig und zahlt sich in einem ruhigen, professionellen Auftritt aus.

Ein letzter Hinweis gilt der Technik. Icons sollten als SVG eingebunden werden, nicht als Bilddatei oder in einer Icon-Schriftart. SVG-Icons sind gestochen scharf auf jedem Bildschirm, lassen sich per CSS einfärben und in der Größe anpassen, sind sehr klein und können für Screenreader korrekt beschriftet werden. Icon-Schriftarten, früher weit verbreitet, verursachen dagegen Probleme bei der Barrierefreiheit und laden oft Hunderte von Zeichen, von denen nur wenige gebraucht werden.

6. Eigene Icons entwickeln lassen

Manchmal reicht ein fertiges Icon-Set nicht aus, etwa wenn sehr spezielle Produkte, Maschinen oder Leistungen dargestellt werden sollen, für die es keine passenden Symbole gibt. Dann lohnt es sich, eigene Icons im Stil des gewählten Sets zeichnen zu lassen. Die Vorgaben dafür lassen sich aus dem Set ablesen: die Rastergröße, meist 24 mal 24 Pixel, die Strichstärke, die Form der Linienenden und Ecken, der Innenabstand zum Rand. Ein erfahrener Gestalter kann auf dieser Grundlage neue Icons erstellen, die sich nahtlos einfügen.

Bei eigenen Icons gilt besonders die Regel der Einfachheit. Ein gutes Icon ist auf das Wesentliche reduziert und auch in 16 Pixeln noch erkennbar. Details, die in der Vergrößerung schön aussehen, verschwinden in kleinen Größen oder machen das Icon unruhig. Ein bewährter Test ist, das Icon in der kleinsten verwendeten Größe neben die anderen Icons des Sets zu stellen und aus einigem Abstand zu betrachten. Fällt es aus der Reihe, weil es zu dunkel, zu fein oder zu detailliert wirkt, wird nachgebessert, bis es sich ruhig in die Reihe einfügt.

Auch Illustrationen profitieren von festen Regeln. Ein kurzer Stilleitfaden legt die erlaubten Farben aus der Markenpalette fest, die Strichstärke, den Umgang mit Schatten, die Darstellung von Menschen und die typischen Bildformate. Mit einem solchen Leitfaden kann auch ein späterer Illustrator im gleichen Stil weiterarbeiten, und der Auftritt bleibt über Jahre einheitlich. Ohne ihn entsteht nach wenigen Aufträgen ein Durcheinander verschiedener Stile, das mühsam wieder vereinheitlicht werden muss.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.