Icons

Miragon nutzt Lucide als Icon-Set: 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. Der grüne Komet bleibt der Akzent, die Icons selbst sind neutral.

Der grüne Pfeil rechts zeigt die Akzentregel: genau ein Icon trägt Grün, der Rest bleibt neutral.

Beispiele

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

workflowbotarrow-rightsparklespalettetypeimagesmartphone

Praxis

Innerhalb eines Projekts bei Lucide bleiben, Icons nicht mischen. Fehlt eins, im selben Stil ergänzen (24px-Raster, Strichstärke ~1.75 bis 2).

Mit oder ohne Hintergrund

Icons treten in zwei Formen auf:

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

In der Kachel. Für hervorgehobene Features und Hero-Akzente: eine abgerundete Kachel mit dezent transluzentem Hintergrund, Outline-Icon in einer Markenfarbe. In einer Reihe die Farben abwechseln, so wie die Icon-Kacheln auf miragon.io.

Die Kachel ist eine abgerundete Fläche (etwa 80 px, großer Radius) mit einem hellen Hintergrund bei niedriger Deckkraft. Auf dunklem oder farbigem Grund tragen die Icons Weiß und Grün, auf hellem Grund Blau und Grün.

Strichstärke und Raster

• 24px-Raster als Basis, Strichstärke 1.5 bis 2 px, runde Enden und Ecken.
• 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

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

• Auf hellem Grund: Blau oder Schwarz, Grün als belebender Akzent.
• Auf dunklem oder farbigem Grund: Weiß und Grün.
• In einer Reihe oder Kachel-Gruppe die Farben abwechseln statt alle gleich. Grün verteilt einsetzen, nicht jedes Icon grün.

Icon und Key Visual

Der grüne Komet ist der Akzent der Marke, kein Icon. Icons bleiben neutral, damit der Komet wirkt. Wer beides im Bild hat, lässt nur eines leuchten.

Emojis

Auf der Startseite und in lockeren Marketing-Kontexten (Social, interne Slides) sind Emojis okay. In Produkt-UI, Doku und formalen Stücken nicht: dort das Icon-Set verwenden, damit es konsistent und barrierearm bleibt.

Stand

Set steht: Lucide. Größen und Strichstärke sind ein sinnvoller Standard, bei Bedarf vom Marketing anpassbar.