Grundlagen
Best practices
Achte bei der Verwendung von Icons darauf, dass ...
- das ausgewählte Icon zum jeweiligen Element und Kontext passt. Die Bedeutungen von Icons aus der Bibliothek sollten nicht verändert oder vertauscht werden.
- sie eine unterstützende Rolle einnehmen. Ein Decorative Icon sollte beispielsweise immer im Zusammenhang mit dem Kontext stehen, da es sonst nicht verstanden wird.
- sie nicht zu viel eingesetzt werden, um kognitive Überforderung zu vermeiden.
- nach Möglichkeit ein Icon aus der Icon-Bibliothek (s. Overview) verwendet wird. Nur wenn kein passendes Icon vorhanden ist, sollte ein Tabler Icon oder ein eigenes Icon (SVG) genutzt werden.
Verwendung
Verwende Icons, um ...
- visuelle Anker zu schaffen, die das Erfassen von Informationen erleichtern.
- Interaktionen verständlicher zu machen. Beispiel: Im SearchField hilft das Lupen-Icon dabei, die Suchfunktion intuitiv zu erfassen.
- Oberflächen zu gestalten. Die visuelle Wirkung von Icons zeigt sich z. B. besonders in Components wie AccentBox oder IllustratedMessage.