Icon

import { IconHome } from "@mittwald/flow-react-components";

<IconHome />

Best Practices

• Wähle ein Icon, das zum Element und Kontext passt. Verändere oder vertausche die Bedeutungen der Bibliotheks-Icons nicht.
• Lass Icons eine unterstützende Rolle einnehmen. Ein Decorative Icon braucht immer den Kontextbezug, sonst wird es nicht verstanden.
• Setze Icons sparsam ein. Zu viele Icons überfordern kognitiv.
• Verwende nach Möglichkeit ein Icon aus der Icon-Bibliothek‍. Nur wenn keins passt, nutze ein Tabler Icon‍ oder ein eigenes SVG.

Colors

Ohne weitere Angabe übernimmt ein Icon die Textfarbe seiner Umgebung. Über die color-Property lässt sich ein Icon gezielt einfärben. Dabei stehen Brand- und Status-Colors zur Verfügung; neutral setzt die Standard-Icon-Farbe.

Für beliebige Colors unterstützt die color-Property außerdem die Angabe eines HEX-Werts.

Sizes

• s für kleine Hinweise oder Components mit wenig Platz.
• m als Standardgröße.
• l vor allem für dekorative Zwecke.

Tabler Icon

Wenn kein passendes Icon in der Icon-Bibliothek vorhanden ist, kann alternativ ein Icon von Tabler‍ ausgewählt werden. Diese muss für die korrekte Darstellung in der <Icon>-Component eingebunden werden.

import { Icon } from "@mittwald/flow-react-components";
import { IconStar } from "@tabler/icons-react";

<Icon>
  <IconStar />
</Icon>

SVG

Zusätzlich können eigene SVGs als Icons eingesetzt werden. Dabei ist darauf zu achten, dass sie im Stil der übrigen Icons konsistent bleiben. Das SVG muss ebenfalls in der <Icon>-Component eingebunden werden, damit es korrekt dargestellt wird.

import { Icon } from "@mittwald/flow-react-components";

<Icon>
  <svg
    fill="currentColor"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="50" cy="50" r="50" />
  </svg>
</Icon>

Icon-Bibliothek

Im Flow Design System haben ausgewählte Icons eine festgelegte Bedeutung. Sie lassen sich drei Typen zuordnen: Functional, Decorative und Status.

Functional

Functional Icons besitzen eine eindeutige, allgemein verständliche Symbolik, die der User bereits kennt. Sie unterstützen User bei Navigation und Interaktion und werden häufig in Actions wie Icon-Buttons‍ eingesetzt.

Decorative

Decorative Icons tragen zur Ästhetik und zur emotionalen Wirkung der Benutzeroberfläche bei. Im Gegensatz zu den Functional Icons ist ihre Bedeutung jedoch oft nicht intuitiv erfassbar.

Status

Bestimmte Icons dienen der Anzeige des Status eines Elements.

Kombiniere mit ...

Combine

Benutze die Combine‍-Component, um ein Icon neben einem Text zu platzieren.

Properties

Accessibility