Best icon libraries

Icons die when every feature grabs a different set. The ranking job is not “which pack has the most metaphors.” It is whether you can pick one library with a consistent stroke, a license you can ship, and an import story that does not dump 4,000 SVGs into the bundle.

This list pulls from the UI kits parent where icon sets actually live after the category merge. We prefer searchable sets with tree-shakeable or per-icon imports over PNG zips from a marketplace. Custom brand icons still matter for unique metaphors. Everything else should share a grid and a weight.

Criteria: an icon set or system, usable in product UI, listed in the Icons slice of the catalog, consistent grid, commercial license you can live with. Illustration packs that are really spot art belong on the graphic-design shelf. Emoji-as-system is a joke we do not rank.

A default we recommend: one open or clearly licensed family at 16/20/24, imported per icon, plus a tiny custom set for the three metaphors the product invented. Do not mix three families in one navbar. Do not scale by eye. Do not ignore the license on a premium pack you dropped into a client repo.

Bundle size is a ranking input because “just install the pack” is how a marketing page costs more than the product UI. If the library cannot tree-shake, subset it or pick another. If you need animated icons, that is a different filter and a different performance budget.

We keep the cheat sheet short because the decision is short. One default set. Custom only for unique metaphors. Tree-shake if you care about weight. The mistakes list is the rest of the guidance. If you came here for a 40-tool dump, use the category filter instead.

When a set goes stale — missing metaphors, dead site, license change — it leaves the ranking. When a new set ships with a real React story and a consistent optical size, it can enter. We will not add a pack because it launched on a launchpad this week.

If you are an illustrator building an icon business, this is the wrong guide. You need a drawing tool and a foundry workflow. If you are a product designer who needs a default language by Friday, pick one set from the shelf, put the name in the design system, and stop browsing.

Best for a product UI: one consistent family at a 16/20/24 grid with per-icon imports. Best for a marketing site: you can loosen the grid, not the license. Best for a unique product metaphor: draw three custom marks and keep the rest from the system. Best for bundle size: subset or tree-shake; do not install the whole pack because the docs said it was easy.

The UI kits parent is where these listings live after the category merge. Old icon-category URLs redirect there with the Icons chip. This guide exists so a “best icon libraries” query gets criteria and a best-for line, not only a filtered grid. Use the grid when you want inventory. Use this page when you want an argument.

We will not rank a pack that is mostly logos of other companies, a pack with no license, or a pack that only ships PNG. Those fail the product-UI test. If you need illustration, use the graphic-design shelf. If you need motion icons, budget the file size like you would a Lottie.

A practical week of icons looks like this. You pick one family on Monday and write the name in the design system. You import per icon or subset on Tuesday. You draw or commission the three metaphors the product invented on Wednesday. You align everything to 16/20/24 and you stop browsing packs on Thursday. Friday you check the license against client work and app-store use.

That week is the ranking. A pack with 40,000 metaphors and no tree-shake loses. A pack with no license loses. A PNG zip loses. Three families in one navbar lose even if each set is “the best” in isolation. We rank for a default language you can ship, not for a museum of styles.

The Icons filter on the UI kits parent is the inventory, including leftovers from the old icon category URL. This page is the argument. If you arrived from that redirect, stay for the criteria, then filter. If you arrived from a “best icon libraries” query, do not treat the numbered cards as a mandate to install all of them.

Illustration packs, animated icons, and emoji-as-system are other jobs. Use graphic design for spot art. Budget motion icons like Lottie. Do not replace a system with emoji and call it friendly. The product still has to look like one product on Friday.

Best for a dense admin UI: a quiet stroke set at 16px, imported per icon. Best for a consumer app: the same set at 24px, plus those three custom metaphors. Best for a marketing site: you may mix one display set in heroes, not in the nav. Write the rule down. The ranking is useless if the next hire picks a second family because it looked nicer in a tweet.