Zum Hauptinhalt springen

Icons

Icons für die Gestaltung einsetzen​

Icons vermitteln komplexe Konzepte oder Aktionen in kompakten, visuell ansprechenden Zeichen. Sie verbessern die Nutzungserfahrung, indem sie Orientierung und Interaktion auf digitalen Plattformen vereinfachen. Icons bieten eine universelle visuelle Sprache, die über kulturelle Grenzen hinweg verstanden wird. Sie tragen zur Konsistenz und Wiedererkennbarkeit von Design-Elementen bei.

Aufgrund des Designprinzips „Weiterentwickeln statt Neubauen“ nutzt KERN die Google Material Symbols. Hier steht eine umfangreiche, offene Icon-Sammlung zur freien Verfügung. Die Icons sind durchdacht, klar und konsistent gestaltet und stehen in zahlreichen Varianten zur Verfügung.

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>

Inhaltsverzeichnis