直接说结论
免费矢量图标优先选 CC0 或免登录可商用的站点,PNG、SVG、WebP 三种格式都能拿到,单套图标常见 100~3000 个、24×24 或 48×48 网格,下载不用注册,商用前只核对授权页一行字。
上周三晚上十点,我改一个活动页的底部导航,图标全用位图,结果被前端一句“放大糊了”打回。那晚我翻了 23 个图标站,下了 6 个包,踩了 3 个坑,才把一套 SVG 换上去。下面是我试下来的分类和做法。
先分四类,别乱搜
我把图标站分成四类:通用大库、品牌图标、单色线性、插画风。通用大库适合找常用功能图标,数量动辄 2000 个以上;品牌图标专找社交和支付标志;单色线性适合后台和工具类界面;插画风适合空状态。分类清楚,搜索时间能少一半。
我踩过的坑是:一上来就搜“免费矢量图标”,结果首页全是打包站,点进去要登录。后来我改成先定场景再搜,比如“后台导航图标 SVG”,命中率高很多。
免登录和 CC0 怎么判断
免登录不等于可商用,这是两件事。判断方法很简单:打开图标详情页,找授权那一行。写 CC0 的,基本可以商用、可改;写“free for personal use”的,商用要另买。我试下来,免登录站点里大概一半是 CC0,另一半是署名授权。
还有个细节:同一个站不同图标授权可能不一样。别只看首页那句“全部免费”,要点进具体图标看。我下过一个包,里面有 12 个图标是 CC0,另外 3 个要署名,混在一起。
格式怎么选,别只存 PNG
PNG 适合直接贴到设计稿,但放大会糊;SVG 是矢量,放大不虚,适合做界面图标;WebP 体积小,适合网页直接引用。我现在的习惯是:设计稿存 PNG 做预览,交付给前端存 SVG,网页上如果量大就转 WebP。
尺寸上,通用图标多是 24×24 网格,也有 48×48 和 64×64。下载时注意看有没有“stroke”版本,线性图标改颜色更方便。我试过把 24×24 的 SVG 直接拉到 200×200,边缘依然干净,这就是矢量的好处。
量级和授权核对清单
一套完整图标库常见 100~3000 个,我常用的几套在 700~1500 之间。下载前核对三件事:授权类型、是否需要署名、是否允许改色。三步走完,基本不会返工。
我踩过的坑是:下了一个 1200 个的包,解压后发现一半是重复的,实际能用的只有 600 个左右。所以别只看数量,先下小包试。
操作步骤
- 先定场景,搜“后台导航图标”或“社交图标”,别搜大词。
- 进详情页看授权行,优先选 CC0,其次看是否要署名。
- 下载时同时拿 SVG 和 PNG,PNG 做预览,SVG 做交付。
- 检查网格尺寸,常见 24×24,改色前确认是描边还是填充。
- 建一个自己的文件夹,按“线性/品牌/插画”分三类,下次直接翻。
去哪下载:这套免费素材库可以直接用
上面这些图标素材,我常用的是一个免登录的免费库,收录了 400 多个扁平图标,每个都提供 PNG、SVG、WebP 三种格式,授权是 CC0,个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库,单个图标示例:compass,点进去就能直接下载,不需要注册或卡密。
常见问题
Q:免费矢量图标真的能商用吗?
A:看授权。CC0 基本可以商用、可改、不用署名;写“personal use”的商用要另买。别只看首页,点进详情页看那一行字。
Q:免登录的站,下载有限制吗?
A:多数免登录站单次能下整套,但有的会限速或要求关注。我试下来,免登录的通常够用,量大时分会批下。
Q:SVG 和 PNG 我该存哪个?
A:两个都存。PNG 贴设计稿快,SVG 给前端放大不糊。网页量大时把 SVG 转 WebP,体积能小一半左右。
Q:图标颜色怎么改最省事?
A:优先下描边版 SVG,改 stroke 颜色就行。填充版要改 fill,批量改时用编辑器全局替换,别一个个点。
Q:一套图标一般多少个够用?
A:后台类 300~500 个基本够,通用大库 1000 个以上更稳。我常用的一套 700 多个,覆盖导航、表单、状态足够。
Q:下载后发现有重复怎么办?
A:先按文件名去重,再按图标形状扫一眼。我下过 1200 个的包,实际能用 600 个左右,重复率不低。
Q:署名要写在哪儿?
A:看授权要求。有的要求写在关于页,有的要求写在文档里。CC0 不用署名,署名授权的按它说的位置放一行就行。
最后说两句
你平时找图标是先搜大词,还是先定场景?我下篇会写“同一套图标怎么在 Figma 里批量换色和导出 WebP”,如果你也在改后台界面,可以回来看看。
📚 相关专题:未分类