凌晨一点半，我为了给一个后台管理页找 6 个线性图标，翻了 23 个站点，下了 4 个压缩包，解压出来全是带水印的预览图。踩过的坑是：很多站写着免费，点下载才弹出登录框，登录完又提示要署名。那晚我干脆把收藏夹清了一遍，只留 4 类真正能用的。
直接说结论
网页设计找免费图标，优先用 CC0 或免登录直接下载的库，认准 PNG、SVG、WebP 三种格式，选可商用授权，单套图标通常 100~3000 个，改色改线宽都方便。
先搞清楚授权，别等上线才慌
免费图标分三种授权：CC0、MIT 这类几乎不限制的，要求署名的 CC BY，以及只许个人用的。我试下来，网页项目最省心的是 CC0，不用署名、可商用、能改。判断方法很简单，看下载按钮旁边那行小字，出现「attribution」就要小心。一套图标 200 个，如果每个都要署名，页脚能写满一屏。企业项目建议直接筛「可商用」标签，别赌。
免登录和要登录，效率差好几倍
我做过对比：免登录站点从搜索到拿到 SVG 平均 20 秒；要注册的，填邮箱、收验证码、点确认，至少 2 分钟。批量做 30 个图标，差距就是 10 分钟和 1 小时。免登录不代表质量差，很多开源图标库本身就是免登录直下。踩过的坑是：有些站免登录只给 PNG，SVG 要登录，做响应式设计时会很被动，因为 PNG 放大会糊。
三种格式怎么选，别只下一种
PNG 适合固定尺寸的位图场景，比如 24×24、48×48 的按钮图标，带透明通道。SVG 是矢量，任意缩放不糊，适合导航、菜单、空状态插画，还能用 CSS 改颜色和描边。WebP 体积小，同样一张 128×128 图标，WebP 常比 PNG 小 30%~50%，适合图标多、又不想用字体的页面。我的习惯是：主图标留 SVG，导出两套位图，PNG 兜底，WebP 优先。
图标风格统一，比数量重要
一个页面混用填充、线性、双色三种风格，再好看的图标也显乱。我删掉 23 个站点后留下的 4 类，是按风格分的：线性、填充、双色、手绘。同一套里，线宽一般统一在 1.5px 或 2px，圆角一致。找的时候先定风格，再挑数量，一套 300 个统一风格，胜过三套各 100 个拼在一起。数量上，常见库单套在 100~3000 个之间，够中小项目用。
操作步骤
- 先定风格和尺寸：确定线性还是填充，主尺寸 24×24 还是 32×32。
- 筛授权：勾选 CC0 或可商用，排除需要署名的。
- 优先免登录站点，直接搜关键词，比如「arrow」「user」「settings」。
- 下载 SVG 为主，需要位图时再导出 PNG 和 WebP 两套。
- 本地按风格建文件夹，命名统一，比如 icon-line-24。
- 上线前抽查 3~5 个图标，确认颜色、线宽、圆角一致。
去哪下载：这套免费素材库可以直接用
上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库，单个图标示例：heart-like，点进去就能直接下载，不需要注册或卡密。
常见问题
Q：免费图标真的可以商用吗？
A：看授权。CC0 和 MIT 基本可商用、可修改、不用署名。CC BY 要署名。只写「free for personal use」的不能商用。下载前花 10 秒看授权说明，比上线后被投诉划算。
Q：免登录下载的图标质量会不会差？
A：不一定。很多开源图标库本身免登录，SVG 源文件规范，线宽统一。我试下来，免登录站点里不少单套超过 1000 个图标，质量稳定。要登录的反而常夹带推广。
Q：SVG 和 PNG 到底下哪个？
A：两个都下。SVG 用于网页里的矢量场景，能改色缩放。PNG 用于固定尺寸位图，比如邮件模板、部分旧系统。预算够再补 WebP，体积更小。
Q：图标颜色能改吗？
A：SVG 可以，用编辑器或代码改 fill 和 stroke。PNG 改色会损失边缘，透明区域容易出锯齿。所以优先拿 SVG 源文件，改完再导出位图。
Q：一套图标多少个才够用？
A：中小项目 100~300 个够覆盖导航、操作、状态。后台系统建议 500 个以上。别贪多，风格统一比数量重要，混用反而乱。
Q：下载后要整理吗？
A：要。按风格和尺寸建文件夹，命名统一。我一开始全堆在下载目录，找的时候又翻一遍，等于白下。整理一次，后面省很多时间。
Q：WebP 图标兼容性怎么样？
A：主流浏览器都支持。老系统或部分邮件客户端可能不认，所以要留 PNG 兜底。做 WebP 时保持透明通道，尺寸和 PNG 一致，替换时不用改布局。
最后说两句
你现在的项目里，图标是统一一套，还是几个站点拼出来的？下篇我会讲怎么用同一套 SVG 批量导出 PNG 和 WebP，顺手把体积压到一半，感兴趣可以回来看看。
📚 相关专题：未分类