Zum Hauptinhalt springen
FigmaOpenCode

Icon

Synonyme: Symbol, Piktogramm
Ähnliche Komponenten: –

Hinweis

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

Inhaltsverzeichnis