Inhaltsbereich Navigation Navigation Fußzeile

Icons

Verwendung

Die Icons sind aus Gründen der Wiedererkennbarkeit an die Icons von zoll.de angelehnt und richten sich nach etablierten Sehgewohnheiten. Sie zeichnen sich durch ein flächiges Design aus, auf Farbverläufe oder räumliche Effekte wird verzichtet. Die Verwendung anderer, nicht zuvor durch das Design System spezifizierter und erstellter Icons ist nicht zulässig.

Der primäre Einsatzzweck von Icons findet sich in Icon-Buttons. Oftmals steht hier zu wenig Platz für eine Textbeschriftung des Buttons zur Verfügung, wie z. B. in der Aktionsspalte von Tabellen. Der Entfall von beschreibenden Text-Labels muss hier durch einen adäquaten Alternativtext kompensiert werden.

Unabhängig von Verwendungsort und -zweck kann ein an den gängigen Sehgewohnheiten orientiert gestaltetes Icon den Zweck eines Buttons visualisieren, wie z. B. das Auslösen einer Suche, oder einen Sachverhalt oder Zustand in Komponenten wie bei Fehlermeldungen kommunikativ unterstützen.

Icons können jenseits von Buttons ebenso als Symbole oder Informationselemente eingesetzt werden, um Orientierung auf der Oberfläche zur geben. Informationen werden hierbei durch die Icons visualisiert, bieten aber keinerlei interaktive Funktionen, die durch eine Betätigung ausgeführt würde.

Grundsätzlich haben Icons immer nur einen definierten Einsatzzweck; die Verwendung gleicher Icons für unterschiedliche Einsatzzwecke in der Anwendung ist nicht zulässig. Die zulässigen Einsatzzwecke sind in der Tabelle im Tab „Code“ beschrieben. Dort finden Sie auch die jeweils aktuelle Version als SVG-Dateien und als Icon-Font.

Icon-Größen

Icons sind als Vektor-Dateien angelegt und von ihren Strichstärken für den Einsatz in den Größen 16x16 und 24x24 Pixel optimiert. Aufgrund ihrer skalierbaren Natur werden die darzustellenden Größen nicht pauschal im Design System vorgegeben, sondern im jeweiligen Kontext am konkreten Einsatzort des Icons bestimmt.

Icon groß.Standard1.5rem / 24px
Icon klein.Klein1rem / 16px

Farben

In Ihrer Farbgebung richten sich die Icons nach dem festgelegten Farbschema. Durch die mögliche Verwendung als Icon-Font sind die Icons grundsätzlich monochrom.

Zur Verwendung z. B. auf den flächigen blauen Hintergründen von Primärbuttons können die Icons weiß eingefärbt werden; für spezielle Einsatzzwecke in Dialogen mit Fehler- und Hinweismeldungen ist ein begrenzter Satz von Signalfarben für Icons definiert. Auch im Kontrastmodus oder Dark Mode werden Icons im benutzerdefinierten Farbschema wahrnehmbar und ausreichend kontrastierend dargestellt.

Do’s and Dont’s

So:

  • Sofern der Platz zur Verfügung benutzen Sie bitte in Buttons aussagekräftige Beschriftungen statt Icons.

So nicht:

  • Standard-Buttons und Icon-Buttons mischen
  • Icon-Buttons ohne Alternativtexte