在做界面设计与产品交付时,图标往往既要“够快找到”,又要“能安心商用”,还要方便在 Figma/Sketch/代码里复用。下面这份清单把常用的图标与 SVG 资源网站、在线编辑与组件化工具放在一起,每个条目都先给出授权/署名提示(务必以官网协议为准),再补充适用场景,方便你按项目要求快速选型。
需看协议:聚合多套图标集(每个图标集授权不同),商用前要逐一核对图标集 License 与署名要求。
适合场景:在设计稿与前端工程中统一引入多套图标;支持 SVG、JSON、组件封装(如 React/Vue/Svelte),也有在线搜索与预览。
需看协议:站内素材来源多样,单个图标可能是 CC0、MIT 或其他协议;下载前要查看每个素材的授权信息与是否要求署名。
适合场景:快速找可编辑的 SVG 图标/插画;需要二次改色、改描边、拼装图形时很方便。
工具地址:https://feathericons.com/
免费商用:开源图标集(常见为 MIT License),通常可用于商业项目并允许修改;仍建议保留项目层面的开源声明。
适合场景:轻量、线性风格统一的产品图标;可直接复制 SVG 或在代码中按需引入。
免费商用:常见为 MIT License,可商用与修改;注意与品牌/商标无关的边界(不要暗示与某品牌官方关联)。
适合场景:Web 产品常用的线性/实底两种风格;对接 Tailwind 生态时更顺手。
免费商用:开源图标集(常见为 MIT License),支持商用与二次修改;建议在仓库或产品说明中保留致谢。
适合场景:数量大、覆盖面广的线性图标;适合做“全站一致”的图标体系。
免费商用:常见为 Apache License 2.0,可商用与修改;注意遵守协议条款与 NOTICE/版权声明要求。
适合场景:图标风格更偏现代与通用 UI;提供字体/组件/SVG 多种引入方式,便于设计与开发一致。
需看协议:分 Free 与 Pro;Free 部分也有明确 License(含品牌图标的使用限制更严格),商用与分发场景要核对条款。
适合场景:需要稳定生态与大量教程支持;在旧项目中常见,迁移时可作为兼容方案。
工具地址:https://www.flaticon.com/
需署名:常见条款要求署名或订阅去署名;不同资源与订阅方案限制不同,下载前确认是否需要 Attribution。
适合场景:快速找“成套”风格的图标包;适合运营页/信息图/轻量 UI,需要注意署名与二次分发限制。
工具地址:https://thenounproject.com/
需署名:不少图标需要署名;购买/订阅可能提供免署名或更宽松的使用方式,商用前要明确你的账号计划对应的授权范围。
适合场景:概念表达强、覆盖面广;适合做功能图标探索与原型阶段快速表达。
工具地址:https://www.figma.com/community
需看协议:社区资源的授权各不相同,常见为 Creative Commons 或作者自定义许可;商用前要看资源页的 License 与署名要求。
适合场景:团队在 Figma 内直接搜索、插入与替换图标;配合组件库做“可换主题/可换尺寸”的图标系统更高效。
工具地址:https://jakearchibald.github.io/svgomg/
免费商用:开源工具(常见为 Apache/MIT 系),通常可商用;如果你把优化后的 SVG 分发到开源仓库,仍建议保留工具来源说明。
适合场景:把下载的 SVG 做体积压缩、移除无用 data、统一小数精度;适合上线前做“图标瘦身”。
免费商用:软件本身开源可商用;但你编辑的素材是否能商用取决于素材原始授权,别把“软件免费”误当成“素材免费”。
适合场景:需要精修路径、合并布尔运算、调整描边端点与对齐时;比在线编辑器更稳定,适合做规范化处理。