Icons

Our icons are stroke icons: 2 px stroke, round ends, no fill. An icon sits next to text and makes it faster to grasp. It does not replace the text.

The set

Every icon can be downloaded as SVG. All of them are in the package:

Roles (Sach-Rollen)

Some icons have a fixed meaning. The icon says what kind of thing a card is. This mapping is never swapped.

In code an icon is named after its role, not its file: <Icon name="fahrt" /> rather than <Icon name="car-front" />. That keeps the meaning in one place, the Icon component.

How icons sit

• In the card header the icon of the thing sits on the left in a light circle: 26 px on the Mac, 24 px on iPhone (component SachSymbol). On the right are the people’s dots. Nothing else in the header.
• Coloured through currentColor. The icon takes its parent’s text colour. So it switches with the mode and comes along in screenshots and exports.
• Rendered inline, never as an image URL. The paths live in components/bausteine/zeichen.js; the SVG files in assets/icons/ remain the source.
• Decorative without titel: the icon gets aria-hidden, because the text next to it carries the meaning. An icon on its own, say in a round button, needs a titel or a label on the button.

<Icon name="fahrt" groesse={16} titel="Fahrt" />

/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
  /** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
  name: string;
  /** Kantenlänge in px. Standard 16. */
  groesse?: number;
  /** Strichstärke. Standard 2 — wie im Satz. */
  strich?: number;
  /** Strichfarbe. Standard currentColor. */
  farbe?: string;
  /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
  titel?: string;
  style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;

<SachSymbol art="fahrt" titel="Fahrt" />

/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
  /** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
  art?: string;
  /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
  groesse?: number;
  /** Auf farbigen Karten - haelt den Kreis hell. */
  aufFarbe?: boolean;
  titel?: string;
  style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;

No emoji

There is no emoji. Not in the app, not on the website, not on social media, not in emails. Nor Unicode characters as icon substitutes, such as stars, ticks or arrows from the font.

Exactly four text characters are allowed:

An icon is missing

No drawing of our own. If an icon is missing, take it from the same set:

1. Put the SVG file from the set into packages/design-system/assets/icons/.
2. Regenerate components/bausteine/zeichen.js.
3. If the icon needs a meaning, add the role to SACHEN in the Icon component.

In short