Iconify 图标素材库上手：276 套开源图标的取用与授权核对

Iconify 是一个把 276 套开源图标集收进同一个入口的项目：调用语法只有一套，图标数据既可以联网按需取，也可以打包进构建产物。对设计和前端协作的素材场景来说，它省掉的是「在不同站点之间复制 SVG、再回头核对授权」这道工序。

它解决什么问题：一个入口管 276 套图标

图标素材的老问题是分散。Material Design Icons 挂在 Google 的仓库里，Tabler 有自己的站点，Arcticons 又是另一个独立项目。每套的名字规则、文件结构、授权条款都不一样，换一套图标，调用代码往往要跟着重写。

Iconify 的做法是先统一数据格式，再提供统一的调用层。官方首页写的是「30 万+ 开源矢量图标」；直接请求它的 collections 接口，2026 年 11 月 4 日返回 276 个图标集、合计 473655 个图标，其中 16 套被标记为隐藏，不参与默认浏览。

接口口径比首页大，原因不难理解：表情、品牌 logo、动画图标都被算了进去。挑选时不必纠结总数，看具体套件的数量和授权更有意义。

这六套的命名风格差别很大：mdi 是实心与描边混合的 Material 体系，ph 提供六种笔画粗细，arcticons 是接近手绘的高细节风格。同一套产品里混用，视觉上很容易露怯，所以先定风格、再定套件，顺序不要反。

站在哪里挑：检索、预览与逐个比对

浏览器里的入口是 icon-sets.iconify.design。左侧栏按分类列出全部套件，顶部搜索框按关键词检索。点开任何一个图标，页面会把它在其他套件里的同义图标一并列出，对比风格时省事。想要更紧凑的搜索界面，第三方站点 Icones 读的是同一份数据。

选中图标后，页面给出几段现成代码：HTML 自定义标签、React 组件、Vue 组件、CSS 类名，以及可以直接粘进设计稿的纯 SVG。复制哪一段，取决于项目里有没有组件层。

只想拿素材、不写代码的人，可以直接下载 SVG 或 PNG，导出前改颜色、尺寸、翻转都在页面上完成。设计稿里用插件更顺手：官方提供 Figma、Sketch、Penpot 三个插件，在画布里搜图标再拖进文档即可。

批量取用时有个细节值得注意：不同套件的图标画布尺寸和留白并不统一，24、20、16 混着用会出现视觉重量差异。建议在同一页面内统一到一套的 24 网格，再按字号等比缩放。

三种取用方式：在线按需、构建期打包、设计工具内插入

• 在线按需：用 web component 写一行标签，组件去 API 取图标数据，渲染成内联 SVG。首次出现时才请求，之后缓存在本地；适合图标数量不确定、需要跟上游保持同步的站点。代价是多一次外部请求。
• 构建期打包：装 @iconify/json 或按前缀拆分的 @iconify-json/ph 这类小包，图标数据进入构建产物，运行时不再联网。Tailwind CSS 4 用户装 @iconify/tailwind4 加数据包，写类名就能用。
• 设计工具内插入：Figma、Sketch、Penpot 插件，适合先出稿、后交付的前端流程。

在线模式的最小写法是一个自定义标签，属性里写「前缀:图标名」，例如 icon 属性填 ph:house。组件支持 width、height、flip、rotate、inline 等属性，也有 loadIcon、addIcon、addAPIProvider 这类函数用于预加载和切换接口地址，细节见 API 查询文档。

构建期打包的流行度可以从下载量看出来：npm 上的 @iconify/json 当前版本 2.2.553，MIT 授权，最近一周下载约 43.4 万次。这个包体积不小，图标数据文档也提示可以只装实际要用的子包。

生态里还有一批第三方方案，官方在入门页里逐个点名：Unplugin Icons 覆盖多数构建工具，UnoCSS 把图标写进 CSS，Astro Icon 面向 Astro，Nuxt Icon 面向 Nuxt。选之前先看自己项目的构建链，别为了一个图标引入第二套插件体系。

授权怎么核对：代码 MIT，图标逐套不同

这是最容易出错的地方。官方首页写得很清楚：项目本身几乎全部使用 MIT，少数旧包是 Apache 2.0 或 GPL 2.0；但「这个授权不适用于图标」，每套图标沿用上游自己的协议。

按 11 月 4 日的接口数据统计，276 套里 MIT 有 144 套，CC BY 4.0 有 53 套，Apache 2.0 有 31 套，OFL 有 13 套，CC BY-SA 4.0 与 CC0 各 6 套，另有少量 ISC、GPL 条目。

差别很实际。CC0 与 MIT 通常只需保留版权声明，商用限制少；CC BY 系列要求标注作者与协议名称；CC BY-SA 带传染性，衍生物需要同协议发布；OFL 主要针对字体类图标，改名字再分发有额外约束。

把图标当商用素材批量取用时，建议一次只锁定一到两套，逐套打开它的协议页确认，并在项目里留一份署名清单。arcticons 这种 CC BY-SA 的套件，用在闭源产品里就要先想清楚。

会踩到的坑：按需、体积与浏览器差异

• 离线与内网：在线模式依赖 api.iconify.design。内网项目要么改成构建期打包，要么按 自托管文档起一个服务——官方 API 服务端是一段 Node.js 脚本，另有社区维护的 django-iconify 可选。
• Tailwind 的两种写法：动态类名 icon-[mdi-light--home] 只生成用到的图标；换成纯类名写法后，插件要先为每套图标生成 CSS 再裁剪，图标量大时构建会变慢、内存占用上升，官方因此要求显式列出前缀。
• SVG+CSS 渲染：把图形放进 CSS 的 d: path() 能明显压缩 HTML，但 Safari 不支持该特性，官方文档写明 Safari 26.3 仍然不行，需要保留组件回退。
• 数据新旧：@iconify/json 每几天更新一次；走 API 的站点在上游发布几分钟后就能拿到新图标。两条路径的节奏不同，别把两者混着排查问题。

还有一个隐蔽的坑是构建产物体积。整包引入 @iconify/json 而不做 tree-shaking 时，几百兆的 JSON 会拖慢 CI。用 unplugin-icons 或按前缀装小包，都能把体积压回正常区间。

适用人群、上手顺序与常见问题

图标需求零散、又要保持风格统一的团队，收益最直接：换套件只改名字，组件不用动。个人项目想省挑图时间也合适。如果只需要十来个图标，而且不想引入任何外部依赖，直接下载 SVG 放进仓库更省事。

上手顺序可以这样排：先在 icon-sets.iconify.design 按语义搜一轮，定下一套主用图标集；再按项目形态选在线组件或构建期打包；收尾时核对授权，把署名写进项目文档。

如果这次找的是插画、三维模型或音视频素材，站内还有几篇可以接着看：Poly Haven 的 CC0 三维素材、unDraw 开源插画库、Kenney.nl 的游戏美术与音效，都是同一类「先看授权、再看风格」的路子。

必须联网才能显示图标吗

不是。联网只是 web component 的默认行为。装好图标数据包，或者自建 API 服务后，可以完全离线运行。

图标能直接商用吗

看具体套件的协议。CC0、MIT、Apache 2.0 通常商用限制很少；CC BY 要署名；CC BY-SA 有传染性。项目代码的 MIT 不覆盖图标本身。

它和自己下载一套 SVG 有什么区别

自己下载是拿到静态文件，版本固定、无人替你清理。用 Iconify 拿到的是统一格式的数据，可以按需增减、跨套件混用，代价是多一层依赖和一次格式转换。