图标库 · 海量矢量图标资源
一站式搜索与下载

SVG 格式：现代图标库的主流选择

SVG（Scalable Vector Graphics）是矢量格式，本质上是一段描述图形路径的 XML 代码。它的核心优势在于"无损缩放"——无论显示在 16px 的菜单图标位置还是 200px 的空状态插画位置，清晰度始终如一。对于需要适配 Retina 屏幕（2x、3x 分辨率）的现代项目，SVG 几乎是唯一不需要多套资源的格式。

SVG 的另一个重要特性是"可编程性"。你可以在 CSS 中直接修改 SVG 图标的 fill（填充色）、stroke（描边色）、stroke-width（描边粗细），甚至用 CSS 动画让图标产生颜色渐变或路径动效。这在 PNG 格式上完全不可能实现。SVG 文件体积通常在 1-20KB 之间（单枚简单图标），经 SVGO 压缩后可进一步减少 30%-60%。

SVG 的局限性主要体现在两点：一是复杂渐变图标在某些老旧浏览器（IE9 以下）中渲染存在兼容性问题，但这在 2026 年已基本不是现实顾虑；二是如果项目需要同时使用数百枚图标，逐个内联 SVG 会让 HTML 体积膨胀，此时需要配合 SVG Sprite 方案解决。

Icon Font：大量单色图标的高效方案

Icon Font（图标字体）把图标编码成字体文件（通常是 .woff2 或 .ttf 格式），通过 CSS 的 font-family 和 content 属性来显示图标。它的核心优势是"一次加载，全局使用"——只要字体文件加载完成，页面上所有图标都可以用纯 CSS 渲染，无需额外 HTTP 请求。对于图标数量多（通常超过 100 枚）且以单色为主的项目，Icon Font 在性能上有明显优势。

Icon Font 的主要缺点是"不支持多色图标"。字体本质上是单色的，要实现多色效果需要叠加多个伪元素，代码复杂度大幅上升，通常得不偿失。此外，Icon Font 在某些系统级屏幕阅读器中可能被读成乱码，对无障碍访问（Accessibility）不友好，需要额外添加 aria-hidden 属性处理。iconfont 阿里巴巴矢量图标库是国内最主流的 Icon Font 图标库平台，其近 30 天搜索印象量高达 164,517 次，远超其他平台，是国内开发者的首选入口。

PNG 格式：特殊场景的兼容性降级方案

PNG 是位图格式，优势在于"兼容性最广"——几乎所有环境（包括老旧邮件客户端、某些嵌入式系统界面）都能正确显示 PNG 图片。在需要兼容 IE8 或特殊渲染环境的项目中，PNG 仍然是不可替代的选择。通常建议同时提供 1x（72dpi）和 2x（144dpi）两套 PNG，文件命名规范为 icon-name.png 和 icon-name@2x.png。

PNG 的核心局限是"放大后失真"。如果设计稿中图标尺寸为 24px，但在某个场景下需要显示为 48px，PNG 会出现明显的模糊锯齿。因此，使用 PNG 格式的图标库时，务必确认你已导出足够大的尺寸（通常建议最小导出 48×48px 的 2x 版本），而不是在 CSS 中强制拉伸小图。

Lottie 格式：动效图标的专属方案

Lottie 是 Airbnb 开源的动效格式，本质上是把 After Effects 动画导出为 JSON 文件，再由 Lottie 播放器渲染。它让图标可以有复杂的帧动画效果——比如一个"加载中"的旋转动画、一个"点赞"时的跳跃动效、或者一个"成功"时的勾选动画。这类动效图标在 2026 年的移动端 App 和 Web 应用中越来越普遍，能显著提升界面的生动感和用户反馈的清晰度。

Lottie 的使用门槛相对较高：需要引入 Lottie 播放器库（约 50-150KB），且动效 JSON 文件本身体积通常在 5-50KB 之间，比静态 SVG 大得多。建议只在"需要传达状态变化或引导用户注意力"的关键交互节点使用 Lottie 图标，而非全局滥用，否则会对页面性能造成明显拖累。

授权协议是最关键的区分维度

很多人在选择图标库时只看"免费"标签，却忽略了免费背后的授权差异。常见的免费图标库授权协议主要有三类：CC0（公共领域，可自由商用、修改、再分发，无需署名）、MIT 协议（可商用、修改，通常只需保留版权声明）、以及 CC BY 系列（可商用但必须注明来源，CC BY-NC 则明确禁止商业用途）。这三类协议的商用限制差异极大，使用前务必在图标详情页逐一核查，不要只看平台首页的"免费"字样。

实际操作中，有一个常见的误区需要特别说明：部分图标库平台对"免费"的定义是"注册账号后免费下载"，但下载后的使用权限仍然受限——例如只能用于个人项目、不能用于商业发布、或者不能将图标嵌入转售的产品中。如果你的项目是对外商业发布的 App、网站或印刷品，"免费下载"并不等于"免费商用"，这是两个完全不同的概念。

资源数量与质量的差异

付费图标库在资源数量上通常有明显优势。以 Font Awesome Pro 为例，其付费版收录的图标数量约为免费版的 4-5 倍，且包含更多细分风格（如 Thin、Light、Duotone 等权重变体）。对于需要精细风格控制的品牌设计项目，付费版提供的选择空间更大。

质量层面，付费图标库通常有专业团队进行质量审核，确保图标的像素对齐、路径优化、视觉一致性。而部分免费图标库（尤其是众包模式的平台）由于来源分散，不同设计师贡献的图标风格差异较大，需要使用者自行筛选和适配。这不是说免费图标库质量差，而是说"批量使用时的风格一致性"上，付费精品图标集通常更有保障。

价格区间与性价比分析

付费图标库的价格差异较大。单套精品图标集（如专为某个设计系统定制的 500 枚图标）通常定价在 $29-$199 之间；订阅制平台（如 Streamline、Noun Project Pro）的年费通常在 $99-$299 之间，可访问平台全部图标资源；企业授权则按团队规模定价，通常从 $500 起步。对于独立开发者或小型团队，选择一套 CC0 或 MIT 授权的高质量免费图标集（如 Heroicons、Feather Icons、Phosphor Icons）往往是最优解——这些图标集虽然数量不如综合平台，但风格高度统一、质量经过社区验证，且完全免费商用。

三类典型需求的选型建议

选型决策框架：四个必问问题

第一问：这个项目是否涉及商业发布？如果是，授权协议必须明确支持商用，CC0 和 MIT 是最安全的选择，CC BY-NC 明确禁止商用，绝对不能用于商业项目。第二问：项目需要多少枚图标？如果少于 200 枚，选精品小集合（如 Heroicons）即可；如果超过 500 枚，考虑综合平台（如 iconfont 或 Iconify）。

第三问：图标需要支持多色或动效吗？单色图标用 SVG 或 Icon Font 均可；多色图标必须用 SVG；动效图标选 Lottie 格式的图标库。第四问：团队技术栈是什么？React 项目优先选有 React 组件封装的图标库（如 Heroicons、Phosphor Icons 都提供官方 React 包）；Vue 项目同理；纯 HTML 项目用 CDN 引入 Icon Font 最简单。把这四个问题回答清楚，基本上就能锁定 1-2 个候选图标库，再做最终对比即可。

方案一：内联 SVG（最灵活，推荐）

将 SVG 代码直接写入 HTML，是控制度最高的方案。优点是可以用 CSS 精确控制图标的每个路径属性，支持 CSS 动画，无额外 HTTP 请求。缺点是 HTML 体积会随图标数量增加而膨胀，且同一图标在多处使用时代码重复。适合图标数量少于 30 枚、且需要复杂交互效果的场景。

方案二：SVG Symbol 雪碧图（推荐，兼顾性能与灵活性）

将所有 SVG 图标合并到一个 SVG 文件中，每个图标用 <symbol> 标签定义，在使用处用 <use href="#icon-name"> 引用。这样一次加载即可全局复用，HTTP 请求数从 N 降至 1，且每处引用都可以独立设置颜色和尺寸。合并后的 Sprite 文件体积通常在 80-200KB 之间（含 200 枚图标，经 SVGO 压缩），是目前性能与灵活性综合最优的方案。

方案三：npm 包按需引入（现代框架项目推荐）

对于 React、Vue、Svelte 等现代框架项目，大多数主流图标库都提供了官方组件包（如 @heroicons/react、phosphor-react、@remixicon/vue）。通过 npm 安装后，可以按需引入单个图标组件，配合 Tree Shaking 机制，打包工具只会把实际用到的图标打入最终产物，避免引入整套图标集导致包体积膨胀。以 Heroicons 为例，引入 1 枚图标约增加 0.5-2KB 的打包体积，引入 50 枚约增加 30-80KB，远小于引入整套 Icon Font 字体文件（通常 100-300KB）。

方案四：CDN 引入 Icon Font（快速起步，适合小项目）

通过在 HTML <head> 中添加一行 <link> 标签引入 Icon Font 的 CSS 文件，然后在 HTML 中用约定的 class 名称显示图标。这是上手最快的方案，适合个人项目或快速原型。主要缺点是字体文件通常较大（100-300KB），且依赖外部 CDN 的可用性；对于国内项目，建议将字体文件托管到自己的服务器或国内 CDN，避免因外部 CDN 访问不稳定导致图标不显示。

为什么需要自建图标库

当团队规模超过 5 人、项目图标需求超过 300 枚、或者品牌有强烈的视觉一致性要求时，依赖第三方图标库往往会遇到瓶颈：找不到完全匹配品牌风格的图标、不同设计师使用了不同来源的图标导致风格混乱、图标版本更新后各端不同步等。这时候，自建私有图标库就成了必要的基础设施投入。

自建图标库的核心收益有三个：一是风格完全可控，每枚图标都由团队设计师按统一规范绘制；二是授权无忧，自有资产不存在第三方授权限制；三是版本可追溯，通过 Git 管理图标文件，每次变更都有记录，可以随时回滚。代价是需要投入初期的设计和工程时间，通常一个 5-10 人的团队自建一套基础图标库（约 200-500 枚）需要约 2-4 周的设计时间和 1 周的工程接入时间。

工具选型：设计端与工程端

设计端首选 Figma，原因是它的组件系统和变体功能非常适合管理图标库：每枚图标做成一个组件，通过变体（Variants）管理线性/面性/多色等风格切换，团队成员通过 Figma 的"Libraries"功能订阅图标库，设计文件实时同步最新版本。Sketch 也是可选项，但在团队协作和版本同步上不如 Figma 方便。

工程端的核心工具链通常是：SVGO（SVG 压缩优化）+ svg-sprite 或 svgstore（生成 Symbol 雪碧图）+ 自动化脚本（监听 Figma 文件变更，自动导出并压缩 SVG，生成 npm 包）。如果团队有能力，可以接入 Figma API，实现"设计师在 Figma 更新图标 → 自动触发 CI/CD → 发布新版 npm 包"的全自动流程，彻底消除设计与开发之间的图标同步摩擦。

规范制定：栅格、命名与版本管理

图标规范的核心是栅格系统。建议统一使用 24×24px 的设计画布，内容区域留 2px 内边距（即实际绘制区域为 20×20px），确保图标在视觉上有足够的"呼吸感"。线宽统一为 1.5px 或 2px（选一个，全套保持一致），圆角统一为 2px 或 4px。这些参数一旦确定，写入设计规范文档，所有设计师严格遵守。

命名规范建议采用"类别-描述-变体"的格式，例如：icon-arrow-right-outline、icon-arrow-right-fill。类别词帮助快速检索，变体后缀区分风格。工程端的文件命名与设计端保持一致，避免"设计叫购物车，代码叫 cart"这类沟通成本。版本管理遵循语义化版本号（SemVer）：新增图标为 Minor 版本升级，修改已有图标为 Patch，删除图标为 Major（因为可能破坏现有引用）。