Icons

Miragon nutzt drei Arten von Zeichen: Lucide für alle Funktionsicons, die Modeler-Icons als Zeichen der einzelnen Modeler und den Komet als Zeichen der Marke.

Jede Art hat ihren festen Platz. Wenn du weißt, welche gerade gefragt ist, mischst du nicht und erfindest nichts dazu.

Drei Zeichenarten

Zeichen	Wo es steht
Lucide Funktionsicons aus einem quelloffenen Outline-Set	Buttons, Menüs, Listen und Navigation in Oberflächen, dazu Material wie Slides, Posts und diese Doku
Modeler-Icons Werkzeugzeichen, ein Icon je Miragon Modeler	App-Icon, Favicon, Datei- und Tab-Icon des jeweiligen Modelers
Komet Das Zeichen von Miragon und der Plattform	App-Icon von Miragon, der Plattform und jeder Miragon-Software, die kein Modeler ist (Komet auf Blau). Empty State und Splash der Modeler, Key Visual

Im Zweifel fragst du, wofür das Zeichen steht. Für Miragon ist es der Komet, für einen Modeler als Werkzeug sein Modeler-Icon, für eine Funktion ein Lucide-Icon.

Lucide

Für Funktionsicons nutzt Miragon Lucide: ein quelloffenes Outline-Set, das im Stil zur technischen Klarheit von Geist passt. Ruhig, geometrisch, aufgeräumt. Das volle Set durchsuchst du auf lucide.dev/icons.

Stil

Outline, nicht gefüllt, gleichmäßige Strichstärke, runde Enden. Lucide bringt genau das mit. Die Icons selbst sind neutral, Grün setzt du nur sparsam als Farbe ein.

Der grüne Pfeil rechts zeigt die Farbregel für Lucide: In einer Reihe trägt höchstens ein Icon Grün, der Rest bleibt neutral. Das betrifft nur die Farbe, die Form bleibt das normale Lucide-Icon. Bei den Modeler-Icons ist der Akzent dagegen eine Fläche der Notation und nie ein Pfeil, siehe Das Prinzip.

Beispiele

Ein paar Lucide-Icons, die zu Miragon-Themen passen. Klick führt zum Icon auf lucide.dev.

workflowbotarrow-rightsearchpalettetypeimagesmartphone

Praxis

Für Funktionsicons bei Lucide bleiben und keine anderen Sets mischen. Modeler-Icons und Komet sind Zeichen und keine Funktionsicons, für sie gilt diese Regel nicht. Fehlt ein Icon, suchst du zuerst auf lucide.dev und ergänzt es sonst im selben Stil: Geometrie im 24er-Raster nach den Regeln von Lucide (Mittellinien im Bereich 2 bis 22), Strich 2,5 wie alle Lucide-Icons bei Miragon, runde Enden, currentColor. Wie das geht, beschreibt die Skill icon-design.

Mit oder ohne Hintergrund

Lucide-Icons treten in zwei Formen auf:

Solo. Direkt im Text, in Buttons, in Listen. Kein Hintergrund, das Icon nimmt die Textfarbe.

In der Feature-Kachel. Für hervorgehobene Features und Hero-Akzente: eine abgerundete Kachel mit ruhigem Hintergrund, Outline-Icon in einer Markenfarbe. Auf Verlauf und Blau ist die Kachel dezent transluzent, auf der Seite deckend. In einer Reihe die Farben abwechseln, so wie die Icon-Kacheln auf miragon.io.

Die Feature-Kachel ist eine abgerundete Fläche (etwa 64 bis 80 px, großer Radius). Ihre Fläche hängt vom Grund ab:

• Auf Blau und Verlauf, die als feste Bühnen in beiden Modi gleich bleiben: Weiß bei niedriger Deckkraft (etwa 12 %), die Icons tragen Weiß und Grün.
• Auf der Seite (Weiß, Grau, schwarze Sektion und im Dark Mode): deckend auf --cd-ui-hover (hell Blau-soft, dunkel #383838), das Icon in --cd-ui-text oder --cd-ui-icon-akzent. Weiß oder Farbe mit Deckkraft gibt es dort nicht, im Dunkeln ergäbe das einen Ton außerhalb der Stufen.

Feature-Kachel ist kein App-Icon

Die Feature-Kachel trägt ein Lucide-Icon für einen Inhalt, auf Blau und Verlauf transluzent, auf der Seite auf --cd-ui-hover. Die opake blaue Kachel mit dem Radius des Komet-Icons gehört allein den App-Icons, also dem Komet und den Modeler-Icons. Setz kein Lucide-Icon auf eine opake blaue Kachel, sonst sieht es aus wie ein weiteres App-Icon.

Strichstärke und Raster

• 24er-Raster als Basis, Strich 2,5, in dichten Leisten (Toolbars, Tabellen, Menüs) 2. Runde Enden und Ecken. Das ist kräftiger als der Lucide-Standard 2: Lucide bringt den Wert als Einstellung mit (stroke-width bzw. strokeWidth), du setzt ihn einmal zentral.
• Der Strich zählt in Einheiten des Rasters und wächst mit der Größe: bei 24 px sind es 2,5 px, bei 16 px 1,67 px, bei 28 px 2,92 px. Setz kein absoluteStrokeWidth.
• Die Modeler-Icons bleiben bei Strich 2, ihre gefüllte Akzentfläche bringt das Gewicht. Nebeneinander wirken beide so gleich schwer.
• Optische Größe wichtiger als die Pixelbox: Icons so ausrichten, dass sie gleich groß wirken.

Größen

Größe	Einsatz
16 px	inline im Text, dichte Tabellen
20 px	Buttons, Navigation
24 px	Standard, Feature-Listen

Farbe

Lucide-Icons tragen die Markenfarben Blau, Schwarz, Grün und Weiß.

• Auf hellem Grund: Blau oder Schwarz, Grün als belebender Akzent.
• Auf dunklem oder farbigem Grund: Weiß und Grün.
• Grün sparsam: In einer Reihe neutraler Icons trägt höchstens eins Grün, in einer Gruppe von Feature-Kacheln wechseln die Farben ab (auf dunklem Grund Weiß und Grün, auf hellem Blau und Grün). Nie jedes Icon grün.

Im Dark Mode

In gebauten Oberflächen nehmen Lucide-Icons die Rollen: Standard --cd-ui-text (dunkel Weiß), Hover --cd-ui-interaktion, Akzent --cd-ui-icon-akzent (hell Blau, dunkel Grün), Status --cd-ui-success bis --cd-ui-info. Mit currentColor wechseln sie mit dem Dark Mode von selbst. Blau ist auf Schwarz zu dunkel für ein Icon (3,08:1), darum wird der Akzent dunkel Grün.

Die Modeler-Icons haben eigene Fassungen für dunkle Oberflächen: Datei-Icons -dunkel, in IntelliJ _dark.svg. Komet und App-Icon bleiben, wie sie sind.

Modeler-Icons

Jeder Miragon Modeler hat ein eigenes Icon: die ruhige Outline seiner Notation plus genau eine Akzentfläche, auf der blauen Kachel mit dem Radius des Komet-Icons. Ein Modeler-Icon ist ein Werkzeugzeichen: Es macht den Modeler in Tab, Dock und Explorer erkennbar, ist aber kein eigenes Logo. Du übernimmst es unverändert aus dem Set und zeichnest keine eigenen.

Die App-Icons aller Modeler, 48 px

Das ganze Set mit allen Dateien und dem Einbau steht unter Modeler-Icons.

Komet und Icons

Der Komet ist nie ein Funktionsicon und steht nicht in Buttons, Menüs oder Listen. Lucide-Icons bleiben neutral, damit Komet und Modeler-Icons wirken. Hast du den Komet und ein farbiges Icon im selben Bild, lässt du nur eins leuchten.

Emojis

In lockeren Kontexten (ein Social-Post, eine interne Slide) ist ein einzelnes Emoji im Text okay. Als Aufzählungszeichen, Überschriften-Deko oder Icon-Ersatz nie, auch nicht im Marketing (Anti-Slop, U8). In Produkt-UI, Doku und formalen Stücken gar nicht: dort das Icon-Set verwenden, damit es konsistent und barrierearm bleibt.

Für Funktionen rund um AI gilt dasselbe wie für alles andere: das Lucide-Icon für die konkrete Funktion (Suchen, Prüfen, Erzeugen), nicht Sparkles oder Zauberstab (U4).

Stand

Drei Zeichenarten stehen: Komet für Miragon und die Plattform, Modeler-Icons für die Modeler (Set seit Oktober 2026, Kachel Blau), Lucide für Funktionen. Größen und Strichstärke von Lucide sind ein sinnvoller Standard, bei Bedarf vom Marketing anpassbar.