DEV Community

Svg/icons
Svg/icons

Posted on • Originally published at svgicons.com

Lucide vs Tabler vs Phosphor: Which Free Icon Set Fits Your UI?

#webdev #frontend #opensource #svg

Lucide, Tabler Icons, and Phosphor are three of the most recommended open-source icon libraries, and they come up together in almost every "which icon set should I use" thread. All three are permissively licensed, actively maintained upstream, and fully browsable on svgicons.com, so you can compare the actual vectors side by side before committing your project to one visual language.

The numbers and license details below are read from the catalog database that powers this site, not copied from marketing pages. Where the sets differ upstream, the comparison sticks to what ships in the indexed releases.

Quick comparison

Set Icons here License Grid Drawing model Variants
Lucide 1,778 ISC 24x24 2px stroke, currentColor One style; experimental icons live in Lucide Lab (373)
Tabler Icons 6,143 MIT 24x24 2px stroke, currentColor Outline plus 1,087 -filled icons in the same set
Phosphor 9,161 MIT 256x256 Filled paths, currentColor Six weights: Regular, Thin, Light, Bold, Fill, Duotone

Three drawing philosophies

Lucide and Tabler share a philosophy: a 24x24 grid, geometry drawn as strokes rather than filled shapes, and a default stroke width of 2. Lucide grew out of the Feather community and keeps that restrained, minimal feel. Tabler follows the same conventions but covers far more ground. Because both are stroke-based, an icon is literally a set of lines that inherit your text color:

<!-- Lucide arrow-right, exactly as stored in the catalog -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="none" stroke="currentColor" stroke-linecap="round"
    stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

Phosphor takes the opposite road. Its icons are filled paths on a 256x256 grid, so the shapes are solid geometry instead of outlined line work. The weight system replaces stroke-width tweaking: instead of making lines thicker, you switch to the Bold cut of the same icon.

<!-- Phosphor arrow-right (Regular weight), filled geometry -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24">
  <path fill="currentColor" d="m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

In practice the difference shows up at small sizes. Stroke icons stay airy and light in dense toolbars; filled icons hold their weight better on low-contrast backgrounds. If you want to see the same concept drawn all three ways, the arrow icons hub puts these sets next to each other in one grid.

Coverage and variants

Raw count favors Phosphor: 9,161 icons in this catalog. That number includes every weight, though. Each Phosphor concept exists as an unsuffixed Regular icon (1,527 of those) plus -thin, -light, -bold, -fill, and -duotone cuts, each family sitting between 1,525 and 1,529 icons. Measured in distinct concepts, Phosphor and Lucide are much closer than the totals suggest.

Tabler counts 6,143 icons in one style with 1,087 -filled alternates mixed in, so its distinct-concept coverage is the largest of the three. Lucide is the smallest at 1,778, with new and experimental shapes incubating separately in Lucide Lab (373 icons) before they graduate. If your product needs icons for niche domains, check coverage before choosing; all three set pages on this site are searchable, so a five-minute audit of your hardest twenty concepts settles it.

The duotone weight deserves a note because nothing in Lucide or Tabler matches it: each duotone icon layers a low-opacity fill behind a solid foreground, both driven by currentColor, which gives you a two-tone look from a single color value.

Licensing

None of the three will complicate a commercial project. Tabler Icons and Phosphor use the MIT license; Lucide uses ISC, which is functionally equivalent in permissiveness. No attribution is required by any of them, though the upstream projects appreciate it. The catalog stores each license with a link to the exact upstream text, shown on the set pages, so a compliance reviewer can verify the terms in one click rather than trusting a blog post, including this one.

Theming and developer experience

All three sets resolve to currentColor, so recoloring is a CSS concern rather than an asset concern. Set the text color on a parent and every icon follows, which is the pattern our currentColor theming guide walks through in React:

.toolbar-icon {
  width: 20px;
  height: 20px;
  color: var(--icon-muted);
}

.toolbar-icon:hover {
  color: var(--icon-active);
}
Enter fullscreen mode Exit fullscreen mode

One caution for the stroke-based sets: resizing a Lucide or Tabler icon does not change its 2px stroke relative to the viewBox, so a 16px render looks slightly bolder than a 32px render of the same file. Phosphor sidesteps the issue entirely because its weights are separate drawings.

On svgicons.com, every icon page for these sets gives you the optimized SVG to copy, plus React, Vue, Svelte, and Solid snippets and a PNG export. If you settle on a set and want components in bulk, paste your picks through the free SVG to component converter, and run anything hand-edited through the SVG optimizer before it lands in your repo. Signed-in users can also gather a shortlist into an Icon Collection and export it in one pass.

Which one should you pick?

Choose Lucide when you want a tight, consistent, minimal language and your icon needs are mainstream UI actions. It is the easiest set to keep visually coherent because there is exactly one style.

Choose Tabler Icons when coverage decides it. Six thousand icons in the same 24px stroke grammar means the odd concept your dashboard needs probably already exists, and the -filled alternates give you an active-state pairing for free.

Choose Phosphor when you want weight as a design tool: one icon language that can whisper at Thin and shout at Bold, plus the Duotone cut for feature highlights. It is the most flexible system of the three, at the cost of a larger decision space.

Whichever way you lean, browse the UI 24px category to see Lucide and Tabler beside their closest neighbors, and compare all three sets directly before you commit. Switching icon sets mid-project is a chore; an hour of comparison up front is cheap.

This article was originally published on SVGicons.com.

Top comments (0)