FigmaopenCode

Icon

Synonyme: Symbol, Piktogramm
Ähnliche Komponenten: –

infoHinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung

Icons sind kleine grafische Symbole, die verwendet werden, um Aktionen, Inhalte oder Statusinformationen visuell darzustellen. Sie helfen dabei, die Benutzeroberfläche intuitiver und ansprechender zu gestalten.

Beispiele

Default Icons

Code anzeigen

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

Small Icon

Code anzeigen

<span class="kern-icon kern-icon--home kern-icon--sm" aria-hidden="true"></span>

Large Icon

Code anzeigen

<span class="kern-icon kern-icon--home kern-icon--lg" aria-hidden="true"></span>

Huge Icon

Code anzeigen

<span class="kern-icon kern-icon--home kern-icon--xl" aria-hidden="true"></span>

Beschreibung

Icons sind visuelle Darstellungen, die verwendet werden, um Benutzeroberflächen zu verbessern. Sie können Aktionen, Inhalte oder Statusinformationen darstellen und helfen dabei, die Benutzererfahrung zu verbessern.

Verwendungsregeln

• Verwende Icons, um Aktionen, Inhalte oder Statusinformationen visuell darzustellen.
• Stelle sicher, dass Icons klar und verständlich sind und ihre Bedeutung intuitiv erkennbar ist.
• Verwende Icons sparsam und nur dort, wo sie einen Mehrwert bieten.

Dos und Don’ts

Dos:

• Verwende Icons, um die Benutzeroberfläche intuitiver und ansprechender zu gestalten.
• Stelle sicher, dass Icons eine klare und verständliche Bedeutung haben.
• Kombiniere Icons mit Text, um ihre Bedeutung zu verdeutlichen.

Don’ts:

• Verwende keine Icons, die schwer zu erkennen oder zu verstehen sind.
• Setze Icons nicht übermäßig ein, um eine Überladung der Benutzeroberfläche zu vermeiden.
• Verwende keine Icons ohne textliche Unterstützung, wenn ihre Bedeutung nicht offensichtlich ist.

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 auf "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 Nutzer*innen 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.

Mehr Infos: MDN Web Docs zu aria-hidden

Siehe auch: BFIT Handreichungen