Icon Libraries

Lucide is a stroke-based icon set that began as a community fork of Feather Icons and has grown to about 1,500 icons.Every icon is drawn as open lines on a 24×24 canvas with a default 2px stroke and rounded caps and joins, so a toolbar built from Lucide looks like one person drew it.The lines are real SVG strokes, which means one prop makes the whole set thinner or bolder.Fill-based libraries can’t do that.

Tabler Icons is the largest set in Icony: 4,985 outline icons and 1,001 filled icons in the React package, all on a 24×24 grid.The outline style uses the same 2px round-capped strokes as Lucide, so the two look like siblings, but Tabler goes much further into specialist territory: medical, finance, hardware, weather, maps and hundreds of brand logos.Reach for it when you’re tired of drawing the one icon your set is missing.

Phosphor Icons gives each of its 1,512 icons six weights (thin, light, regular, bold, fill and duotone), selected with a single weight prop.Unlike Lucide or Tabler, Phosphor does not use SVG strokes: every weight is a separately drawn filled outline on a 256×256 canvas.The weights end up better balanced than a stroke slider would make them, but line thickness is limited to those four line weights.

Phosphor Fill is the weight="fill" style of Phosphor Icons.The unusual part is coverage: all 1,512 Phosphor icons have a fill version, which is rare among free libraries.The fill shapes are drawn separately rather than painted inside the outline.Details such as a house’s door or a gear’s hub are cut out of the solid shape so the icon stays readable.Icony lists it as its own library so you can browse and export solid icons directly.

Heroicons is a set of 324 icons from Tailwind Labs, published in four styles: 24px outline, 24px solid, 20px solid (“mini”) and 16px solid (“micro”).This page covers the outline style, which draws every icon with a 1.5 stroke on a 24×24 canvas.That is lighter than the 2px default of Lucide and Tabler.The set is deliberately small and evenly finished, and you size its components with CSS classes rather than props.

Heroicons Solid is the filled side of the Tailwind Labs icon set.It is really three sets: 24px solid (324 icons), 20px “mini” (324) and 16px “micro” (316).Each size is drawn on its own grid rather than scaled down, so the 16px home icon is a different, simpler shape from the 24px one.Names match the outline set exactly, so switching from outline to solid for a state change is a one-line swap.

Bootstrap Icons is the icon library of the Bootstrap project: about 2,000 icons drawn on a 16×16 grid, and 670 of them have a separate -fill version.You don’t need Bootstrap CSS to use them.In React, most people use react-bootstrap-icons, a community wrapper that turns each SVG into a component; the version in this repo exposes 2,078 components.The small grid makes the icons unusually crisp at 16px and a little plain when blown up.

Radix Icons is a set of 318 icons drawn on a 15×15 grid by the team behind Radix UI.The odd grid is deliberate: the icons are meant to render at exactly 15px inside compact controls such as dropdown triggers, checkboxes and toolbar buttons.The set leans toward interface and editor concepts (alignment, borders, spacing, typography, components) and includes a few tool logos such as Figma, GitHub and Vercel.