直接说结论
免费电商图标优先找 CC0 或免登录的 SVG 库，单套 30~200 枚，PNG 常用 256×256 和 512×512，WebP 适合详情页压缩，商用前确认授权页写的是 CC0 还是仅个人使用。
上周三晚上十一点，我在改一个详情页的购物车模块，翻出收藏夹里 23 个图标站，挨个试下载。结果 11 个要注册，6 个下下来是带水印的 PNG，还有 2 个压缩包里只有 12 枚图标，尺寸全是 48×48，放大就糊。那晚我删到只剩 4 类，才把页面做完。
搜「电商图标」时，90% 的人第一步就搜错了
很多人直接搜「电商图标素材」，出来的全是设计平台的作品展示页，点进去是整图，不是能用的图标文件。
我试下来更有效的关键词是「ecommerce icons SVG」「shopping icons free pack」「cart icon outline」。英文词命中开源库的概率高很多，因为大多数 CC0 图标库是英文命名。
踩过的坑是：搜中文能搜到一堆「图标合集」，但下载链接指向网盘，解压后文件名是乱码，没有分层也没有命名规范，改一个颜色要重新画。
我最后留下的 4 类图标库，各自适合什么场景
第一类是通用 UI 图标库，单套通常 100~300 枚，覆盖购物车、收藏、搜索、用户、订单。格式给 SVG 和 PNG 两版，SVG 可以改描边粗细。适合做后台和 App 界面。
第二类是电商专用包，数量少但精准，一般 30~80 枚，包含优惠券、秒杀、满减、物流、退款。这类包很多是设计师上传的，授权写得含糊，用之前一定翻到授权说明那一行。
第三类是品牌支付图标，像支付方式、信用卡、钱包。这类要注意，品牌图标通常有使用规范，不能改颜色不能改比例，商用前看品牌方条款。
第四类是插画型图标，体积大、颜色多，适合活动页和空状态页。格式多是 PNG 和 WebP，尺寸给到 512×512 或 1024×1024，用在详情页要压到 100KB 以内。
授权怎么看：CC0、免登录、可商用是三件事
CC0 是放弃版权，商用、修改、不署名都行，最省心。免登录是不用注册就能下，但不等于能商用。可商用是授权允许商业用途，可能仍要求署名。
我踩过的坑是：某个站写着「free for personal use」，我当成免费商用，做到一半才发现要买授权。后来养成习惯，下载前先看授权页三个词：CC0、commercial、attribution。
如果授权写 CC0，直接下。写 MIT 或 Apache，一般也能商用。写「free for personal use」，只能练手。写「 attribution required」，商用要署名，放页脚或关于页。
格式怎么选：PNG、SVG、WebP 各管一段
SVG 是矢量，放大不糊，能改颜色和描边，适合图标本体。缺点是老项目里有些构建工具不认，要转一下。
PNG 是位图，带透明通道，适合直接贴进设计稿。电商常用 256×256 和 512×512 两个尺寸，再大文件就重了。
WebP 体积小，同样画质比 PNG 小 30%~70%，适合详情页和活动页。缺点是部分老安卓机不认，要留 PNG 兜底。
我试下来最稳的做法：主图用 SVG，设计稿用 PNG 512×512，线上详情页用 WebP，体积控制在 50KB 以内。
图标打包下载要注意的 3 个细节
一是看包内格式。好包会给 SVG、PNG、字体图标三份。只给 PNG 的包，改色基本靠重新画。
二是看命名。规范命名是 cart.svg、cart-active.svg，乱命名是 icon-01.svg，找起来费时间。
三是看尺寸阶梯。靠谱的包会给 16、24、32、48、64、128、256、512 多档。只给一档的，多半是从别处扒的。
我删掉的那 23 个包里，有 9 个只给一档 48×48，直接放弃。
操作步骤
- 先定场景：后台、App、详情页、活动页，四个场景需求不一样，别一次下全套。
- 用英文关键词搜，优先选标注 CC0 或 MIT 的库，翻到授权页确认 commercial 字样。
- 下载时勾选 SVG + PNG 两种格式，PNG 至少选 256×256 和 512×512 两档。
- 解压后检查命名和分层，把要用的图标单独建一个文件夹，避免混进项目。
- 线上用之前压成 WebP，保留 PNG 兜底，单枚控制在 50KB 以内。
- 项目里建一个 icons 目录，按场景分子目录，下次换项目直接复用。
去哪下载：这套免费素材库可以直接用
上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在 免费 AI 素材库，单个图标示例：notebook-pencil，点进去就能直接下载，不需要注册或卡密。
常见问题
Q：免费电商图标真的能商用吗？
A：看授权。CC0 和 MIT 基本可以商用，写 free for personal use 的只能练手，写 attribution required 的商用要署名。下载前翻到授权页确认那一行。
Q：免登录下载的图标能直接用在店铺里吗？
A：不一定。免登录只说明不用注册，和能不能商用是两件事。我见过免登录但只允许个人使用的站，用在店铺里属于商用，要单独买授权。
Q：SVG 和 PNG 我该下哪个？
A：两个都下。SVG 用来改色和放大，PNG 用来贴设计稿。只下 PNG，后期改描边颜色会很麻烦，得重新找源文件。
Q：图标包一般多少枚够用？
A：电商场景 60~120 枚够覆盖大部分需求。后台界面可能要到 200 枚以上。低于 30 枚的包，通常缺物流、退款、优惠券这几个高频图标。
Q：WebP 图标兼容性有问题吗？
A：新浏览器和主流安卓机没问题，老设备可能不认。稳妥做法是 WebP 为主，PNG 兜底，用 picture 标签做降级，别只放 WebP。
Q：下载的图标颜色不对，怎么改？
A：SVG 直接用代码编辑器改 fill 和 stroke 值，或者在设计工具里改。PNG 改色会失真，尤其是描边图标，建议换 SVG 源文件重导。
Q：图标包里文件名乱码怎么办？
A：多半是压缩包编码问题。换解压工具，或者找原始上传页看有没有单独下载入口。乱码包通常也没有分层，用起来费劲，可以直接换一套。
最后说两句
我现在项目里固定留 4 类图标，每类不超过 120 枚，换项目直接复用，省下大量找图时间。你平时做电商页面，图标是随用随找，还是会攒一套自己的常用库？下篇我打算写「图标怎么压到 20KB 还不糊」，把 WebP 和 SVG 的压缩参数拆开讲。
📚 相关专题：未分类