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.

KERN Iconset

KERN nutzt die „rounded“ und „fill“ Varianten der Google Material Symbols. 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_forward

arrow_back

arrow_back

expand_more

expand_more

expand_less

expand_less

open_in_new

open_in_new

download

download

mail

mail

autorenew

autorenew

add

add

done

done

close

close

more_vert

more_vert

visibility

visibility

visibility_off

visibility_off

calendar_today

calendar_today

question_mark

question_mark

info

info

warning

warning

emergency_home

emergency_home

check_circle

check_circle

delete

delete

search

search

draft

draft

edit

edit

content_copy

content_copy

home

home

chevron_right

chevron_right

keyboard_double_arrow_right

keyboard_double_arrow_right

keyboard_double_arrow_left

keyboard_double_arrow_left

drive_folder_upload

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.