直接说结论
网页设计找免费图标，优先选 CC0 或免登录、可商用授权的库，格式认准 SVG、PNG、WebP 三种。我实测保留 4 类来源就够用：通用 UI 库、品牌图标库、插画风图标库、自建 SVG 雪碧图。单次下载控制在 20 个以内，命名统一，后期改色不返工。
上周三晚上十点，我帮一个做 SaaS 落地页的朋友改稿，卡在图标上整整两小时。他先从收藏夹里翻出 23 个图标站，挨个点进去，8 个要注册，5 个下载按钮是假的，还有 3 个下下来是带水印的 PNG。最坑的是其中一个标着”免费商用”，点开授权页才发现要署名，而落地页根本没地方放署名。那晚我把这 23 个站重新筛了一遍，最后只留下 4 类。下面是完整的筛选逻辑和操作步骤。
先看授权，别看图标好不好看
我试下来，90% 的人第一步就搜错了。打开一个图标站，第一反应是搜”dashboard””arrow”，而不是先翻到页脚找 License 或 Terms。结果就是图挑好了，才发现不能商用。
判断标准很简单：CC0 最省心，等于放弃全部权利，商用、改色、二次分发都不用署名。MIT 和 Apache 也行，但要求保留版权声明，用在网页里通常得在页脚加一行。CC BY 必须署名，CC BY-NC 直接排除，因为不能商用。
踩过的坑是：有些站首页大字写”Free”，点进详情页才看到”for personal use only”。所以我的习惯是先看授权标签，再看图标。授权不清的直接跳过，不浪费那 30 秒。
三种格式怎么选，别只下 PNG
PNG、SVG、WebP 这三种格式，用途完全不同，别只下一种。
SVG 是矢量格式，放大不糊，能用 CSS 直接改 fill 颜色，做图标按钮、导航栏首选。我一般只下 SVG，文件通常 1~3 KB，比 PNG 小很多。缺点是老版本 IE 不认，但现在基本可以不管。
PNG 适合需要固定像素的场景，比如 favicon、邮件模板里的图标。建议下 2 倍图，比如显示 24×24 就下 48×48， retina 屏才不虚。
WebP 体积比 PNG 小 25%~35%，适合图标数量多、又不想用 SVG 的页面。但要注意兼容性，得准备 PNG 兜底。我试下来，图标总数超过 30 个的页面，换成 WebP 后首屏能快 200ms 左右。
免登录直接下的，才是真省时间
很多站要求注册才能下载，注册又要邮箱验证，一来一回五分钟没了。我现在的标准是：免登录能直接下的，优先级最高。
免登录的站通常有两种下载方式：直接点下载按钮，或者右键复制 SVG 代码。后者更爽，复制完直接粘进代码编辑器，连文件都不用存。
我统计过，一个中等复杂度的页面大概用 15~25 个图标。如果每个都要登录，光下载就耗掉半小时。免登录的站，同样的量 5 分钟搞定。所以选站的时候，先试下载一个，要登录就关掉换下一个。
品牌图标单独找，别混在通用库里
社交媒体、支付方式、开发工具这些品牌图标，通用 UI 库里往往没有，或者版本很旧。比如某支付品牌的 logo 改版了，通用库里还是三年前的。
品牌图标有专门的库，特点是按品牌分类、更新勤、提供官方配色。下载时注意两点：一是选 SVG，方便调大小；二是看清楚品牌方的使用规范，有些品牌不允许改颜色或加边框。
我踩过的坑是：从一个通用库里下了个社交图标，颜色是错的，放到页面上跟品牌方官网对不上，被客户打回来重做。后来养成习惯，品牌图标一律去专门库下，通用库只管 UI 元素。
操作步骤
- 打开图标站，先翻到页脚或详情页，确认授权是 CC0 或明确标注可商用。授权不清的直接跳过。
- 搜索关键词用英文，比如 “arrow” “user” “settings”，比中文搜出来的结果多 3~5 倍。
- 优先下载 SVG 格式，需要 PNG 时下 2 倍图，图标多的页面补一份 WebP。
- 下载后统一重命名，比如 icon-arrow-left.svg，按功能分类放文件夹，别用默认的 download(1).svg。
- 在代码里用 SVG 雪碧图或 symbol 引用，减少 HTTP 请求，改色只改一处 CSS 变量。
- 上线前抽查 3 个图标，确认颜色、尺寸、授权署名（如果需要）都没问题。
去哪下载：这套免费素材库可以直接用
上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库，单个图标示例：link-chain，点进去就能直接下载，不需要注册或卡密。
常见问题
Q：CC0 和免登录是一回事吗？
A：不是。CC0 说的是授权，免登录说的是下载方式。一个站可能免登录但要求署名，也可能要登录但授权是 CC0。两个条件分开看，都满足才最省心。
Q：免费图标真的可以商用吗？
A：看授权。CC0、MIT、Apache 通常可以商用，CC BY 要署名，CC BY-NC 不能商用。下载前花 10 秒确认授权标签，比事后返工划算。
Q：SVG、PNG、WebP 我该下哪个？
A：优先 SVG，矢量可改色，文件还小。需要固定像素时下 PNG 2 倍图。图标数量多、在意加载速度时补一份 WebP，记得留 PNG 兜底。
Q：图标下载后颜色不对怎么办？
A：如果是 SVG，直接用文本编辑器打开，把 fill 属性的色值改成你要的，或者在 CSS 里用 currentColor 继承文字颜色。PNG 和 WebP 改色麻烦，建议重新下 SVG。
Q：一个页面用多少图标算合适？
A：我试下来 15~25 个比较常见。超过 30 个建议做雪碧图或图标字体，减少请求数。低于 10 个直接内联 SVG 就行，不用额外优化。
Q：品牌图标能改颜色吗？
A：看品牌方的使用规范。有些允许单色改，有些必须用官方配色。商用项目建议去品牌官方资源页下载，别从第三方库拿旧版本。
Q：下载的图标需要署名吗？
A：CC0 不用，MIT 和 Apache 通常要保留版权声明，CC BY 必须署名。署名一般放页脚或关于页面，具体格式看授权条款原文。
最后说两句
图标这东西，找对了 5 分钟搞定，找错了能耗一晚上。你平时是习惯一个站下到底，还是按 UI、品牌、插画分类存？下篇我打算写怎么用 CSS 变量统一管理 SVG 图标颜色，改一次全站生效，感兴趣的话可以留意。
📚 相关专题：未分类