# Icon

Icons sind semantische Symbole, die Inhalte und Funktionen visualisieren und zur Verständlichkeit der Benutzeroberfläche beitragen.

## Guidelines

# 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](https://tabler.io/icons) 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](/04-components/form-controls/search-field/overview) 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](/04-components/structure/accent-box/overview) oder
  [IllustratedMessage](/04-components/content/illustrated-message/overview).