Lucide vs Tabler vs Phosphor: Which Free Icon Set Fits Your UI?
Lucide vs Tabler vs Phosphor: Which Free Icon Set Fits Your UI?
Lucide vs Tabler vs Phosphor:哪款免费图标集最适合你的 UI?
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.
Lucide、Tabler Icons 和 Phosphor 是目前最受推荐的三款开源图标库,在几乎每一个关于“我该使用哪套图标”的讨论中,它们总是会被同时提及。这三者均采用宽松的开源协议,拥有活跃的社区维护,并且都可以在 svgicons.com 上完整浏览。因此,在将你的项目锁定为某种视觉语言之前,你可以先对比它们的实际矢量效果。
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.
以下数据和许可详情均读取自驱动本站的目录数据库,而非摘抄自营销页面。若各图标集在上游存在差异,本对比仅针对已索引版本中实际发布的内容。
| Set | Icons | 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 |
| 图标集 | 图标数 | 许可 | 网格 | 绘图模型 | 变体 |
|---|---|---|---|---|---|
| Lucide | 1,778 | ISC | 24x24 | 2px 描边, currentColor | 单一风格;实验性图标位于 Lucide Lab (373) |
| Tabler Icons | 6,143 | MIT | 24x24 | 2px 描边, currentColor | 轮廓线,另含 1,087 个填充图标 |
| Phosphor | 9,161 | MIT | 256x256 | 填充路径, currentColor | 六种字重:常规、细、轻、粗、填充、双色 |
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 和 Tabler 拥有共同的哲学:基于 24x24 网格,几何图形以描边(stroke)而非填充形状绘制,默认描边宽度为 2。Lucide 源自 Feather 社区,保持了那种克制、极简的风格。Tabler 遵循相同的规范,但覆盖范围更广。由于两者都是基于描边的,图标本质上是一组继承你文本颜色的线条。
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 则走了一条相反的路。它的图标是基于 256x256 网格的填充路径,因此形状是实心几何体而非轮廓线条。它的字重系统取代了对描边宽度的调整:你无需加粗线条,而是直接切换到同一图标的“粗体(Bold)”版本。
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.
在实际应用中,这种差异在小尺寸下尤为明显。描边图标在密集的工具栏中显得轻盈通透;而填充图标在低对比度背景下则更具视觉分量。如果你想查看同一个概念在三种风格下的表现,可以在“箭头图标中心(arrow icons hub)”将这些图标集放在同一个网格中进行对比。
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.
从原始数量上看,Phosphor 占据优势:目录中共有 9,161 个图标。但这个数字包含了所有字重。每个 Phosphor 图标概念都存在一个无后缀的常规版本(共 1,527 个),以及细、轻、粗、填充和双色版本,每个系列包含 1,525 到 1,529 个图标。如果按独立概念计算,Phosphor 和 Lucide 的差距远比总数看起来要小。
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.
Tabler 拥有 6,143 个单一风格图标,并混合了 1,087 个填充变体,因此其独立概念的覆盖范围是三者中最大的。Lucide 规模最小,为 1,778 个,新的实验性形状在 Lucide Lab(373 个图标)中独立孵化,待成熟后再发布。如果你的产品需要利基领域的图标,请在选择前检查覆盖范围;本站这三个图标集的页面均支持搜索,只需花五分钟审计一下你最难找的二十个概念,就能做出决定。
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.
值得一提的是“双色(duotone)”字重,因为 Lucide 或 Tabler 都没有与之匹配的方案:每个双色图标都在实心前景后叠加了一个低透明度的填充层,两者均由 currentColor 驱动,这让你仅用一个颜色值就能实现双色外观。
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.
这三者都不会给商业项目带来法律麻烦。Tabler Icons 和 Phosphor 使用 MIT 协议;Lucide 使用 ISC 协议,在许可宽松程度上功能等同。它们都不要求署名,尽管上游项目会对此表示感谢。本站目录存储了每个许可协议及其指向原始文本的链接,并显示在图标集页面上,因此合规审查人员只需点击一下即可验证条款,而无需盲目信任博客文章(包括本文)。
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.
这三套图标都解析为 currentColor,因此重新着色是 CSS 的范畴,而非资源文件的范畴。只需在父元素上设置文本颜色,所有图标都会随之改变,这正是我们的 currentColor 主题指南在 React 中所演示的模式。
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.
对于基于描边的图标集,有一点需要注意:调整 Lucide 或 Tabler 图标的大小时,其 2px 的描边相对于 viewBox 不会改变,因此 16px 的渲染效果看起来会比 32px 的渲染效果略粗。Phosphor 完全避开了这个问题,因为它的不同字重是独立绘制的。
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.
在 svgicons.com 上,这些图标集的每个页面都提供可复制的优化 SVG,以及 React、Vue、Svelte 和 Solid 代码片段和 PNG 导出功能。如果你选定了一套图标并需要批量组件,可以通过免费的“SVG 转组件转换器”进行处理,并在存入仓库前通过 SVG 优化器运行手动编辑过的文件。登录用户还可以将选定的图标收集到“图标集(Icon Collection)”中并一次性导出。
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.
-
选择 Lucide:当你需要一种紧凑、一致、极简的语言,且图标需求主要是主流 UI 操作时。它是最容易保持视觉连贯性的图标集,因为它只有一种风格。
-
选择 Tabler Icons:当覆盖范围是决定性因素时。六千个基于相同 24px 描边语法的图标意味着你仪表盘所需的特殊概念很可能已经存在,且填充变体为你提供了现成的激活状态配对。
-
选择 Phosphor:当你希望将“字重”作为一种设计工具时:这是一种既能以“细体”低语,又能以“粗体”呐喊的图标语言,外加用于功能高亮显示的“双色”版本。它是三者中最灵活的系统,代价是需要做出的决策更多。