FigmaOpenCode

Icon

Synonyme: Symbol, Piktogramm, Bildzeichen
Ähnliche Komponenten: –

Kurzbeschreibung

Icons sind kleine grafische Symbole, die verwendet werden, um Aktionen, Inhalte oder Statusinformationen visuell darzustellen oder hervorzuheben.

Beispiele

Default

Code anzeigen

<span class="kern-icon kern-icon--home kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--arrow-up kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--arrow-down kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--arrow-forward kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--arrow-back kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--info kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--success kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--warning kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--danger kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--open-in-new kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--download kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--logout kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--checklist kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--mail kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--edit kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--sign-language kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--easy-language kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--autorenew kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--add kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--close kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--delete kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--search kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--question-mark kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--more-vert kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--content-copy kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--visibility kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--visibility-off kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--check kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--drive-folder-upload kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--chevron-left kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--chevron-right kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--keyboard-double-arrow-left kern-icon--default" aria-hidden="true"></span>  
<span class="kern-icon kern-icon--keyboard-double-arrow-right kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--language kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--dehaze kern-icon--default" aria-hidden="true"></span>
<span class="kern-icon kern-icon--account-circle kern-icon--default" aria-hidden="true"></span>

Varianten

Code anzeigen

<p>Icon small</p>
<span class="kern-icon kern-icon--home kern-icon--small"></span>
<p>Icon default</p>
<span class="kern-icon kern-icon--home"></span>
<p>Icon large</p>
<span class="kern-icon kern-icon--home kern-icon--large"></span>
<p>Icon x-large</p>
<span class="kern-icon kern-icon--home kern-icon--x-large"></span>

Beschreibung

KERN nutzt die Google Material Symbols – eine klar strukturierte, konsistente Icon-Bibliothek mit hoher gestalterischer Qualität. Für ein harmonisches, zugängliches Erscheinungsbild setzen wir Icons im Stil „rounded“ ein, mit der Darstellungsoption „fill“ sowie den typografischen Parametern weight: 400, grade: 0 und optical-size: 24. Diese Kombination sorgt für ausgewogene Proportionen, gute Lesbarkeit und eine weiche, moderne Ästhetik. Ein Icon kann je nach Bedarf in einer von vier Größen eingesetzt werden.

Verwendungsregeln

Stelle sicher, dass die verwendeten Icons klar und intuitiv verständlich sind. Kombiniere sie idealerweise mit begleitendem Text, um ihre Bedeutung zu verdeutlichen. Verwende Icons gezielt und sparsam – nur dort, wo sie tatsächlich einen Mehrwert bieten, etwa zur Kennzeichnung einer Aktion oder eines Status.
Beachte, dass Icons unterschiedlich interpretiert werden können und dadurch leicht zu Verwirrung führen. Verwende jedes Icon daher nur für eine eindeutige Funktion und achte auf konsistente Verwendung im gesamten Interface. Ein gutes Beispiel: Die Lupe steht als etabliertes Symbol für die Suche – sie sollte nicht gleichzeitig zur Darstellung einer Bildschirmvergrößerung verwendet werden.

Dos und Don’ts

• Achte auf ein ausgewogenes Größenverhältnis des Icons zum begleitenden Text.
• Vermeide Icons, die in ihrer Bedeutung unklar oder unverständlich sind.
• Überlade deine Benutzeroberfläche nicht mit Icons.
• Benutze gewohnte und gelernte Icons für bestimmte Aktionen oder Status.
• Verwende ein bestimmtes Icon konsistent für nur einen Zweck.

Barrierefreiheit

Bei der Verwendung von Icons wird in den meisten Fällen das Attribut aria-hidden=„true" gesetzt, um sicherzustellen, dass Icons, die nur dekorative Zwecke erfüllen, von Screenreadern ignoriert werden. Dadurch wird der Fokus auf den textlichen Inhalt gelegt, der in der Regel ausreichend aussagekräftig ist.

• Wenn ein Icon eine wichtige Information vermittelt oder in bestimmten Fällen vorgelesen werden soll, muss das Attribut aria-hidden="false" gesetzt werden. Zusätzlich sollte dem Icon ein aria-label zugewiesen werden, um den Screenreadern eine klare, verständliche Beschreibung des Icons zu geben. So wird sichergestellt, dass das Icon auch für Nutzende mit Sehbehinderungen zugänglich bleibt.
• Verwende keine Sonderzeichen als Icons, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Zudem ist darauf zu achten, dass alle in Links verwendeten Icons mindestens 24 × 24 Pixel groß sind und einen ausreichenden Abstand zueinander aufweisen, um eine problemlose Bedienung – insbesondere auf mobilen Geräten – zu gewährleisten.

Mehr Infos: MDN Web Docs zu aria-hidden

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.1.1

Icons haben aussagekräftige Alternativtexte oder sind dekorativ markiert

Implementierungsabhängig

WCAG 1.3.1

Icon-Bedeutung ist programmatisch erkennbar

Implementierungsabhängig

WCAG 1.4.1

Icon-Bedeutung wird nicht ausschließlich durch Farbe vermittelt

Implementierungsabhängig

WCAG 2.1.1

Interaktive Icons sind per Tastatur bedienbar

Implementierungsabhängig

WCAG 2.4.13

Interaktive Icons haben sichtbare Fokuszustände

Implementierungsabhängig

WCAG 2.5.5

Interaktive Icons haben eine Mindestgröße von 44x44px

Implementierungsabhängig

WCAG 3.2.4

Gleichartige Icons sind konsistent verwendet

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.6

Icons erfüllen das minimale Kontrastverhältnis von 7:1