600 handgezeichnete Icons: Warum Cursor ein eigenes Icon-System aufbaute

Gutes Icon-Design fällt niemandem auf, schlechtes sofort. Genau daran saß Marek Minor rund ein Jahr, als er für die KI-Programmierumgebung Cursor mehr als 600 Symbole neu zeichnete und damit die von Microsoft geerbten Codicons ersetzte.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Wichtigste in Kürze

• Über 600 Icons in zwei Größen und zwei Stilen, in rund einem Jahr von Hand in Figma gezeichnet.
• Der Satz löst die von VS Code geerbten Codicons ab und gibt Cursor ein eigenes visuelles Vokabular.
• Strichstärke fest auf 1,25 Pixel bei 16 Pixeln: Konsistenz entsteht aus Regeln, nicht aus Bauchgefühl.
• Für Entscheider zählt die Grundfrage: fertige Icon-Bibliothek nehmen oder ein eigenes System bauen.

Was steckt hinter Cursors neuem Icon-System?

Cursor ersetzte rund 480 generische VS-Code-Icons durch einen maßgeschneiderten Satz aus über 600 Symbolen, den ein einzelner Designer in etwa einem Jahr von Hand entwarf. Das Studio Minor Adventures in Amsterdam lieferte zwei Größen und zwei Stile, jede Variante einzeln in Figma gezeichnet.

Der Grund liegt im Wachstum. Cursor reicht längst über das VS-Code-Ökosystem hinaus, und fremde Symbolsätze treffen die eigenen Konzepte selten genau. Eigenes Vokabular nennt Minor das fehlende Stück. „Sets driften, sobald niemand sie besitzt“, schreibt er über den Verfall ungepflegter Icon-Bibliotheken. Wie er dabei vorging, dokumentiert ein ausführlicher Werkstattbericht.^[1]

Bauen oder fertige Bibliothek nehmen?

Freie Bibliotheken wie Lucide, Phosphor oder Heroicons liefern hunderte Icons sofort und kostenlos, ein eigenes System kostet Monate Arbeit, zahlt aber auf Wiedererkennung und Kohärenz ein. Für die meisten Produkte ist der fertige Baukasten die richtige Wahl, ähnlich wie bei den kopierbaren Komponenten von Opensource UI.

Der Eigenbau rechnet sich erst über Konsistenz im Detail. Minor hielt 155 wiederkehrende Elemente und 1.274 Schlagworte über den ganzen Satz nach und legte die Strichstärke auf 1,25 Pixel bei 16 Pixeln fest. „Icons sind eher technische Zeichnungen, Diagramme mit freundlichem Abschluss“, so der Designer. Allein die Menüschaltfläche durchlief 156 Entwürfe.

Was Produktteams daraus mitnehmen

Freie Bibliothek zuerst. Ein junges Produkt startet mit Lucide oder einem vergleichbaren Satz und steckt die gesparte Zeit ins Produkt selbst. Ein eigenes System lohnt erst, wenn eine Marke ein klar erkennbares Gesicht braucht und die Icons in großer Zahl konsistent bleiben müssen.

Bemerkenswert ist die Rolle der KI. Minor nutzte sie für Ideensuche, Prototypen und die Begleit-Website, für die Zeichnung selbst nie. Genau hier trennt sich die Handschrift vom generischen KI-Look, den immer mehr Software teilt. Für den Aufbau eines Design-Systems liefern Googles Material Design und ein schlanker DESIGN.md-Ansatz zwei Referenzpunkte.

Der Blick auf Cursor zeigt, dass Icon-Design Systemarbeit ist, keine Fleißarbeit am Rand. Prüfen Sie vor dem nächsten Redesign zuerst, ob eine gepflegte freie Bibliothek reicht, und reservieren Sie den Eigenbau für die Fälle, in denen die Marke ihn wirklich trägt.

Quelle

[1] Minor Adventures: „The Making of Cursor’s Icons“

Mehr Newshunger?

• Opensource UI: Über 150 React-Bausteine zum Kopieren, ohne Radix im Unterbau
• Looogos: Handkuratierte Logo-Inspiration statt KI-Generator
• Die KI-Ästhetik: Warum immer mehr Software gleich aussieht
• Material Design: Googles Designsystem und seine Grenzen
• DESIGN.md: Ein Markdown-File gegen den generischen KI-Look