Ein einzelnes Hamburger-Menü-Symbol durchlief 156 Entwürfe, bis die Form saß. Der KI-Editor Cursor ersetzte über rund ein Jahr die von Visual Studio Code geerbten Codicons durch ein eigenes Icon-System aus mehr als 600 handgezeichneten Symbolen. Der Fall zeigt, wann sich diese Handarbeit lohnt und wann Agenturen besser zu einer fertigen Bibliothek greifen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Cursor zählt zu den bekanntesten KI-Programmiereditoren und baut wie viele Werkzeuge auf dem quelloffenen Code von Visual Studio Code auf. Aus diesem Erbe stammen auch die Codicons, die Microsoft als Icon-Schriftart pflegt.[2]
Das Wichtigste in Kürze
- Cursor ersetzte die geerbten Codicons durch über 600 selbst gezeichnete Icons in zwei Größen und zwei Stilen.
- Jede Größe hat ihr eigenes Raster: 16 Pixel mit 1,25 Pixel Strichstärke, 24 Pixel mit 1,5 Pixel.
- Auslöser waren KI-Begriffe wie Agenten oder Denk-Aufwand, für die keine Standardbibliothek ein Symbol kennt.
- Für die meisten Projekte bleiben fertige Sets wie Lucide, Phosphor oder Tabler die günstigere Wahl.
Was hat Cursor da eigentlich gebaut?
Ein Jahr Handarbeit steckt hinter dem Set. Der Designer Marek Minor zeichnete mehr als 600 Symbole, jedes in zwei Größen und zwei Stilen, einmal als Umriss und einmal gefüllt. Die 16-Pixel-Variante nutzt eine Strichstärke von 1,25 Pixel, die 24-Pixel-Variante 1,5 Pixel, damit die Linien neben der Editor-Schrift ausgewogen wirken.[1]
Eine Schriftart, kein Ordner voller Grafiken: Ein Code-Editor rendert seine Symbole als Font, jedes Icon sitzt auf einem Zeichenpunkt und lässt sich wie ein Buchstabe einfärben und skalieren. Cursor liefert die Sammlung als zwei Schriftfamilien aus und ordnete beim Umstieg 645 Zeichenpunkte der alten Schrift den neuen Symbolen zu.
Warum reicht keine fertige Bibliothek?
Fehlendes Vokabular zwang zum Eigenbau. Codicons deckt die klassische Editor-Oberfläche ab, kennt aber keine Zeichen für das, was einen KI-Editor ausmacht. Für Agenten, parallele oder sequenzielle Ausführung und abgestufte Denk-Aufwände fand Minor in keiner bestehenden Bibliothek ein passendes Symbol.[1]
Ein Muster steckt dahinter. Etablierte Sets wie Lucide mit über 1.600 Icons,[3] Phosphor mit mehr als 7.700[4] oder Tabler mit rund 5.900 Zeichen[5] bedienen die allgemeine Oberfläche zuverlässig. Ein Produkt mit eigener Bildsprache muss seine besonderen Zustände dagegen selbst erfinden, wie eine Untersuchung zu Design-Systemen und KI-Agenten zeigt.
Ein eigenes Icon-System ist kein Schönheitsprojekt, sondern eine Investition in Wiedererkennbarkeit. Der Aufwand rechnet sich erst ab einer Produktgröße, ab der zugekaufte Symbole an ihre Grenzen stoßen.
— Markus Seyfferth, Chefredakteur Dr. Web
Der Aufwand im Überblick
Umfang gängiger Icon-Bibliotheken
Wann lohnt sich ein eigenes Icon-System?
Für die meisten Projekte nicht. Fertige Bibliotheken wie Lucide, Phosphor oder Tabler stehen unter der freien MIT-Lizenz, bringen Tausende Symbole mit und lassen sich per Figma-Plugin direkt ins Design ziehen. Für Agenturen, Freelancer und Inhouse-Teams decken diese Sets den Alltag vollständig ab.
Der Eigenbau rechnet sich erst bei eigener Produkt-Identität und echtem Bedarf an neuen Symbolen. Ein Icon-Set ist ohnehin nur ein Baustein: Der Unterschied zwischen einem echten Design-System und einer bloßen Komponenten-Bibliothek entscheidet über die Konsistenz, und wer modular aus kleinen Bausteinen gestaltet, hält sein Set eher zusammen.
Zwei Fragen klären die Entscheidung vor dem ersten eigenen Icon: Fehlt in Lucide, Phosphor oder Tabler wirklich ein Symbol, das Ihr Produkt braucht? Und haben Sie die Zeit, ein eigenes Set dauerhaft zu pflegen? Lautet eine Antwort nein, ist die fertige Bibliothek die ehrlichere Wahl.
Quellen
[1] Marek Minor, Minor Adventures: „The Making of Cursor’s Icons“
[2] Microsoft: vscode-codicons, die Icon-Schriftart für Visual Studio Code
[3] Lucide: Open-Source-Icon-Bibliothek (Projektangaben)
[4] Phosphor Icons: Icon-Familie (Projektangaben)
[5] Tabler Icons: Open-Source-Icon-Set (Projektangaben)
Mehr Newshunger?
- Canvas UI: WebGL-Effekte über echtem HTML, gerendert auf der Grafikkarte
- Liquid Gooey bringt den Gooey-Effekt als React-Komponente bis in Safari
- Malleable Design: Alle gestalten mit KI, kaum jemand für sie
- KI-Prototyping direkt in der App: Warum Mozilla Usability-Tests aus Figma holt
- Barrierefreiheit verschwindet bei der Übergabe
