Icons
Funktionale Icons
Unsere funktionalen Icons können dabei helfen, Interaktionen mit dem Interface anzudeuten und Inhalte besser zu strukturieren. Außerdem können sie Eigenschaften oder einen Status zeigen. Funktionale Icons werden hauptsächlich im digitalen Bereich eingesetzt. Sie müssen im Gegensatz zu unseren illustrativen Icons barrierefrei eingesetzt werden.
In der Icon Bibliothek steht für alle Anwendungen eine Vielzahl an freigegebener Icons zur Verfügung.
Verwendungszweck
Funktionale Icons dienen der Orientierung und erleichtern Nutzerinnen und Nutzern die Interaktion mit unseren Anwendungen. Sie kennzeichnen Funktionen, navigieren durch Inhalte oder verdeutlichen Zustände.
Ausrichtung
Die funktionalen Icons sind optisch innerhalb der Icon-Grundfläche zentriert. Die visuelle Zentrierung sorgt dafür, dass Icons beim Einsatz in UI-Elementen, Listen oder Toolbars sauber und gleichmäßig wirken.
Icons werden stets zentriert ausgerichtet, wenn sie in Kombination mit Text verwendet werden.
Icons dürfen nicht an der Grundlinie des Textes ausgerichtet werden.
Abstand
Werden mehrere Icons nebeneinander platziert, beträgt ihr Mindestabstand zueinander die Hälfte ihrer eingesetzten Größe.
Outline- und Fill-Variante
Die meisten unserer funktionalen Icons gibt es als normale Kontur oder mit gefüllter Fläche für den Hover-Zustand in digitalen Anwendungen.
Farbe
Funktionale Icons sind immer einfarbig und in einer klaren Fläche angelegt. Werden sie in digitalen Anwendungen eingesetzt, müssen sie denselben Kontrastanforderungen wie Typografie entsprechen.
Funktionale Icons haben nur eine einzige Farbe.
Es dürfen nicht mehrere Farben innerhalb eines Icons eingesetzt werden.
Werden Icons mit Text kombiniert, sollten diese beiden Elemente die gleiche Farbe haben.
Es sollten keine unterschiedlichen Farben für Text und Icon verwendet werden. Außerdem muss bei der Farbwahl auf ausreichend Kontrast geachtet werden.