← CRAiD Design System

CRAiD Icons

Ein 24er-Raster, 1,75 px Strich. In den Dateien steht kein Hex-Wert: die Tinte ist currentColor, alles andere sind Rollen-Token aus tokens.css. Diese Seite wird aus Figma erzeugt — von Hand geändert wird hier nichts.

27Icons
9Zeichen
24 pxRaster
1,75Strich
0Hex-Werte in den SVGs

Person

Agent und Mensch · 6 Icons
AgentKI-Agent, autonome Einheit
person/agent-outline
person/agent-filled
person/agent-badge
HumanMensch, Rolle, Verantwortung
person/human-outline
person/human-filled
person/human-badge

Objekt

Dinge, die ein Agent anfasst · 21 Icons
ClockZeit, Laufzeit, Frist
objekt/clock-outline
objekt/clock-accent
objekt/clock-badge
DatabaseDatenbank, Speicher, Bestand
objekt/database-outline
objekt/database-accent
objekt/database-badge
DocumentDokument, Artefakt, Beleg
objekt/document-outline
objekt/document-accent
objekt/document-badge
DomainFachdomaene, Wissensgebiet, Feld
objekt/domain-outline
objekt/domain-accent
objekt/domain-badge
MemoryGedaechtnis, Kontext, Erinnerung
objekt/memory-outline
objekt/memory-accent
objekt/memory-badge
ModelModell, Chip, Inferenz
objekt/model-outline
objekt/model-accent
objekt/model-badge
ServerRechenknoten, Instanz, Deployment
objekt/server-outline
objekt/server-accent
objekt/server-badge

Verwenden

Sprite einbetten

Den Inhalt von icons/sprite/craid-icons.svg einmal pro Seite direkt nach <body> einfügen. Danach genügt eine Referenz je Icon:

<link rel="stylesheet" href="/design-tokens/tokens.css">
<link rel="stylesheet" href="/icons/craid-icons.css">

<svg class="craid-icon craid-icon--24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
  <use href="#craid-objekt-clock-outline"></use>
</svg>

Einbetten, nicht verlinken: <use href="sprite.svg#id"> auf eine externe Datei zeigt in Safari nichts an und scheitert über file:// in jedem Browser.

Als <img src> oder CSS-background funktionieren die Dateien nicht — dort kann der Browser currentColor und die Rollen-Token nicht auflösen.

Größen


16

20

24

32

40

64

Erweitern

In Figma zeichnen (Variante Type=…, Style=…), dann FIGMA_TOKEN=… node icons/import-from-figma.mjs, git diff ansehen, committen. --check schreibt nichts und meldet mit Rückgabewert 1, wenn Repo und Figma auseinanderlaufen.

Erzeugt von icons/import-from-figma.mjs aus der Figma-Library CRAiD Icons. Änderungen gehören nach Figma, nicht in diese Datei.