UI libraries
Icon coverage in 2026: how many icons you actually need
12,808 icons in five families, measured on 31 October 2026. What coverage means, why duplicates matter, and how to pick one family and keep it.
Key points
- Coverage is not the total count: it is how many icons your product needs and how consistent they look together.
- Five families cover almost everything: Tabler, Remix, Bootstrap, Lucide, Heroicons.
- Pick one family, one stroke weight and one grid; mixing them is the fastest way to look unfinished.
A catalogue with 12,808 icons does not solve a product's problem. The problem is: do I have the right icon, in the same style as the rest? Coverage is measured on the set you use, not on the total available.
EneUI indexes 12,808 icons across five SVG families as of 31 October 2026: Tabler, Remix, Bootstrap Icons, Lucide and Heroicons.
The families, by style
| Family | Style | Licence | When to use it |
|---|---|---|---|
| Tabler | Outline, 24px, uniform stroke | MIT | Dense interfaces, many icons |
| Lucide | Outline, 24px, clean stroke | ISC | Modern UI, React |
| Remix | Outline and filled, 24px | Apache 2.0 | A mix of outline and filled |
| Bootstrap Icons | Outline and filled | MIT | Side by side with Bootstrap |
| Heroicons | Outline, solid, mini | MIT | Tailwind projects |
The licences are permissive, but they are still licences. Apache 2.0 requires you to keep the notice, MIT and ISC require the licence text. An icon is software.
Why duplicates matter
The same name exists in several families with different drawings. home in Tabler, Lucide and Heroicons is not the same icon: grid, stroke and proportions differ. Take one icon from each family and the set looks assembled from spare parts.
- Pick one primary family and use it for 90% of the icons.
- Allow exceptions only for brands (third-party logos), which follow their own rules.
- Set one base size and one stroke weight, then stop changing them per screen.
- Check that every icon has a stable name: aliases change between versions.
The effect on the bundle
Importing a whole package is the easiest way to pay 500 KB for icons. With a modern bundler, named imports get shaken out, but the result depends on the format the package exports.
// Pesante: trascina l'intero set
import * as icons from "lucide-react";
// Leggero: entra solo l'icona usata
import { Search } from "lucide-react";
export function SearchIcon() {
return ;
}Accessibility: the two lines nobody writes
A decorative icon next to text must be hidden from screen readers with aria-hidden. An icon that is the only content of a button needs an accessible name.
How to measure your coverage
- List the icons used in the product and compare them with the chosen family.
- Count how many exceptions you import from other families.
- If they pass 10%, the set is not coherent: pick another family or accept an explicit trade-off.
The full browser lives at /icons, with search by name and a filter by family.
Frequently asked questions
How many icons does a typical product need?
Between 60 and 150. Beyond that they are usually variants of the same idea, or decorative icons nothing depends on.
Can I mix different families?
Better not to. If you must, keep the exceptions to logos and hold size and stroke weight constant.
Which family has the simplest licence?
MIT and ISC are the most permissive. Apache 2.0 requires you to keep the licence notice.
Can filled and outline icons sit together?
Only with a rule: the active state may use filled, the inactive one outline. Without a rule the set looks inconsistent.
How do I avoid duplicate icons in a project?
One import point for icons, plus a periodic check of the names in use. Duplicates come from direct imports scattered across files.