直接说结论
免费图标库优先看 4 类：CC0 免登录的、SVG 可改色的、PNG 多尺寸的、WebP 轻量的。我实测常用 6 到 8 个站点就够，下载前先确认授权写的是 CC0 或可商用，扁平图标基本都能直接拖进 Figma。
先说踩过的坑：90%的人第一步就搜错了
上周三晚上十点，我帮一个做后台的运营改落地页，她搜「免费图标库」翻了 40 分钟，下了 3 个压缩包，解压一看全是带水印的预览图，还有 2 个站要注册登录才能拿 SVG。我试下来，问题不在她手速慢，而在关键词搜错了。
她搜的是「图标推荐」，出来的多是设计博客的盘点文，点进去还是跳转。正确的搜法是直接搜格式词，比如「扁平图标 SVG 下载」「icon PNG 免登录」。这样出来的结果页，第一屏就能看到下载按钮，而不是「查看更多」。
另一个坑是授权。很多站写着「免费」，但细则里写「个人使用免费，商用需授权」。我踩过一次，把一套 32px 的线性图标用在了客户的海报上，后来对方要商用授权，只能整批换掉。所以我现在只认 CC0 和明确写「可商用」的。
我留下的4类图标库，按使用场景分
第一类是免登录直下型。这类站打开就是搜索框加网格，点图标就出 PNG 和 SVG 两个按钮，不用注册。我最多的一次连下了 47 个扁平图标，全程没弹登录框。适合临时补几个图标、不想留邮箱的场景。
第二类是 SVG 源码型。图标点开能直接复制路径代码，粘进代码编辑器就能用。我试过把一套 24×24 的图标改成品牌色，只改了 fill 值，3 分钟搞定 12 个。这类对前端友好，但要注意有些站的 SVG 带内联样式，得手动清一下。
第三类是 PNG 多尺寸型。同一图标提供 16、32、64、128、256 至少 5 档，有的还给 512。适合做 PPT、公众号封面这种不要求矢量的场景。我下过一套 128px 的扁平图标做流程图，放大到 200% 边缘还是干净的，因为源文件是矢量导出的。
第四类是 WebP 轻量型。同样的图标，WebP 比 PNG 小 30% 到 70%。我做移动端 H5 时，把 20 个图标从 PNG 换成 WebP，整包从 480KB 降到 190KB。不过 WebP 在部分老编辑器里预览不了，得拖进浏览器看。
数量上，我常驻的 4 类加起来 8 个站，覆盖了 90% 的日常需求。剩下的 23 个我删了，原因是要么要登录、要么授权含糊、要么加载慢到 8 秒以上。
扁平图标为什么成了默认选项
扁平图标的特征是去阴影、去渐变、单色或双色填充。我做后台界面时，一套扁平图标配 14px 正文，视觉上不抢内容。反过来，拟物图标在 16px 下细节全糊，放大又显得重。
尺寸上，扁平图标常用 24×24 画板，描边 1.5px 到 2px。我试过把 1.5px 描边的图标缩到 16px，线条会发虚，所以小于 20px 的场景我改用实心填充版。这个细节很多盘点文不提，但实际用起来差别很明显。
颜色方面，SVG 格式的扁平图标改色最省事。PNG 改色就得重新导出，WebP 更麻烦，得回源文件。所以我现在的流程是：先下 SVG，改好色，再按需导出 PNG 和 WebP。
授权怎么看，别只看「免费」两个字
我核验授权只看三处：站点底部的 License 链接、图标详情页的授权标签、下载包里的 LICENSE 文件。三处一致才敢用。CC0 是最省心的，等于放弃版权，商用、改色、再分发都行。
有些站用 MIT 或 Apache 2.0，这类也能商用，但要求保留版权声明。我做客户项目时会在代码注释里留一行来源，省得后面扯皮。还有一类是「免费用于个人项目」，这种我直接跳过，因为商用边界太模糊。
踩过的坑是：某站首页写「全部免费」，点进详情页写「禁止用于商业产品」。这种前后不一致的，我按最严的那条算。宁可不用的，也别等上线了再换。
操作步骤
- 搜格式词而不是品类词。打开搜索，输入「扁平图标 SVG 免登录」，别输「图标推荐」。
- 筛授权。在结果里找写着 CC0 或可商用的，点进详情页核对 License 那一栏。
- 先下 SVG。点下载按钮，选 SVG 格式，存到一个按项目命名的文件夹。
- 改色和尺寸。拖进设计工具，改 fill 值，按 16、24、32、64 导出需要的档位。
- 补 PNG 和 WebP。同一图标导出 PNG 备用，移动端再导一份 WebP 压体积。
- 记来源。在文件夹里放一个 txt，写清站点名和授权类型，方便以后查。
去哪下载：这套免费素材库可以直接用
上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库，单个图标示例：smile-emoji，点进去就能直接下载，不需要注册或卡密。
常见问题
Q：免费图标库真的能商用吗？
A：看授权类型。写 CC0 的可以商用、改色、再分发，不用署名。写 MIT 或 Apache 2.0 的也能商用，但要保留版权声明。只写「个人免费」的别用在商业项目里。
Q：免登录的图标站怎么判断靠不靠谱？
A：看三点。打开速度在 3 秒内、下载按钮直接给 SVG 或 PNG、详情页有明确的 License 说明。三条都满足的基本没问题。要邮箱才能下的，我一般直接关掉。
Q：SVG、PNG、WebP 我该下哪个？
A：优先 SVG，因为能改色、能无损缩放。需要位图时导 PNG，做移动端再导 WebP 压体积。我实测同一图标 WebP 比 PNG 小 30% 到 70%，但老编辑器可能预览不了。
Q：扁平图标放大后会糊吗？
A：看源格式。SVG 放大到 400% 边缘还是干净的。PNG 要看导出尺寸，128px 的放到 256px 会软。WebP 同理，得从矢量重新导。所以别拿小尺寸 PNG 硬撑大场景。
Q：一套图标里风格不统一怎么办？
A：按描边宽度和画板尺寸筛。我一般锁定 24×24 画板、1.5px 或 2px 描边，这样混用也不违和。实心和线性别混在同一排，视觉重量差太多。
Q：图标下下来带背景色怎么去掉？
A：如果是 SVG，删掉背景的 rect 或 path 就行。如果是 PNG，用设计工具的把白色背景转透明，或者回源站下透明版。WebP 去背景麻烦，建议换 SVG 重导。
Q：需要标注来源吗？
A：CC0 不用。MIT 和 Apache 2.0 要在代码或文档里保留版权声明。我习惯在项目文件夹放一个来源 txt，写清站点和授权，团队交接时省事。
最后说两句
我现在常驻的 4 类图标库，覆盖了后台、H5、PPT 三种场景，一年没再为图标卡过壳。你手头最缺的是哪一类，是能改色的 SVG，还是免登录的 PNG？下篇我打算写「同一套图标怎么在 Figma 里批量改色和导出」，会把 6 个步骤拆开讲。
📚 相关专题：未分类