Icon

Welches Format wird für Icons auf Webseiten empfohlen?

Wir empfehlen die Verwendung des SVG-Formats. Da SVGs vektorbasiert sind, stellen sie eine optimal Wahl hinsichtlich kleiner Dateigröße und hoher größenunabhängiger Qualität dar.

Folgenden Parametern sollten bei SVGs berücksichtig werden:  

• Vertikal und horizontal Zentrierung
• Standard-Viewbox mit Standard-Schutzbereich (Icon Padding) haben, z.B. viewBox= 0, 0, 90, 90
• Transparenter Hintergrund
• Color-fill-Definition durch interne CSS-Klasse mit der Füllfarbe weiß (#FFFFFF)

Ein weiterer Vorteil von SVG-Icon ist, dass eine Animation in das SVG eingebettet werden können und die Dateigröße meistens relativ klein bleibt. 

Was ist noch bei der Verwendung von Icons auf Webseiten zu beachten?

Heute werden Icons in verschiedensten Bereichen und Zwecken verwendet. Aufgrund des vielseitigen Einsatz kann es schnell zu einem Wildwuchs kommen und Webseiten und Applikation gleichen dann mehr einem Symbol-Dschungel. 

Folglich sind die Nutzer dann öfters verwirrt und der Orientierungs- bzw. der Vermittlungscharakter des Icons gehen verloren. Daher sollten bei der Erstellung als auch beim Einsatz von Icons auf Webseiten und in Applikationen insbesondere auf folgende Aspekte geachtet werden:

• Einfachheit - Zu detailreiche Icons sind oft kontraproduktiv für das schnelle Verständnis
• Kulturelle und kontextuelle Relevanz - Symbole können je nach Kultur unterschiedlich interpretiert werden. Auch ist darauf zu achten, wie ein Icon im Kontext der Webseite verstanden werden kann.
• Skalierbarkeit - Nutzer betrachten ihre Webseite und damit die Icons auf verschiedensten Geräten und damit in verschiedensten Größen. Icons sollte hier unabhängig von der Größe eine gute Qualität aufweisen.
• Wiedererkennbarkeit - Ein einheitliches Icon-Design trägt zum Design der Webseite bei und erhöht die Wiedererkennbarkeit. Sie sollten immer ein Icon-Design-Raster verwenden, um Ihre Formen zu entwerfen und die Konsistenz Ihrer Formen zu gewährleisten.