The Making of Cursor's Icons – Minor Adventures<br>Jul 30, 2026·16 min read<br>The making of Cursor's icons<br>A year of drawing, testing, and shipping a complete icon system for the world's favourite coding agent.
Earlier this year, Cursor quietly rolled out its new icon set. I designed it, and so I wanted to share the story of how it was made: partly so you can see how much care goes into a thing like this, and partly for newcomers to design who want to learn how it gets done.<br>The work took about a year and covers 600+ icons in two sizes and two styles, every single exploration and every final icon variant drawn by hand.
Cursor's new icon system
Growing out of the old set<br>Last year, Cursor was growing out of the VS Code ecosystem that it was built on, and its icons came along for the ride. The inherited set was Codicons , the open-source icons VS Code uses, plus custom additions that had accumulated over time in slightly different styles. Codicons were drawn for a different product, in a different era, and the set had drifted since then. When I counted it I got 468 icons; the documentation said 498, and some codepoints led nowhere. None of this is unusual for an inherited set. Sets drift when nobody owns them.
Being built on the VS Code ecosystem meant inheriting its icon set, Codicons
The bigger issue was coverage of concepts . Some of the concepts Cursor kept introducing don't exist in any icon library. Others exist, but never all in the same one: AI agents, parallel and sequential execution, single and parallel threads, different levels of thinking effort, cost and compute, Bugbot and many others. A generic set can stretch for a while, but at some point a product needs its own vocabulary.<br>So the brief, in practice, was to:<br>redraw everything as one system,<br>cover the concepts only Cursor has,<br>and deliver the result as an icon font that could replace the old one without breaking a single reference.<br>That last requirement shaped more of the project than it sounds, and I'll come back to it later.
Two sizes, two styles<br>The sizes<br>The new icons come in two sizes, each on its own grid:<br>16px is the main size, mostly used at 16px, but can be scaled all the way to 12px while preserving legibility. Stroke weight is 1.25px.<br>24px is the slightly larger version, with a slightly thicker stroke (1.5px) width and a bit more detail whenever the extra space allows.
Two sizes, with more detail and a thicker stroke at 24px
The reason for two sizes is that a single icon can only stretch so far. The 16px icons are drawn on a 16px grid with a 1.25px stroke, and they hold up from about 12px to 20px. Beyond that, everything scales together: at 32px that 1.25px stroke becomes 2.5px, which is far heavier than anything you'd draw at that size. And the small icons have been simplified for their size, so the extra room stays empty instead of carrying the detail it could.<br>So from 22px up, the 24px version takes over, drawn on its own grid, with a 1.5px stroke and more detail wherever there's space for it. This is a similar idea to optical sizes in type, where a typeface has separate cuts for Text and Display rather than one drawing scaled up and down.
Finding 1.25px<br>The 1.25px stroke took a while to find. At 1px the icons felt too thin next to text. It's hard to say exactly why – they just didn't hold their own. At 1.5px they felt too heavy. At 1.25px a 16px icon sits beside 16px Cursor Gothic, their custom typeface, and looks just right. You follow your eye on decisions like this. At some point the number is a record of a decision the eye already made.
1px? Too thin. 1.5px? Too thick. 1.25px? Just right.
A 1.25px stroke also means the icons don't snap to the pixel grid, which goes against the standard advice. Why? Well, these icons render at 12px, 14px, 16px and even 20px, so there is no single grid to snap to, and on modern displays a 1.25px stroke stays crisp anyway. Snapping would mean designing for every single absolute size they're displayed at. That's why I treated them as symbols, closer to small logos or characters in a typeface than to fixed-size bitmaps.
The styles<br>Icons come in two styles:<br>Outline icons are built from strokes.<br>Filled icons are built from solid shapes with the interior details knocked out, cut directly from the fill.<br>Not every icon has a filled version, only the ones the product needs, which is normal for a set of this size.
Icons in Outline and Filled style
The optical shapes<br>Underneath both sizes sits a system of optical shapes: Square , Circle , Horizontal , and Vertical . Each one is sized so that icons built on different shapes still read as the same size – for instance a circle has to be drawn slightly larger than a square to look equally big. Most icons fit one of the four, but not all. Diagonal shapes in particular sit awkwardly in all of them, and then I pick the closest one, usually the circle, and adjust by eye.
Optical shapes for both sizes
Selected icons grouped by their optical shape
The...