Iconoteka is a library of 1,300 free SVG icons for websites, apps and design systems. Every icon comes in seven separately drawn weights, from Thin to Bold, and 956 also have a filled version. You can download icons from the website, use them in Figma or install components for React, Vue and Svelte. The library is open source under the MIT licence, including for commercial projects.
Designed by Oleg Turbaba, Brand Design Director at Clay, Iconoteka brings a working identity designer's attention to proportion, rhythm and consistency into a free library. For us, that care is the most compelling reason to look closely at it.
It is worth considering as a Lucide alternative if you want named icon weights that match your typography, or outline and filled versions within one family. We migrated just over 100 icons in D1S1's admin tools from Lucide to Iconoteka. Below are the visual examples, trade-offs and naming differences we found, plus a comparison with Phosphor and Heroicons.
Oleg Turbaba: the designer behind Iconoteka
Oleg Turbaba works across brand identity, digital products and visual systems. He is Brand Design Director at Clay, and his portfolio includes art direction and identity work for Sky, CafePay and Partstack. In his Clay profile, he describes an interest in the structure behind identity: how typography, iconography, colour and motion stay coherent as a product grows.
That background gives useful context to Iconoteka. An icon rarely appears alone: it sits beside a label, repeats through a toolbar or shares a navigation bar with several other symbols. Our reason for valuing a carefully authored family is the relationship between those shapes. A bell, a folder and an arrow should feel equally at home beside the same typeface, even though their geometry is quite different.
The care is in the drawing
Iconoteka's design notes describe optical compensation, deliberate overshoots, adjustments for visual density, a 5° angle rule and a hierarchy of corner rounding. These are specific drawing decisions. In optical correction, the goal is for shapes to look balanced together; simply giving them identical measurements does not always achieve that.
The seven-weight example below makes the distinction tangible. Look at the arrow's opening and the space inside its surrounding circle as the weight increases. Separately drawn shapes give the designer control over those spaces at each step. This is why the comparison with a type family is useful: choosing a heavier cut involves decisions about the space around and within the mark, as well as the amount of black.
The project timeline traces the idea to 2016, its first public version to 2018, and a complete redraw for version two in 2026. That sustained attention is part of the appeal. Being free makes Iconoteka accessible; the years spent refining a coherent visual language make it worth considering for work where small details carry the identity.
What is included in this free icon library?
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 Lucide, you can change the weight by adjusting the SVG 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.
Iconoteka vs Lucide, Phosphor and Heroicons
All four are free, open-source icon libraries. The useful distinction is how they handle weight, filled shapes and your design workflow.
Iconoteka vs Lucide
Lucide is a good fit for outline icons with an adjustable stroke width. Its filled-icon guide explains that filling some shapes is possible, but filled icons are not officially supported as a complete set. Iconoteka offers seven drawn weights and dedicated fills for 956 icons. Choose it when matching type weights and switching between outline and fill matter; keep Lucide when adjustable strokes already meet your needs. Migration requires checking names and shapes, rather than just replacing a package import.
Iconoteka vs Phosphor
Phosphor offers Thin, Light, Regular and Bold, plus Fill and Duotone. It is worth comparing if you want several visual styles, especially duotone icons. Iconoteka provides finer weight steps, including Ultralight, Medium and Semibold. Its seven weights and two styles are separate choices; Phosphor exposes its six options through a single weight property.
Iconoteka vs Heroicons
Heroicons provides 24px outline and solid icons, with smaller 20px and 16px solid sets, plus React and Vue packages. Consider it when you want icons designed for those specific sizes. Iconoteka focuses on seven weights on a shared 24-point grid, useful when matching a broader range of typography.
Free icons for Figma, React, Vue and Svelte
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 developer page links to the packages and installation instructions. The MCP server runs offline, because the icon data ships inside the package. We used it for our own migration.
How to download free SVG icons
- Open the Iconoteka icon library and search for a symbol or browse a category.
- Choose a weight and, where available, Stroke or Fill. Preview it at the size you intend to use.
- Select Save SVG to download the vector file, or Copy SVG to copy its markup. Save PNG is available when you need a raster image.
For editable interface work, SVG keeps the icon sharp at different sizes. For a React application, the component package is another option; you do not need to download each SVG by hand.
Are Iconoteka icons free for commercial use?
Yes. Iconoteka's MIT licence allows use, modification and distribution in personal and commercial projects, including client websites and paid apps. No purchase or visible attribution in your interface is required. Keep the copyright and licence notice with copies or substantial portions of the library you distribute.
Migrating from Lucide to Iconoteka: our experience
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.
When to choose Iconoteka for your design system
Iconoteka suits studios that value a consistent authorial approach to small interface details and 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.
Before switching, check your required symbols and test them at the smallest size in your interface. Lucide remains an option for adjustable strokes, Phosphor for duotone, and Heroicons for its size-specific sets. If you need brand logos, plan a separate source: Iconoteka does not include them.
Cover: City Guide Tiles by Oleg Turbaba / Iconoteka. All images are from the official Iconoteka press kit. The application and signage examples illustrate possible uses of the library.
You can follow Oleg Turbaba’s work and request missing icons on Iconoteka’s about page.