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>

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