Lucide, Heroicons, Phosphor and Tabler are the most practical free icon sets for websites: all are under permissive licences (ISC or MIT), and all ship React packages that bundle only the icons you import. Tabler has the most icons, Phosphor the most weights, and Heroicons the smallest, tightest set.
| If you want | Try |
|---|---|
| A large, consistent outline set | Lucide or Tabler |
| Several weights of the same icon | Phosphor |
| A small set that matches Tailwind UI | Heroicons |
| Brand logos | Simple Icons (check trademark rules) |
| Google's look, variable weight | Material Symbols |
Updated
The same eight everyday icons drawn by six libraries, so you can compare their style directly, then a full table of thirteen libraries with licences read from each package's own LICENSE file, icon counts from the published files, and the packages to install.
| Library | Licence | Icons | Styles | React | Vue |
|---|---|---|---|---|---|
| Lucide 1.55.0 | ISC | 2,141 | Outline (stroke width adjustable) | lucide-react | lucide-vue-next |
| Heroicons 2.2.0 | MIT | 324 (each in 4 styles) | Outline 24, solid 24, mini 20, micro 16 | @heroicons/react | @heroicons/vue |
| Phosphor 2.1.1 (core) | MIT | 1,512 (each in 6 weights) | Thin, light, regular, bold, fill, duotone | @phosphor-icons/react | @phosphor-icons/vue |
| Tabler Icons 3.49.0 | MIT | 5,184 outline, 1,054 filled | Outline (stroke adjustable), filled | @tabler/icons-react | @tabler/icons-vue |
| Bootstrap Icons 1.13.2 | MIT | 2,078 files (many have a -fill twin) | Outline and fill variants | react-bootstrap-icons (community) | None official; use SVG or the icon font |
| Material Symbols 0.48.0 (@material-symbols/svg-400) | Apache 2.0 | 3,929 symbols | Outlined, rounded, sharp; fill, weight and grade axes | Use the Google Fonts font or SVG packages | Use the Google Fonts font or SVG packages |
| Remix Icon 4.9.1 | Remix Icon License v1.0 | 1,539 (line and fill) | Line, fill | @remixicon/react | @remixicon/vue |
| Font Awesome Free 7.3.1 | CC BY 4.0 (icons), SIL OFL 1.1 (fonts), MIT (code) | 2,001 solid, 273 regular, 609 brands | Solid, regular (partial), brands | @fortawesome/react-fontawesome | @fortawesome/vue-fontawesome |
| Ionicons 8.1.0 | MIT | 1,357 files | Filled, outline, sharp | Web component (ion-icon) | Web component (ion-icon) |
| Iconoir 7.12.1 | MIT | 1,383 regular, 288 solid | Regular (stroke), solid | iconoir-react | @iconoir/vue |
| Radix Icons 1.3.2 | MIT | 300+ | One style, drawn on a 15 × 15 grid | @radix-ui/react-icons | None official |
| Feather 4.29.2 | MIT | 287 | Outline | react-feather (community) | vue-feather-icons (community) |
| Simple Icons 16.35.0 | CC0 1.0 (the SVG files) | 3,466 brand logos | One-colour brand marks | @icons-pack/react-simple-icons (community) | Use SVG |
Component packages such as lucide-react or @heroicons/react are the easiest in a React or Vue project. Each icon is a component, you import only the ones you use, and props set size, colour and stroke width.
Inline SVG means pasting the svg markup straight into your HTML. It needs no package and no request, and CSS can style every part, but it repeats the markup wherever the icon appears.
An SVG sprite puts every icon in one file as symbol elements, and each use refers to one with <use href="/icons.svg#search">. The browser caches the file once, which suits sites with many icons on plain HTML pages.
Each licence in the table comes from the LICENSE file inside the package version listed, not from the package's metadata. That matters: the npm listing for Remix Icon still says Apache 2.0, while the LICENSE file in version 4.9.1 is the newer Remix Icon License v1.0. Icon counts are the number of SVG files the package ships in the folder named.
Licences can change between versions. Before you ship, open the LICENSE file in the version you install.
Yes for all thirteen libraries listed, within their licences. MIT, ISC and Apache 2.0 allow commercial use if you keep the licence notice with copies. Font Awesome Free requires attribution, which its files already contain. Remix Icon allows use in products but forbids selling the icons as a pack or using them as a logo.
Lucide started as a community fork of Feather when Feather's updates slowed. It keeps Feather's look, has far more icons and is actively maintained. Icons that came from Feather remain under Feather's MIT licence; the rest of Lucide is ISC.
Heroicons is a smaller set from the makers of Tailwind CSS, with matching solid and small sizes, which suits interfaces built with Tailwind. Lucide has several times more icons, so you are less likely to run out. Both are permissively licensed and have React packages.
SVG, in most cases. Inline SVG or a component package renders sharply, can be styled per path, only ships the icons you use, and works with screen readers. Icon fonts can load a whole font for a few icons and fail silently if the font is blocked.
Decide whether the icon carries meaning. Decorative icons next to text get aria-hidden="true". An icon that is the only content of a button or link needs a text alternative, usually aria-label on the button or visually hidden text inside it.
Related: SVG viewer and editor, SVG optimizer, Favicon generator, PNG to SVG converter, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.