Iconify 不是单一画风的图标库,而是一套统一图标数据与渲染生态。官方文档当前介绍 200+ 开源图标集、30 万+ 图标,并提供在线检索、API、组件、设计工具插件和 JSON 数据包。它解决跨图标集的命名与接入问题,但不会自动让不同画风变得一致。
前缀决定图标来自哪里
Iconify 名称通常由图标集前缀与图标名组成,例如 mdi:alert。前缀既关系到视觉风格,也关系到原作者和许可证。产品应限制允许的集合,建立固定映射;任由编辑人员跨数百个集合挑选,最终会出现线宽、圆角和尺寸混乱。
运行时 API 与构建时数据二选一
| 需求 | 合适方案 |
|---|---|
| 图标名称运行时才知道 | Iconify API 与按需组件 |
| 图标集合固定、强调可控部署 | 构建时打包本地数据 |
| 需要全部数据处理 | @iconify/json |
| 只用一个图标集 | @iconify-json/{prefix} |
| 只查询集合目录 | @iconify/collections |
API 便利伴随运行依赖
官方组件可在需要时向 API 请求图标数据并渲染 SVG,适合无法预知图标名的内容系统。高可靠或隐私敏感项目应评估外部请求、缓存、CSP、离线环境和服务故障;也可部署自己的 API 或将允许图标在构建阶段冻结。
本地打包控制体积和版本
不要把完整 @iconify/json 直接送到浏览器。构建脚本应只提取实际使用的图标,或选用单集合包。记录 prefix、图标名和数据版本,升级后做视觉回归;上游图标可能改路径、别名或名称,CMS 中保存的旧引用也要有迁移方案。
组件只是渲染层
Iconify 为 Web Components 及多种前端框架提供接入方式,最终通常渲染为 SVG。项目仍需封装尺寸、颜色、对齐、加载占位和可访问名称。仅图标按钮不能因为用了组件就自动可访问,装饰图标也应正确隐藏。
设计团队同样要收敛集合
- 按产品角色建立允许清单;
- 统一默认画布、描边和视觉重量;
- 品牌图标单独管理;
- 设计稿保存 prefix 与名称,避免只留路径;
- 开发与设计使用同一版本快照。
许可证按图标集核对
Iconify 整理的是多个开源集合,不能用“Iconify 免费”概括全部权利。集合页面和数据元信息会标出 MIT、Apache、CC BY、OFL 等不同许可,署名、再分发和衍生要求可能不同;品牌 Logo 还涉及商标。上线时保存所用集合、版本、许可证与署名清单。
数据统计
相关导航
Tailwind CSS 团队制作的 MIT SVG 图标库,提供多尺寸实心/描边样式及 React、Vue 包
Yesicon
中文友好的开源矢量图标搜索与聚合平台,汇集约 29 万枚图标并展示各图标集作者和许可证
Flaticon
大型图标与贴纸素材平台,提供 PNG、SVG、EPS 等格式及免费与付费授权方案,使用前需核对署名和订阅条件
Lucide
社区维护的轻量一致 SVG 图标库,支持按需导入并可调整颜色、尺寸和描边宽度
Radix Icons
为界面控件设计的 15×15 极简图标集,可复制 SVG 或通过 @radix-ui/react-icons 作为 React 组件使用
Remix Icon
中性风格开源图标系统,提供 3200+ 图标、线框与填充版本,以及 SVG、PNG、字体和框架包

Iconfont
阿里巴巴矢量图标库与项目符号管理平台
Mingcute Icon
精心设计的开源图标库,3324+ 图标,双风格,SVG 矢量,Figma 插件与多框架支持。
暂无评论...