# Icons

> A set of stroke icons, coloured through the text colour. Fixed roles say what a thing is – from the car for a drive to the question mark for Albert’s suggestion. No emoji, anywhere.

Source: https://brand.heyalbert.family/en/zeichen/ · Hey Albert brand and design system

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

| Icon | Role | File |
| --- | --- | --- |
| bell |  | https://brand.heyalbert.family/marke/zeichen/bell.svg |
| calendar |  | https://brand.heyalbert.family/marke/zeichen/calendar.svg |
| camera |  | https://brand.heyalbert.family/marke/zeichen/camera.svg |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| chart-column |  | https://brand.heyalbert.family/marke/zeichen/chart-column.svg |
| check |  | https://brand.heyalbert.family/marke/zeichen/check.svg |
| chevron-down |  | https://brand.heyalbert.family/marke/zeichen/chevron-down.svg |
| chevron-left |  | https://brand.heyalbert.family/marke/zeichen/chevron-left.svg |
| chevron-right |  | https://brand.heyalbert.family/marke/zeichen/chevron-right.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-plus |  | https://brand.heyalbert.family/marke/zeichen/circle-plus.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| clock |  | https://brand.heyalbert.family/marke/zeichen/clock.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| gauge |  | https://brand.heyalbert.family/marke/zeichen/gauge.svg |
| globe |  | https://brand.heyalbert.family/marke/zeichen/globe.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| house |  | https://brand.heyalbert.family/marke/zeichen/house.svg |
| inbox |  | https://brand.heyalbert.family/marke/zeichen/inbox.svg |
| link |  | https://brand.heyalbert.family/marke/zeichen/link.svg |
| lock |  | https://brand.heyalbert.family/marke/zeichen/lock.svg |
| mail |  | https://brand.heyalbert.family/marke/zeichen/mail.svg |
| message-circle |  | https://brand.heyalbert.family/marke/zeichen/message-circle.svg |
| message-square |  | https://brand.heyalbert.family/marke/zeichen/message-square.svg |
| moon |  | https://brand.heyalbert.family/marke/zeichen/moon.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| pencil |  | https://brand.heyalbert.family/marke/zeichen/pencil.svg |
| plus |  | https://brand.heyalbert.family/marke/zeichen/plus.svg |
| scan-line |  | https://brand.heyalbert.family/marke/zeichen/scan-line.svg |
| search |  | https://brand.heyalbert.family/marke/zeichen/search.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sliders-horizontal |  | https://brand.heyalbert.family/marke/zeichen/sliders-horizontal.svg |
| star |  | https://brand.heyalbert.family/marke/zeichen/star.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| sun |  | https://brand.heyalbert.family/marke/zeichen/sun.svg |
| table |  | https://brand.heyalbert.family/marke/zeichen/table.svg |
| undo-2 |  | https://brand.heyalbert.family/marke/zeichen/undo-2.svg |
| user-plus |  | https://brand.heyalbert.family/marke/zeichen/user-plus.svg |
| user |  | https://brand.heyalbert.family/marke/zeichen/user.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

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

- [Icons (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)

> **Open: Lucide is a stopgap**
>
> Hey Albert never received its own icon set. The reference screens show icons in the style of SF Symbols. The closest match, **Lucide** (ISC licence), was brought in. That is a substitution. It has to be confirmed or swapped for the real set. Until then the Apple app uses SF Symbols.

## Roles (*Sach-Rollen*)

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

| Icon | Role | File |
| --- | --- | --- |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

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

Source: `packages/design-system/components/bausteine/Icon.jsx`

Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.

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

- `name` nimmt eine Sach-Rolle (`fahrt`, `schule`, `sport`, `essen`, `arzt`, `musik`, `freude`, `familie`, `ritual`, `schwimmen`, `vorschlag`) oder direkt einen Lucide-Dateinamen (`bell`, `search`, `plus`).
- Das Zeichen wird inline gerendert und über `stroke: currentColor` eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.
- Quelle sind die Dateien in `assets/icons/`; `components/bausteine/zeichen.js` hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach `assets/icons/` legen und `zeichen.js` neu erzeugen — nie ein SVG von Hand zeichnen.
- Ohne `titel` ist das Zeichen dekorativ (`aria-hidden`) — richtig, weil neben jedem Zeichen Text steht.

```ts
/** 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

Source: `packages/design-system/components/bausteine/SachSymbol.jsx`

Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.

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

Was für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (`Punktgruppe`); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf.

```ts
/** 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:

| Character | For | Example |
|---|---|---|
| `→` | from – to, in drives | Sportplatz Nord → Zuhause |
| `·` | separator within a line | 16:40 · Handball, Halle Süd |
| `›` | filing path | Wichtiges › Versicherungen |
| `–` | en dash, with spaces | 14:00 – 14:30 |

## 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

> **Do**
>
> - Icons next to text, in the text colour.
> - Role name instead of file name.
> - Icons that stand alone get a label.

> **Don't**
>
> - Emoji, including “just on social media”.
> - Filled icons, other stroke widths, two-colour icons.
> - An icon drawn by hand or taken from another set.
> - A menu or chevron in the card header.