Most icon sets give you one weight and a stroke-width slider. Iconoteka takes a different approach: every icon is drawn separately in seven weights, from Thin to Bold, and most of them also come with a filled version. It is free under the MIT licence, so you can use it in client work without paying or crediting anyone.
We moved D1S1's internal tools to it this week. This guide covers what is in the library, how its weights behave in practice, and where you will still need something else.
What the library contains
We counted these figures from the iconoteka npm package (version 2.0.15), which holds the same data as the Iconoteka website.
The icons are grouped into 23 categories. Interface is the largest with 292 icons, then Arrows (163), Hardware (130), Files & Data (86) and Text (83). There are also smaller sets that general-purpose libraries often skip, such as Wayfinding, Materials, Weather and Emotions.
Everything is drawn on a 24-point grid. The library describes its drawing as using optical compensation: shapes are adjusted to look balanced rather than to be mathematically equal. You can see it most in circles and diagonals at the heavier weights.
How the seven weights work
In libraries like Lucide or Feather, you change the weight by changing the stroke width. Iconoteka's weights are drawn separately instead. Each one is an outlined shape, so a counter or a gap can close up or open out at Bold in a way a thicker stroke cannot.
That matters when icons sit next to type. If you set UI labels in a medium-weight typeface, choose the icon weight that matches it, rather than scaling a single stroke until it looks roughly right. It works much like choosing a cut of a typeface.
There is one practical consequence for developers: because the shapes are outlined, a stroke-width property does nothing. You pick a weight by picking the file, not by setting a number.
Stroke and fill
Of the 1,300 icons, 956 have a filled version:
- 819 have a separate fill for each weight;
- 137 share one fill across all weights, because a solid shape usually looks the same whatever the stroke weight;
- 344 are stroke-only.
A common pattern is stroke for the default state and fill for the selected state, for example tabs, favourites or bookmarks. With a fill drawn for each weight, the icon's size and silhouette stay the same when it switches state.
Where you can use it
Iconoteka ships in formats for most design and build workflows:
- a Figma plugin;
- component packages for React (
iconoteka-react), Vue and Svelte; - the raw data as a single JSON package (
iconoteka); - an MCP server (
iconoteka-mcp) that lets AI coding assistants search the library and paste real icon paths instead of inventing them.
The MCP server runs offline, because the icon data ships inside the package. We used it for our own migration.
What we learned moving our tools to it
D1S1's admin tools used just over 100 Lucide icons. We mapped each one to an Iconoteka equivalent and chose the Medium weight, which looked closest to Lucide's default 2px stroke at 16px. Most icons had a direct match. A few things are worth knowing before you start:
Names follow meaning, not the other library's names. Iconoteka's check is a bank cheque; the tick is checkmark. The external-link arrow is open_in_new_window, and a sparkle is 4_pointed_star. Search by what the icon means rather than by the name you already know.
Brand logos are not included. There are no Instagram or LinkedIn marks, so keep a separate source for social logos.
A few UI conventions are missing. We found no spinning loader, no magic wand and no "image off" icon. We used close alternatives (circle_dotted for the loader, ai_generated for the wand), but if your product relies on a particular convention, check it early.
Check your arrows. The Arrows category has 163 icons, including thin, extra-thin, hooked and corner variants, so preview them against your UI before choosing.
Who it suits
Iconoteka suits studios that want icons to follow the same rules as their type. If your design system already defines several text weights, you can match icons to them one-to-one. Designers who work in Figma and hand work to developers get the same icon in both places.
If you need a very large catalogue, brand logos, or icons that can be set to any stroke width, a general-purpose library may still fit better, or you can use one alongside Iconoteka.
Iconoteka is free and maintained by a single designer, and you can request missing icons on its about page.