Icons und Illustrationen als zusammengehöriges System entwickeln

Ein zusammengehöriges System aus Icons und Illustrationen entsteht durch wiedererkennbare Entscheidungen. Linien, Ecken, Proportionen, Farben und Detailgrad passen zueinander, ohne dass jedes Motiv gleich aussehen muss. Kleine Bedienelemente benötigen andere Lösungen als eine größere erklärende Grafik. Die gemeinsame Sprache soll diese Unterschiede ordnen und den tatsächlichen Inhalt unterstützen.

Dieser Leitfaden entwickelt ein eigenes kleines SVG-System mit Dokument, Suche und Haken sowie einer größeren Dokumentillustration. Die Formen wurden für diesen Beitrag geschrieben und stammen aus keiner fremden Iconbibliothek. Das Raster mit vierundzwanzig Einheiten und die Strichstärke zwei sind bewusste Lehrentscheidungen. Sie sind keine allgemeine Vorschrift für jedes Projekt und keine Behauptung einer überall identischen optischen Wirkung.

Mit Bedeutung und Einsatz beginnen

Erfasse zunächst die Aufgaben der Motive. Soll ein Symbol eine Handlung kennzeichnen, einen Inhalt kategorisieren oder eine Erklärung ergänzen? Diese Rollen brauchen unterschiedliche Behandlung. Ein Suchsymbol neben einer beschrifteten Aktion ist ein anderer Fall als eine eigenständig verständliche Illustration im Text. Die Zeichnung allein entscheidet nicht über ihre Funktion.

Lege die tatsächlichen Einsatzgrößen und Hintergründe fest. Ein Motiv, das nur groß auf einer Entwurfsfläche betrachtet wurde, kann in einer kleinen Navigation seine Merkmale verlieren. Eine aufwendige Illustration muss umgekehrt nicht mit denselben wenigen Linien auskommen wie ein kleines Icon. Die geplante Anwendung liefert den Maßstab für die gemeinsame Gestaltung.

Wenige gemeinsame Regeln ausdrücklich benennen

Unser Iconbeispiel verwendet einen gemeinsamen Koordinatenraum, offene Konturen, abgerundete Linienenden und abgerundete Verbindungen. Die Farbe folgt dem umgebenden Text. Diese Entscheidungen sind leicht zu erkennen und technisch nachvollziehbar. Sie begrenzen den Entwurf sinnvoll, ohne jedes Motiv in dieselbe äußere Silhouette zu zwingen.

Notiere solche Regeln mit ihrem Zweck. Abgerundete Enden können zum gewählten Charakter passen. Eine offene Kontur kann die vorhandene Typografie begleiten. Ein Akzent kann bestimmte Bestandteile hervorheben. Die Begründung hilft bei späteren Ergänzungen. Eine reine Liste von Zahlen erklärt nicht, welche Unterschiede erlaubt oder sogar nötig sind.

Raster und optische Größe unterscheiden

Ein gemeinsames Raster schafft eine technische Grundlage. Es garantiert keine gleiche wahrgenommene Größe. Ein Kreis und ein schmales Dokument können innerhalb derselben Fläche unterschiedlich schwer wirken. Auch die Menge gefüllter Fläche oder die Richtung einer Diagonale beeinflusst den Eindruck. Prüfe die Motive deshalb als Gruppe in ihrer tatsächlichen Anwendung.

Die viewBox beschreibt den SVG-Koordinatenraum und seine Abbildung auf die Darstellungsfläche. Die sichtbare Breite wird zusätzlich festgelegt. Im Beispiel werden die kleinen Icons mit vierundzwanzig Pixeln dargestellt. Die technische Prüfung kontrolliert diese Größe. Eine Messung gleicher wahrgenommener Größe oder eine Verständlichkeitsstudie wird daraus ausdrücklich nicht abgeleitet.

Die Kontur gehört zur tatsächlichen Geometrie

Eine Linie besitzt nicht nur ihren Mittelpunktpfad, sondern eine sichtbare Strichbreite. Wenn ein Pfad genau am Rand liegt, kann ein Teil der Kontur außerhalb des verfügbaren Bereichs landen. Plane deshalb Innenraum ein. Im Beispiel wird zusätzlich geprüft, dass die Formen einschließlich der betrachteten halben Strichstärke innerhalb ihres Koordinatenraums liegen.

Runde Linienenden und Verbindungen sind ebenfalls konkrete Eigenschaften. Sie verändern das Aussehen kurzer Linien und scharfer Übergänge. Verwende sie bewusst und konsistent, soweit die Form es verlangt. Eine neue Form sollte nicht nur deshalb kantige Enden erhalten, weil sie aus einer anderen Datei kopiert wurde. Solche zufälligen Unterschiede schwächen den Zusammenhang.

Farbe als Rolle statt fest verdrahteter Ausnahme

currentColor ermöglicht im Beispiel, die Kontur aus der Textfarbe des umgebenden Bereichs abzuleiten. In einer hellen Umgebung ist sie dunkel, in einer dunklen Umgebung hell. Die Motive benötigen dafür keine zweite unabhängig gepflegte Geometrie. Diese Verbindung ist besonders hilfreich, wenn Icons neben beschriftetem Inhalt stehen und dieselbe visuelle Rolle besitzen.

Ein Akzent kann trotzdem sinnvoll sein. Die größere Dokumentillustration besitzt einen roten oberen Bereich. Diese Farbe ist eine Lehrentscheidung und keine behauptete verbindliche AZ-Farbdefinition. Eine zusätzliche Farbe sollte eine nachvollziehbare Aufgabe haben. Eine zufällige andere Farbe für jedes neue Motiv erzeugt eine Sammlung und noch kein zusammengehöriges System.

Das eigene SVG-Beispiel lesen

Die drei kleinen Motive stehen neben sichtbaren deutschen Bezeichnungen. Sie sind hier nicht anklickbar und lösen keine Handlung aus. Ihr SVG-Inhalt wird als dekorative Ergänzung aus der eigenständigen Bildbenennung herausgenommen. Die größere Illustration erhält dagegen eine eigene kurze Benennung. Die unterschiedliche Behandlung folgt ihrer jeweiligen Aufgabe im Beispiel.

<div class="specimens">
  <span class="specimen"><svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="4" width="12" height="16" rx="2"/><path d="M9 9h6M9 13h6"/></svg>Dokument</span>
  <span class="specimen"><svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="M14.5 14.5 20 20"/></svg>Suche</span>
  <span class="specimen"><svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12 9 16 19 6"/></svg>Haken</span>
</div>
<svg class="illustration" width="96" height="96" viewBox="0 0 96 96" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="document-illustration-title"><title id="document-illustration-title">Dokument mit drei Textzeilen</title><rect x="28" y="16" width="40" height="60" rx="4"/><rect x="28" y="16" width="40" height="10" rx="4" fill="#b80024" stroke="none"/><path d="M36 36h24M36 48h24M36 60h16"/></svg>

Das Dokument entsteht aus einem abgerundeten Rechteck und zwei Linien. Die Suche verbindet Kreis und Griff. Der Haken besteht aus einer einfachen offenen Linie. Die Formen teilen Konturregeln, behalten aber ihre eigene Geometrie. Die Illustration verwendet ein größeres Blatt mit drei Zeilen und einem Akzentbereich. Es wird kein bestehendes Markensignet nachgezeichnet.

Eine Illustration ist mehr als ein vergrößertes Icon

Eine größere Grafik kann Zusammenhänge zeigen, die ein kleines Icon nicht trägt. Sie darf mehr Raum, zusätzliche Bestandteile oder eine erklärende Komposition erhalten. Diese Freiheit sollte aus dem Inhalt entstehen. Das bloße Hinzufügen von Schatten, Details und dekorativen Gegenständen erzeugt noch keine bessere Erklärung. Frage, welcher Bestandteil die Leserfrage unterstützt.

Unser größeres Dokument besitzt einen eigenen Koordinatenraum mit sechsundneunzig Einheiten. Es übernimmt die verwandte Linien- und Eckensprache, ist aber nicht einfach dieselbe Datei mit größerer Breitenangabe. Die Strichstärke bleibt im eigenen Entwurf bewusst definiert. Daraus folgt keine universelle Regel, dass Striche bei jeder Vergrößerung unverändert bleiben müssen.

Betrachte kleine Motive und große Illustration gemeinsam mit der Typografie. Linien können in einer Umgebung zu fein und in einer anderen zu schwer wirken. Die richtige Anpassung ist eine gestalterische Entscheidung am tatsächlichen Ergebnis. Eine rein mathematische Skalierung kann diese Beurteilung vorbereiten, aber nicht vollständig ersetzen.

Bedeutung nicht mit einer vertrauten Form verwechseln

Ein Haken kann in verschiedenen Zusammenhängen Auswahl, Bestätigung oder einen abgeschlossenen Zustand bedeuten. Die Form allein legt diese Aussage nicht fest. Im Lehrblatt heißt das Motiv lediglich Haken. In einer echten Bedienhandlung müsste die sichtbare oder zugängliche Benennung den tatsächlichen Zweck erklären. Ein Wort für die Form ist dann möglicherweise zu wenig.

Dasselbe gilt für Dokument- und Suchmotive. Ein Dokument kann eine Datei, einen Bericht oder eine Inhaltskategorie darstellen. Eine Lupe kann Suche oder Vergrößerung meinen. Entscheide nach dem konkreten Zusammenhang. Wenn eine Verwechslung möglich ist, hilft eine passende Beschriftung häufig mehr als eine weitere kleine Änderung an der Zeichnung.

Dekorative und informative Verwendung getrennt behandeln

Die WAI unterscheidet dekorative Ergänzungen von Bildern mit eigener Information oder Funktion. Bei einer reinen Ergänzung soll der Inhalt nicht unnötig doppelt angekündigt werden. Bei einem funktionalen Bild muss der Zweck verständlich sein. Diese Grundidee wird im Beispiel auf die tatsächlichen Inline-SVGs angewendet. Für eingebundene Bilddateien gelten die jeweils passenden HTML-Mechanismen.

Das größere SVG besitzt ein title-Element und einen passenden Verweis über aria-labelledby. MDN beschreibt title als kurze zugängliche SVG-Beschreibung. Der Verweis muss auf das vorhandene Element zeigen. Werden mehrere Kopien eingefügt, braucht jede relevante Benennung eine eindeutige Zuordnung. Ein kopierter Name mit mehrfach vergebener Kennung kann diese Beziehung unklar machen.

Ein vorhandener Titel ist keine vollständige Barrierefreiheitsbewertung. Die Bedeutung im Kontext, Kontraste und weitere Anforderungen bleiben zu prüfen. Unser Browsernachweis kontrolliert die benannte Bildrolle und die dekorative Behandlung der kleinen Motive. Er behauptet keine identische Ausgabe sämtlicher assistiver Technologien und keine allgemeine Verständlichkeit für alle Zielgruppen.

Was tatsächlich geprüft wurde

Das Beispiel wurde bei 360 und 960 Pixel breitem Ansichtsbereich in hellen und dunklen Farben geprüft. Kontrolliert wurden die kleinen Darstellungsgrößen, Koordinatenräume, berechneten Kontureigenschaften und die Grenzen der Formen. Die Anordnung erzeugte in diesen Prüfungen keinen horizontalen Überlauf. Die größeren und kleineren Motive stammen jeweils aus demselben tatsächlichen SVG-Quelltext.

Zusätzlich wurde genau eine eigenständig benannte Bildrolle für die Illustration gefunden. Die kleinen SVGs wurden neben ihren sichtbaren Bezeichnungen nicht als zusätzliche Bilder ausgewiesen. Diese Prüfung zeigt eine konkrete programmatische Beziehung. Sie ersetzt keine tatsächliche Untersuchung, ob eine bestimmte Person das Motiv im vorgesehenen Anwendungskontext richtig interpretiert.

Optische Korrekturen nachvollziehbar entscheiden

Wenn ein Motiv in der Gruppe unpassend wirkt, beschreibe zunächst die Beobachtung. Ist die Form zu klein, die Kontur zu dicht oder ein Merkmal in der Zielgröße kaum sichtbar? Diese Diagnose führt zu unterschiedlichen Korrekturen. Ein pauschales Vergrößern kann zwar eine Silhouette stärken, aber zugleich den vorgesehenen Innenraum verletzen oder eine Kontur abschneiden.

Verändere einen begründeten Punkt und vergleiche erneut im Zusammenhang. Halte die ursprüngliche Fassung für die Entscheidung bereit. Der Vergleich sollte dieselbe Größe, Farbe und Umgebung verwenden. Andernfalls kann die vermeintliche Verbesserung aus einer anderen Darstellung statt aus der geänderten Geometrie stammen. Dokumentiere die schließlich gewählte Abweichung mit ihrem Zweck.

Ein bestehendes System kontrolliert erweitern

Beginne nicht mit einer langen Wunschliste neuer Motive. Suche zunächst, welche vorhandene Bedeutung bereits abgedeckt ist. Ein zusätzlicher Name kann dasselbe Konzept meinen. Umgekehrt kann ein bisher gemeinsam verwendetes Symbol zwei unvereinbare Bedeutungen tragen. Die begriffliche Ordnung sollte vor der neuen Zeichnung stehen, damit die Sammlung verständlich bleibt.

Führe anschließend ein neues Motiv durch dieselben Entscheidungen: Bedeutung, Einsatzgröße, Koordinatenraum, Kontur, Farbrolle und Benennung. Prüfe es zusammen mit den vorhandenen Nachbarn. Ein isoliert attraktives Motiv kann im System zu detailliert oder zu schwer wirken. Die Erweiterung sollte den gemeinsamen Charakter fortführen und zugleich ihren eigenen Zweck erfüllen.

Eine nutzbare Übergabe vorbereiten

Eine Übergabe sollte die gültigen Dateien, ihre Bedeutungen und die vorgesehenen Größen benennen. Ergänze die Regeln, die spätere Änderungen leiten. Wenn mehrere Varianten existieren, muss ihre Anwendung erkennbar sein. Eine Sammlung ähnlich benannter SVG-Dateien ohne Bezug zum Einsatz erzeugt neue Auswahlfehler, selbst wenn jede einzelne Datei technisch sauber ist.

Zeige die Motive außerdem in echten Beispielen. Ein Icon neben seiner vorgesehenen Beschriftung vermittelt mehr als eine isolierte Großansicht. Eine Illustration sollte mit dem Absatz zusammen betrachtet werden, den sie erklärt. So wird sichtbar, ob sie zusätzliche Information trägt oder lediglich Raum füllt. Das System verbindet Bedeutung und Darstellung über konkrete Anwendungen.

Eine kleine Systembesprechung vorbereiten

Stelle vor der Gestaltung einige konkrete Fragen zusammen. Welche Begriffe wiederholen sich in der Anwendung? Welche davon benötigen überhaupt ein Bildzeichen? Wo bleibt eine sichtbare Beschriftung erhalten? Welche Motive sollen eigenständig erklären? Die Antworten verhindern, dass eine dekorative Sammlung entsteht, deren tatsächliche Verwendung erst nachträglich erfunden werden muss.

Wähle anschließend wenige repräsentative Formen für den ersten Entwurf. Eine runde, eine schmale und eine diagonale Geometrie können unterschiedliche Probleme sichtbar machen. Unsere drei kleinen Motive erfüllen diese Rolle bewusst. Sie beweisen nicht die Eignung für jede spätere Form. Sie schaffen aber eine bessere Diskussionsgrundlage als mehrere nahezu gleiche Rechtecke.

Zeige diese Entwürfe neben der vorgesehenen Schrift und mit echten Bezeichnungen. Ein Symbol kann isoliert stimmig aussehen und neben einer kräftigen Schrift zu fein wirken. Eine lange Beschriftung kann den verfügbaren Platz verändern. Der Zusammenhang hilft, die tatsächlich relevante Entscheidung zu treffen. Eine reine Großansicht auf neutraler Fläche zeigt diese Anwendung nur teilweise.

Technischen Export und Gestaltung gemeinsam prüfen

Eine korrekte SVG-Datei kann gestalterisch ungeeignet sein. Umgekehrt kann eine attraktive Form durch einen fehlerhaften Export ihre Kontur oder Benennung verlieren. Prüfe deshalb beide Ebenen. Sind die vorgesehenen Koordinaten und Attribute vorhanden? Bleibt die Form in der Zielgröße erkennbar? Funktioniert ihre Zuordnung im tatsächlichen Dokument? Jede dieser Fragen benötigt ihren eigenen Blick.

Eine vergrößerte Rasteransicht kann die Konstruktion erklären. Sie ist aber keine Aufnahme des tatsächlichen kleinen Einsatzes. Kennzeichne deshalb, welche Ansicht eine Vergrößerung ist. Zeige zusätzlich die echte Größe. So werden Leser nicht dazu verleitet, die Lesbarkeit einer großen Demonstration für einen Nachweis derselben Eigenschaft bei vierundzwanzig Pixeln zu halten.

Wenn ein Projekt unterschiedliche Ausgabeformate benötigt, sollten ihre Beziehungen nachvollziehbar bleiben. Eine Rasterfassung kann aus derselben gültigen Vektorquelle entstehen. Änderungen an der Quelle müssen dann in die betroffenen Ausgaben übernommen werden. Eine alte exportierte Variante neben einer neuen SVG-Datei ist ein typischer Weg zu unbeabsichtigten Unterschieden. Die Übergabe sollte diese Abhängigkeit benennen.

Ausnahmen begründen statt unbemerkt ansammeln

Eine besondere Form kann eine Abweichung vom üblichen Innenraum benötigen. Entscheide sie bewusst und prüfe den Gesamteindruck erneut. Eine Ausnahme wird nicht dadurch falsch, dass sie eine Zahl verändert. Problematisch wird sie, wenn ihr Zweck unbekannt bleibt und spätere Ergänzungen sie als neue allgemeine Regel übernehmen. Die Dokumentation sollte deshalb Entscheidung und Geltungsbereich verbinden.

Auch beim Detailgrad gilt diese Unterscheidung. Ein kleines Icon kann ein Merkmal weglassen, das in einer größeren Illustration sinnvoll ist. Die Verwandtschaft entsteht durch die Formensprache und den Inhalt. Sie verlangt nicht, dass jedes Detail in jeder Größe vorkommt. Prüfe, welche Information die jeweilige Darstellung tatsächlich tragen soll und welche nur visuelles Rauschen erzeugt.

Verwechsle eine gemeinsame Bildsprache außerdem nicht mit einer automatischen Markenwirkung. Die eigenen Motive dieses Beitrags zeigen einige Regeln und ihre Anwendung. Sie belegen keine gemessene Wiedererkennung. Wenn eine solche Eigenschaft untersucht werden soll, braucht es eine passende Untersuchung. Die technische Gleichheit bestimmter Attribute beantwortet diese andere Frage nicht.

Häufige Fragen zur Systempflege

Wie viele Motive sollte ein System enthalten?

So viele, wie die tatsächlichen Aufgaben sinnvoll benötigen. Eine große Anzahl ist kein Qualitätsnachweis. Prüfe vor jedem zusätzlichen Motiv, ob eine vorhandene Bedeutung passt oder ob eine neue Unterscheidung erforderlich ist. Das hält die Sammlung verständlich und reduziert doppelte Formen mit unklarer Anwendung.

Darf eine Illustration bewusst anders aussehen?

Ja, wenn ihre Aufgabe und der Bezug zum übrigen System klar bleiben. Ein komplexerer Sachverhalt kann zusätzliche Mittel verlangen. Benenne, welche Eigenschaften verwandt bleiben und welche für diesen Zweck verändert werden. Ein begründeter Unterschied ist hilfreicher als eine erzwungene Gleichheit, die die Erklärung schwächt.

Wann sollte eine Form überarbeitet werden?

Wenn sie im vorgesehenen Zusammenhang ihre Aufgabe nicht ausreichend erfüllt oder eine konkrete Systemänderung dies verlangt. Ein neuer Einsatz kann andere Größen oder Hintergründe mitbringen. Prüfe diese Bedingungen, bevor die gesamte Sammlung verändert wird. Eine gezielte Korrektur kann passender sein als eine unbegründete vollständige Neuzeichnung.

Checkliste für die gemeinsame Bildsprache

• Die Bedeutung jedes Motivs ist vor der Zeichnung geklärt.
• Gemeinsame Kontur-, Farb- und Proportionsregeln sind benannt.
• Die Zielgröße wird mit tatsächlichem Inhalt geprüft.
• Form und Strich besitzen genügend Raum innerhalb des Koordinatenbereichs.
• Größere Illustrationen erhalten einen passenden Detailgrad.
• Dekorative Ergänzung und eigene Information sind unterschieden.
• Sichtbare Beschriftungen und zugängliche Benennungen passen zum Zweck.
• Optische Korrekturen werden im selben Zusammenhang verglichen.
• Neue Motive werden als Teil des Systems beurteilt.
• Gültige Dateien, Varianten und Zuständigkeiten sind dokumentiert.

Eine konkrete Übergabefrage lautet beispielsweise, wie ein neues Druckmotiv verwendet werden soll. Steht daneben bereits eine eindeutige Handlungsbeschriftung, kann die Zeichnung ergänzend sein. Trägt das Bild allein eine Handlung, muss deren Zweck passend benannt werden. Die gleiche Form kann somit je nach Verwendung eine andere Textbehandlung benötigen. Halte diese Entscheidung am tatsächlichen Einsatz fest, statt sie nur aus dem Dateinamen abzuleiten.

Quellen und Stand

Quellenstand ist der 9. November 2026. Die WAI erläutert dekorative Bilder und funktionale Bilder. MDN beschreibt SVG-title, Linienenden, die viewBox und currentColor. Sämtliche Beispielmotive und ihre Systementscheidungen sind eigene Entwürfe dieses Beitrags.