Illustrationen & Icons.

Icons erklären, Illustrationen erzählen — beide sprechen dieselbe Sprache: eine offene Linie und eine Markenfarbe als Akzent. Wie das System aufgebaut ist und was zu vermeiden ist, hier als Anwendungs-Guidance. Die reduzierte Bildsprache ergänzt die fotografische Bildwelt. Die Piktogramme für Orientierung und Betrieb stehen unter Symbole & Signaletik.

Icons

Ein einheitliches Icon-Vokabular auf Basis von Lucide — offene Konturen, konsequent reduziert, immer in einer Farbe. Das komplette Set als durchsuchbares Verzeichnis; ein Klick kopiert das fertige <Icon>-Snippet.

Lucide-Outline

Basis ist das Lucide-Set — offene Konturen, keine Füllflächen. Ein einheitliches Vokabular statt gemischter Icon-Stile.

Strichstärke 1.75px

Durchgehend 1.75px auf dem 24×24-Raster. Runde Enden und Ecken (round caps & joins) für einen ruhigen, freundlichen Strich.

currentColor

Icons erben die Textfarbe über currentColor — Weiss auf der schwarzen Bühne, Schwarz auf Markenflächen. Nie mehrfarbig.

Reduziert & funktional

Icons erklären, sie dekorieren nicht. Ein Begriff, ein Piktogramm — klar erkennbar auch bei 16px.

Navigation & Richtung

Wege, Pfeile und Aufklapp-Chevrons.

Aktionen

Was der Nutzer auslöst.

Themen & Sektionen

Das Vokabular der Portalbereiche.

Objekte & Medien

Dinge, Dateien und Medien.

Feedback & Status

Hinweise, Zustände und Reaktionen.

Wie das Icon im Web-System heisst

Das Designsystem der Website führt einen eigenen, kleineren Icon-Satz — technisch verwandt (einfarbige Outline-Glyphen, die die Textfarbe erben), aber anders benannt. Es kracht deshalb nirgends; es passt nur still nicht zusammen. Wer eine Storybook-Vorgabe umsetzt, findet hier die Entsprechung.

29 der 45 Namen haben eine Entsprechung im Portal. 16 haben keine — sie stehen als Lücke da, nicht als nächstbestes Symbol. Ein falsch zugeordnetes Icon wäre schlimmer, weil es die Lücke unsichtbar macht.

Im Web-System	Im Portal	Anmerkung
`arrow-right`	`arrow-right`
`arrow-left`	`arrow-left`
`calendar`	`calendar`
`check`	`check`
`chevron-down`	`chevron-down`
`chevron-left`	`chevron-left`
`chevron-right`	`chevron-right`
`chevron-up`	`chevron-up`
`clock`	`clock`
`filter`	`filter`
`link`	`link`
`mail`	`mail`
`play`	`play`
`refresh`	`refresh`
`search`	`search`
`share`	`share`
`ticket`	`ticket`
`add`	`plus`
`burger`	`menu`
`chat`	`message-square`
`close`	`x`
`delete`	`trash`
`edit`	`pen`
`expand`	`maximize`
`experiment`	`flask`
`group`	`users`
`location`	`map-pin`
`language`	`globe`	Sprachwahl wird im Portal durch die Weltkugel getragen.
`ios-share`	`share`	Teilt sich das Symbol mit «share» — das Portal kennt keine plattformspezifische Variante.
`arrow-down`	— keine Entsprechung	Portal führt nur arrow-right/-left/-up-right.
`arrow-top`	— keine Entsprechung	Portal führt nur arrow-up-right (diagonal).
`bookmark`	— keine Entsprechung
`calendar-clock`	— keine Entsprechung	Im Portal zwei getrennte Glyphen.
`calendar-edit`	— keine Entsprechung	Im Portal zwei getrennte Glyphen.
`cart`	— keine Entsprechung	Shop-Funktion der Website; das Intranet kauft nicht.
`home`	— keine Entsprechung	Das Portal führt zur Startseite über die Wortmarke.
`orbit`	— keine Entsprechung
`person`	— keine Entsprechung	Portal führt nur die Gruppe (users), nicht die Einzelperson.
`phone`	— keine Entsprechung
`planet`	— keine Entsprechung	Nicht auf globe abgebildet — das trägt bereits die Sprachwahl.
`remove`	— keine Entsprechung	Gegenstück zu plus; das Portal kennt kein Minus.
`rocket`	— keine Entsprechung
`sort`	— keine Entsprechung
`sync`	— keine Entsprechung	Nicht auf refresh abgebildet — im Storybook zwei verschiedene Glyphen.
`tag`	— keine Entsprechung

Illustrationen

Wenn ein Phänomen keine Fotografie hat, tritt die gezeichnete Illustration an ihre Stelle — derselbe Strich wie die Icons, nur grösser gedacht. Das reale Set: schwarze Kontur auf weisser Fläche, je eine Markenfarbe pro Motiv als Akzent.

Flache Linienführung

Einfarbige Outline-Illustration ohne Schattierung oder Perspektiventiefe — dieselbe Strich-Logik wie die Icons, nur grösser gedacht.

Eine Markenfarbe

Ein Motiv trägt genau eine Markenfarbe als Akzent — der Rest bleibt schwarze Kontur auf weisser Fläche. Keine Verläufe, keine Kombination.

Abstrakt, aber erkennbar

Phänomene auf das Wesentliche reduziert: geometrisch, präzise, neugierig machend — nachvollziehbar statt dekorativ.

Aus dem Icon-System gewachsen

Illustrationen und Icons teilen Strichstärke, Rundungen und Haltung, damit beide als eine Bildsprache lesbar bleiben.

So what?

Begreifbar

Neugier

Chance

Nicht begreifbar

Einfach testen

Spieltrieb

Zupacken

Fragezeichen

Herzbrille

Der Knopf

Apfel

Jonglieren

Bananenherz

Neugierig bleiben

Nicht verraten

Loslassen

Katzensprung

Keine Zeit

Farbtopf

Enthüllen

Do’s & Don’ts

Ein System, eine Sprache — die Grundregeln für Icons und Illustrationen im Einsatz.

Lucide-Outline durchgehend, 1.75px Strichstärke.

Icons und Illustrationen in currentColor — eine Farbe.

Eine Markenfarbe pro Motiv als Akzent, klare schwarze Kontur.

Reduziert und funktional — erkennbar auch bei 16px.

Icon-Stile mischen (gefüllt, 3D, Emoji, Fremd-Sets).

Illustrationen mit Verläufen, Schatten oder Textur füllen.

Mehrere Markenfarben in einem Motiv kombinieren.

Icons verzerren, abtönen oder als Dekor überladen.

Richtlinien

Die Icons stammen aus dem echten lucide-react-Set, gerendert über die geteilte <Icon>-Komponente — Lucide-Outline, 1.75px, currentColor. Die Illustrationen zeigen das reale Technorama-Set: schwarze Kontur auf weisser Fläche, eine Markenfarbe pro Motiv als Akzent.