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.
KERN Iconset
KERN nutzt die „rounded“ und „fill“ Varianten der Google Material Symbols mit den Eigenschaften "Weight: 400", "Grade: 0", "Optical Size: 24". Im Code können grundsätzlich alle Google Material Symbols verwendet werden. Für KERN haben wir jedoch eine Auswahl getroffen, die für die aktuellen Komponenten benötigt wird.
arrow_forward
arrow_back
expand_more
expand_less
open_in_new
download
autorenew
add
done
close
more_vert
visibility
visibility_off
calendar_today
question_mark
info
warning
emergency_home
check_circle
delete
search
draft
edit
content_copy
home
chevron_right
keyboard_double_arrow_right
keyboard_double_arrow_left
drive_folder_upload
Core- und semantische Icons
Ein Icon kann in verschiedenen Komponenten verschiedene Bedeutungen haben. Deshalb unterscheiden wir in der Figma-Datei zwischen Core- und semantischen Icons. Core-Icons behalten ihre ursprünglichen Namen aus der Material Symbols-Palette. Sie werden in den semantischen Icons verschachtelt und erhalten dadurch eine Bedeutung. Das Material Symbol „arrow-forward“ wird zum Beispiel auf semantischer Ebene im Kontext eines Links zum „semantic-link-default“-Icon oder – im Kontext eines Buttons – zum „semantic-button-continue“-Icon.
Iconset erweitern
Solltest du ein zusätzliches Icon aus der Sammlung der Material Icons benötigen, das nicht in der „UX-Standard“-Figma-Datei enthalten ist, kann dies an zentraler Stelle hinzugefügt werden. Nutze dazu bitte die Feedback-Funktion am Seitenrand und teile deine Anforderung mit.
Themes
Das Icon-Set kann auch für ein neues Theme angepasst werden. Dabei werden Icons durch andere Icons ersetzt, die sich in ihrer visuellen Ausprägung von dem Standard-Icon-Set unterscheiden, jedoch die gleiche semantische Bedeutung haben. Wir raten allerdings davon ab, da die KERN Icons in Größe und Gestalt so an die Komponenten angepasst sind, dass sie sich harmonisch in das Gesamtbild einfügen. Außerdem wird eine individuelle Änderung des Icon-Sets bei Updates der Figma-Datei überschrieben und muss neu hinterlegt werden. Wir empfehlen daher, das individuelle Icon-Set separat zu sichern.