Icons

Icons veranschaulichen wichtige Informationen auf kleinstem Raum und kommen ausschließlich im funktionalen Einsatz, insbesondere in digitalen Benutzeroberflächen, zum Einsatz. Für Fahrzeuge, Architektur und Wegeleitung gelten gesonderte Anforderungen und Gestaltungssysteme. Die Icons folgen einem klaren, konsistenten Designsystem und unterstützen eine schnelle und intuitive Orientierung.

Die wichtigsten Icons werden als Paket bereitgestellt. Es sind ausschließlich diese offiziellen Icons zu verwenden und nicht zu verändern. Darüber hinaus stehen viele weitere Icons in der Icon Library zur Verfügung.

Icon Basic Starter Kit Herunterladen

Die Formensprache ist präzise und klar. Icons nutzen so wenige Details wie möglich. Durch bekannte Elemente und Formen schaffen wir ein harmonisches Gesamtbild und klare Wiedererkennung. Unterschiedliche Größen ermöglichen einen optimalen Einsatz für jede Anwendung und bleiben dabei kohärent im Stil.

Als Standard werden Outline-Icons verwendet. Ist die Sichtbarkeit des Icons in der kleinsten Größe stark eingeschränkt, kann in diesem Fall auch eine gefüllte Variante verwendet werden. Gefüllte Icons werden auch eingesetzt, wenn das Icon einen aktiven und inaktiven Zustand darstellen soll.

Die Formsprache der Icons ist klar und geradlinig. Linienenden und Ecken sind rechtwinklig abgeflacht. In der Konstruktion der Icons werden 90°- und 45°-Winkel bevorzugt. Wenn diese nicht ausreichen, dann in 15-Grad-Schritten.

Winkel unter 45° führen zu spitzen Ecken. Dadurch entstehen punktuelle Ungleichgewichte sowie lange Ausläufe. Durch eine gezielte Abflachung der Kante lassen sich diese Phänomene vermeiden. Für eine pixelgenaue Kontrolle über die Außenform des Icons empfiehlt sich zudem die Kontur innenliegend auszurichten.

In einigen Fällen kann eine subtile Abrundung der äußeren Ecken zu einer besseren Erkennbarkeit des Symbols beitragen, z. B. bei der Darstellung auf digitalen Devices wie Smartphones, Tablets oder Laptops. Darüber hinaus dürfen organische Formen, deren natürliche Form eine Rundung aufweist – beispielsweise Schultern oder andere Körperformen –, entsprechend mit einem Eckenradius (z. B. 4 dp) dargestellt werden. Auch Fahrzeuge und Züge werden ihrer charakteristischen Form entsprechend formgetreu umgesetzt. Für technische oder geometrische Formen dürfen die Außenkanten mit einem Radius von 2 dp abgerundet werden.

Icons gibt es in den Größen 32 × 32 dp, 24 × 24 dp und 20 × 20 dp. Der Schutzraum beträgt 2 dp. Basierend auf dem Verwendungszweck und dem Einsatz, wird die richtige Icon-Größe gewählt, um eine pixel-perfekte Darstellung bei 100 % Skalierung zu erreichen.

Large 32 × 32 dp Medium 24 × 24 dp Small 20 × 20 dp

Large 32 × 32 dp

Medium 24 × 24 dp

Small 20 × 20 dp

Alle Icons nutzen eine konsistente Strichstärke von 2 dp. Der Mindestabstand zwischen zwei Linien beträgt ebenfalls 2 dp. Kann Aufgrund der Skalierung der Abstand nicht eingehalten werden, wird zuerst die Komplexität des Icons reduziert. Lässt das Icon keine weitere Reduktion zu, kann der Abstand auf 1 dp verringert werden.

Strichstärke: 2 dp

Mindestabstand: 2 dp

Konsistenz und visuelles Gleichgewicht der Icons wird durch die Verwendung geometrischer Grundformen sicher gestellt. Das Raster dient als Startpunkt für Form und Position bei der Konstruktion.

Large 32 × 32 dp Medium 24 × 24 dp Small 20 × 20 dp

Large 32 × 32 dp

Medium 24 × 24 dp

Small 20 × 20 dp

Wir adaptieren und erweitern bereits vorhandene Formen, um ein harmonisches Gesamtbild und wiedererkennbare Momente zu schaffen.

Bereits vorhandene Formen werden adaptiert und erweitert, um ein harmonisches Gesamtbild und Wiedererkennbarkeit zu schaffen.

Icons werden optisch auf der Grundfläche zentriert, ausgehend von ihrem visuellen Schwerpunkt.

Geometrisch zentriert

Optisch zentriert

Für kleinere Details innerhalb der Icons können je nach Verständlichkeit des Motivs entweder Kreisformen mit 2 × 2 dp (bei großen Icons 2,5 × 2,5 dp) oder Quadratformen mit 2 × 2 dp verwendet werden. Die Wahl der Form richtet sich nach der bestmöglichen Erkennbarkeit des Icons. Bevorzugt wird die Quadratform eingesetzt. Zum besseren Verständnis der Form oder in besonders kleinen Größen kann zudem die Strichstärke von einzelnen Details erhöht oder reduziert werden. Dabei ist weiterhin auf eine pixelgenaue Darstellung zu achten. Überzeichnete Linien sind 3 dp stark. Verschlankte Linien haben eine Breite von 1 dp.

Verringerung der Strichstärke in kleinen Größen

Verbreiterung der Strichstärke zur Erkennbarkeit der Form

Innenflächen von Kreisformen können bei besonders kleinen Icon-Größen gefüllt dargestellt werden, wenn die definierte Mindestbreite der innenliegenden Fläche unterschritten wird. Dadurch bleibt die Form auch in kleinen Größen klar erkennbar.

Durchgestrichene Formen werden durch eine Erweiterung um eine 2 dp-Linie und einen anschließenden Verschnitt erzeugt.

Richtig eingesetzt, unterstützen Animationen positiv die User Experience. Sie lenken den Fokus, schaffen nachvollziehbare Zusammenhänge oder erzeugen Emotion. Icons folgen den Prinzipien des Motion Branding. Animation wird bewusst eingesetzt und wirkt nie störend oder komplex.