BlogGuide
How to choose an icon set for a product, and switch later in one file
Grid, weights, coverage, licence and the switching cost. The five checks before an icon set goes into a design system, with the sets that pass them.
· updated Sep 7, 2026 · 3 min read · 8 products
The short answer
Pick the set by grid and weight before taste. A 24 pixel grid with at least two weights covers a product UI, and Phosphor, Heroicons, Iconoir and Remix Icon all pass that bar for free. Check coverage against your own nav, check the licence, then wrap every icon in one component so the set can change later in one file. Hugeicons and Iconly Pro are the paid picks when coverage has to be huge.
An icon set is a font you will use on every screen and change once in the life of the product. Choosing it by looking at the home page of the set is how a team ends up with three sets in one app. Five checks, in order.
What grid does the product need?
24 pixels for a product UI, 16 or 20 for dense tables and toolbars. Heroicons, Feather, Circum Icons and Remix Icon draw on 24. Radix Icons draw on 15, which is the dense case done well. The grid decides whether the icon sits on the baseline of the text next to it, and a set drawn on the wrong grid looks half a pixel off forever.
How many weights?
Two at least: a regular for the interface and a bold or filled for the selected state. Phosphor ships six weights from one family, which is the reason it is the default answer for a product with many states. Material Symbols puts weight, fill and grade in one variable font, which is the same idea with different plumbing.
Does it cover the product?
List the twenty icons the nav and the toolbar need, then search each set for them. Iconoir is large and free of sign ups, Remix Icon is neutral and wide, Hugeicons has 59,000 icons in 10 styles when the product is a platform, Iconly Pro has 40,000 across flat, animated and 3D. Iconbuddy searches 300,000 open source icons across sets, which is the fastest way to run the check.
What does the licence allow?
MIT and similar for the free sets on this list. The details, and the two sets with a catch, are in free icon sets: what the licence actually lets you do. Read it once before the set goes into the repo.
How do you switch later?
One component. Every icon in the product renders through a single Icon component that maps a name to a glyph. A switch is then one file and one afternoon. morphicons is worth a look here: it morphs any SVG icon into any other with spring physics in 7 KB, which makes the change animate instead of jump.
The hub is icons on the board, and the shelf with pros and cons per set is free icon sets that hold up in a real product.
Six weights from one family, the default for a product with many states
Thin to fill, one drawing style. The selected, disabled and hero states come from one source.
Pros
- Six weights
- Free
- Consistent across the range
Cons
- The thin weights read faint on low contrast backgrounds
The Tailwind team's set, 24 pixel, outline and solid
Two weights, crisp, and the set most Tailwind projects already carry.
Pros
- Free
- Outline and solid
- Pairs with Tailwind
Cons
- Smaller coverage than the big libraries
Large, open source, and asks for nothing
A wide library with a plain style and zero sign up. Good coverage for a product nav.
Pros
- Free
- Wide coverage
- Plain style mixes well
Cons
- One weight
Neutral system icons on 24
Neutral is the point. It sits under any brand and covers the standard set.
Pros
- Free
- Neutral style
- Line and fill
Cons
- Neutral can read as generic in a hero
Weight, fill and grade in one variable font
Google's 2,500 icons consolidated into one variable font. The range of Phosphor through different plumbing.
Pros
- Free
- Variable axes
- Huge coverage
Cons
- Reads as Android on some products
- Font plumbing is its own setup
59,000 icons in 10 styles for a platform
When the product is a platform and coverage has to be huge. Figma, React and Flutter.
Pros
- 59,000 icons
- 10 styles
- Multi platform
Cons
- Paid for the full set
- Ten styles is a temptation to mix
Search 300,000 open source icons across sets
The fastest way to run the twenty icon check before committing.
Pros
- Searches across sets
- Exports anywhere
- Free tier
Cons
- A search tool, so consistency is still your job
Morph any icon into any other in 7 KB
Makes a switch animate instead of jump. Spring physics, tiny.
Pros
- 7 KB
- Free
- Spring physics
Cons
- Works on SVG paths, so complex icons morph strangely
Questions
Can I mix two icon sets?
Yes, if they share a grid and a stroke weight, and the mix is invisible when both are drawn on 24 pixels with a 1.5 or 2 pixel stroke. Phosphor Regular next to Heroicons Outline passes. A filled set next to an outline set fails on every screen. Keep the mix to one gap the primary set has.
Which set has the most weights?
Phosphor, with six from thin to fill in one family. Material Symbols reaches the same range through a variable font with weight, fill and grade axes. Both mean a selected state, a disabled state and a hero icon come from one source, which is what keeps a product consistent.
How do I search across sets?
Iconbuddy indexes 300,000 open source icons across sets and exports them anywhere. Run the twenty icon check there before committing to one set, and you will see which set covers the product with the fewest gaps.
