直接说结论
上周三晚十点赶交付，UI 组要 120 套 24×24 px 线性图标，我用「关键词+格式+授权」三步筛选法，在 4 个免登录站点里 17 分钟凑齐全套 SVG/PNG/WebP，全链路 CC0 可商用，零版权纠纷。
别再在搜索框里瞎输关键词
上个月帮甲方改电商详情页，直接搜「免费矢量图标」前三页全是引流页，点进去要么登录、要么水印、要么只给 64 px PNG。我把搜索词改成「line icons 24px SVG CC0」，配合站内筛选「免登录」「可商用」，首屏命中率从 12% 飙到 68%。实测关键词公式：风格+尺寸+格式+授权，漏一个都得返工。
四类站点覆盖 90% 交付场景
我把收藏夹从 27 个砍到 4 类，每类留 1 个主力备选：
1. 纯 SVG 库 —— 单色线性/填充图标 12 万+，直接复制代码或下载 24/32/48 px 三套尺寸，零登录。
2. 混合格式站 —— 同组图标同时给 SVG、PNG、WebP、PDF，批量打包下载按钮在详情页右上角，点一下得 zip。
3. 组件化图标系统 —— 自带 React/Vue/HTML 代码片段，改 stroke-width、fill 直接在预览框调，复制走人。
4. 垂直领域合集 —— 医疗、金融、物流等 30+ 细分包，每包 80~200 枚，命名规范 ic_<biz>_<action>_24.svg，拖进 Figma 即用。
实测下载全流程 6 步不踩坑
- 打开主力站，搜索框输
medical line 24px SVG - 左侧勾选「Free」「No login」「CC0」「SVG」「24px」五个标签
- 鼠标悬停缩略图，确认
viewBox="0 0 24 24"且无多余rect背景层 - 点「Download SVG」或「Copy SVG Code」，批量需求改点「Download ZIP (SVG+PNG+WebP)」
- 本地解压，用脚本跑
svgo --multipass压缩 15% 体积，重命名为ic_med_<name>_24.svg - 拖入 Figma/即时设计组件库，发布团队库，设计、开发同步可用
授权细节决定能不能商用
同一站点不同合集授权可能不一样。我遇到过某医疗包标注「CC0」，但里面 3 枚图标源自某大厂开源库，实际授权是 Apache-2.0，必须保留版权声明。养成习惯：下载页拉到底看「License」链接，看到 CC0 / Public Domain / MIT / Apache-2.0 且无「Attribution Required」字样，才敢直接商用。模糊写法「Free for commercial use」没链接的，截图存证再用。
批量重命名与清洗省 3 小时
上周整理 1200 枚图标，手改文件名得半天。我写了 12 行 Node 脚本：读取 SVG <title> 或首个 <path id>，正则提取语义词，拼成 ic_<cat>_<verb>_24.svg。跑完再用 svgo -o cleaned/ --config=svgo.config.js 统一去注释、合并路径、移除 xmlns，体积中位数从 1.2 KB 降到 0.9 KB，提交前端构建包体积减 18%。
去哪下载：这套免费素材库可以直接用
上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库，单个图标示例：image-photo，点进去就能直接下载，不需要注册或卡密。
常见问题
Q：搜不到特定业务图标怎么办？
A：用英语动词+名词组合搜，如 `parcel delivery`、`blood test`、`invoice refund`；实在没有，去组件化站点找同风格基础图标，Figma 里布尔运算拼合成新图标，5 分钟搞定一枚。
Q：下载的 SVG 在代码里显示不全？
A：检查 `viewBox` 是否为 `0 0 24 24`，有没有被 `width="0" height="0"` 隐藏；把 `<svg>` 标签里的 `fill="none"` 改成 `currentColor`，配合 CSS `color` 控制颜色。
Q：批量下载 ZIP 里混入 PNG 怎么分离？
A：解压后跑 `find . -name "*.png" -exec mv {} ../png/ ;`，或用 VS Code 文件搜索 `*.svg` 全选拖走，1 秒分完。
Q：团队协作怎么保证图标风格统一？
A：建立「图标规范单页」：线宽 2px、圆角 2px、端点圆头、24×24 网格、命名前缀 `ic_`，CI 跑脚本校验 `stroke-width` 与 `viewBox`，不合规拦截合并。
Q：遇到「Free」但要邮箱注册的站点怎么处理？
A：直接关页面换下一个。我测过 7 家要注册的站，下载后 SVG 要么带水印路径、要么 `viewBox` 非标准、要么授权页 404，沉没成本比换站高 10 倍。
Q：WebP 图标什么场景必须用？
A：H5 落地页、小程序、邮件模板里体积敏感且不需要动态改色时，WebP 比 PNG 小 35% 且无锯齿；React Native / Flutter 原生渲染仍首选 SVG。
Q：如何把图标库同步给不懂 Git 的运营同事？
A：导出 Figma Community 文件链接，运营点「Duplicate」即可拖拽使用；或把 SVG 上传到团队飞书云盘/Notion 数据库，按分类建视图，复制链接发群里。
最后说两句
下篇我会实测「如何用脚本把 2000+ 枚 SVG 自动生成 React/TSX 组件库，含 Tree-shaking 与 Storybook 文档」，你现在的图标库里有多少枚还在手动改 fill？
📚 相关专题：未分类