界面图标怎么选？6 套开源图标库的规格、场景与授权

图标是界面里最容易被忽略、又最容易做坏的一环。项目开始时常常是「随手下一个 PNG」，做到后期就变成三种线条粗细、四种圆角并存，导出时还糊掉。这篇只讲清楚一件事：主流开源 SVG 图标库各自适合什么场景，以及商用前怎么确认授权——文中的规格与授权信息都来自各库官网与仓库当前状态，可以直接对照核实。

先定规矩：别再用位图和字体图标

位图图标（PNG、雪碧图）的硬伤是不能换色、不能无损放大；字体图标则往往为了用几个图标而全量加载几十上百 KB 的字体文件，且难以按需裁剪。目前主流做法是 SVG 内联或组件化引入：体积可控、颜色跟随 currentColor、任意尺寸都清晰。

引入方式通常有三种，选哪种取决于项目形态：

• 直接复制 SVG 源码：heroicons.com、lucide.dev 都提供在线复制，适合小项目或原型；
• 安装 npm 包 / 框架组件：Heroicons 官方提供 React 与 Vue 包，其余主流库也都有社区或官方封装；
• 通过统一 API 按需取用：Iconify 提供跨图标集的统一命名与 CDN 调用，适合图标来源比较杂的团队。

六套值得长期用的图标库

• Heroicons（heroicons.com）：Tailwind CSS 团队出品，MIT 授权。规格最克制——24px 的 outline 与 solid 两套，外加 20px（mini）、16px（micro）两类 solid，正好对上前端常用的 size-6 / size-5 / size-4 三档尺寸。适合后台、SaaS 这类需要「干净、不抢戏」的界面。
• Lucide（lucide.dev）：由 Feather 图标演化而来，ISC 授权，官网当前标注 1853 个图标，统一的 24 网格、描边宽度可调。风格轻盈，前端生态支持最全，做中后台和开发者产品几乎可以闭眼选。
• Phosphor（phosphoricons.com）：MIT 授权。它最有价值的特点是同一套图标提供多个字重（thin / light / regular / bold / fill / duotone）。需要区分默认态与选中态时，换一个字重就够了，不必引入第二套库。
• Tabler Icons（tabler.io/icons）：MIT 授权，官网当前标注 6184 个图标，覆盖面在以上几套之上。因为它是围绕后台模板生长的，商务、财务、系统类的「冷门概念」图标特别全（发票、钱包、各类图表符号等）。
• Remix Icon（remixicon.com）：国内设计师最熟的一套之一，line 与 fill 成对命名，中文场景适配度高。但要注意它的授权已在 2026 年 1 月更换为自有的 Remix Icon License v1.0：依旧免费商用、不强制署名，但明确禁止把图标本身做成图标包单独售卖。
• Material Symbols（fonts.google.com/icons）：Google 的系统级图标，Apache 2.0，变量字体支持字重、填充、光学尺寸等多个轴，适合 Android 与 Material 体系。若项目本身不是 Material 风格，混用会显得「味道不对」。

技巧：数量以官网为准
各库的图标总数持续增长，选型时以官网当前标注为准，本文数字仅作量级参考，不必当作硬指标。

找不到合意图标时：三个检索入口

• Iconify（iconify.design）：把大量开源图标集聚合成一个检索入口。按它的官方数据，当前收录 237 套图标集、37 万余个图标，一个搜索框就能横向比对不同风格。可以用统一命名（形如 mdi:home）在组件里直接调用，也能只导出需要的那几个 SVG。
• iconfont（iconfont.cn，阿里巴巴矢量图标库）：国内最大的图标社区，很多团队会自建项目图标库、导出字体包或 SVG。注意平台上的图标由不同作者上传，每个图标集的授权各不相同，商用前务必看清具体说明。
• Simple Icons（simpleicons.org）：专收品牌 LOGO（社交平台、开发工具、支付渠道等），图标文件采用 CC0 1.0。但品牌标识本身是各家公司的商标——用于「表示某个平台」通常没问题，用于暗示合作或背书就要格外谨慎。

授权核对清单：五分钟，省一场事故

1. 读 LICENSE 文件，不要凭印象。Remix Icon 就是最好的例子：授权会变，早年的宽松许可不等于今天依然宽松。
2. 分清「图标许可」与「品牌商标」：技术授权允许你使用这张图，不代表画面里的商标可以随便用。
3. 确认是否要求署名：Heroicons、Lucide、Phosphor、Tabler、Material Symbols 均属宽松许可，通常无需署名；采用自定义许可的库则要逐条读清。
4. 别把图标本身做成商品：几乎所有图标库都禁止把图标打包成图标包售卖，做「图标市场」类产品时要特别当心。

技巧：交付前再核对一次
授权条款随时可能更新，项目定版前建议花两分钟回到各库官网的 License 页面确认最新版本，并以官方说明为准。

落地流程：一个项目最多两套库

界面「说不上哪里不对」的常见原因就是混用图标库——2px 描边和 1.5px 描边放在一起，视觉上就是歪的。建议一个项目最多保留两套库：一套描边风格承担功能图标，一套填充风格承担状态图标，并固定统一的网格与描边宽度。

工程侧还可以顺手做两步：导出的 SVG 先过一遍压缩工具 SVGOMG（本站「在线工具」分类也收录了它），再去掉无用的 fill、stroke 属性；图标站点入口则集中在导航站的「图标素材」分类，从那里进可以省掉记网址的负担。如果你还在处理字体授权问题，可以接着看 免费商用字体清单；素材选型的方法论，免费商用图库怎么选 里的思路同样适用。