Picking an icon set takes about ten minutes and living with the choice takes years. The part that bites later is rarely how the icons look — it is the licence buried in a repo, the 24px stroke that goes soft at 16px, and the 400KB of glyphs you shipped to draw a hamburger menu. This page lists the free sets that are genuinely safe to use commercially, with the licence and grid each was drawn on, then covers the delivery decisions that follow.
MIT, ISC and Apache 2.0 all let you ship commercially, modify the paths and show no attribution in the UI, though Apache 2.0 asks you to keep the licence file in your repo. CC0 waives copyright entirely. None of them waive trademark, which is the trap with brand marks.
| Set | Licence | Grid / notes |
|---|---|---|
| Lucide | ISC | 24px grid, 2px stroke, community fork of Feather |
| Heroicons | MIT | Three optical sizes: 24 outline, 24 solid, 20 and 16 solid |
| Phosphor | MIT | Six weights, thin through fill, all on one grid |
| Tabler Icons | MIT | Well past 5,000 glyphs, 24px, outline and filled |
| Bootstrap Icons | MIT | 16px grid, pairs cleanly with Bootstrap's type scale |
| Remix Icon | Apache 2.0 | 24px, line and fill variants of nearly every glyph |
| Material Symbols | Apache 2.0 | Variable font with weight, fill, grade and optical size axes |
| Simple Icons | CC0 | Brand marks only; the trademarks are still owned by their companies |
Font Awesome splits differently: the Free icons are CC BY 4.0 and require attribution, and many glyphs people reach for by habit are Pro-only. For zero licence admin, Lucide or Tabler is the shorter path.
Icon fonts were the standard answer a decade ago and are now the worst of the three. A font is a blocking resource, so font-display: swap shows the fallback glyph — usually a tofu box or a random letter — until the font lands. Worse, the glyph lives in a Private Use Area codepoint, so a screen reader reads out garbage, and browser translation features happily "translate" the letter into something else.
Inline SVG is the default now: it styles with CSS, animates, and takes currentColor so an icon inherits whatever text colour its parent has, which makes dark mode free. The cost is HTML weight when the same icon repeats in a long list. A sprite sheet fixes that — one cached SVG file referenced by <use href="/icons.svg#trash"> — at the cost of an extra request.
A typical marketing site uses somewhere between ten and thirty icons. Tabler ships thousands. If you import the barrel file from an icon package and your bundler cannot tree-shake it, you can pull hundreds of kilobytes for a hamburger and a chevron. Import per-icon paths rather than the index, check the built bundle rather than trusting the docs, and if you are using a sprite, generate it from the list of names your templates actually reference.
Sets are drawn on a grid — 16px, 20px or 24px — with the stroke tuned for that size. Render a 24px Lucide icon at 16px and the 2px stroke becomes 1.33px, which lands between device pixels and looks soft. Heroicons solves this by shipping separate drawings per size rather than scaling one. If you mix two sets in the same interface, match stroke weight first and corner radius second; mismatched stroke is the thing people notice without being able to name it.
Decorative icons sitting beside a text label need aria-hidden="true" and focusable="false", or the icon gets announced twice. An icon-only button carries the whole meaning, so the accessible name goes on the button, not the SVG.
<button aria-label="Delete draft">
<svg width="20" height="20" aria-hidden="true" focusable="false"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">…</svg>
</button>Also give icon-only targets a hit area of at least 24 by 24 CSS pixels with padding rather than growing the glyph, and never use colour alone to carry state on an icon.