我删掉23个素材站，只留4类电商图标真能商用

Q: ??SVG Repo 下载的 ZIP 里怎么全是 .svg 文件，没有 PNG？

??SVG Repo 只分发源矢量文件。解压后用 Photopea、Figma 或命令行工具 `svgexport` 批量导出 PNG/WebP，我习惯一次跑三套尺寸 64/128/256px，省得后改。

Q: ??Iconscout 标注「Free Commercial Use」却下载不了 SVG？

??Free 套餐只给 PNG/WebP，SVG 需要 Pro。应急时用 512px PNG 进 Photopea → `Image → Vectorize Bitmap` 再导出 SVG，虽有锯齿但能救急，正式上线前再去找同款 SVG 替换。

Q: ??Figma Community 里的打包文件能直接商用吗？

??看作者在 Description 里贴的许可证链接。我见过 MIT、Apache-2.0、CC BY 4.0 三种，CC BY 需保留署名，把作者名写进设计规范文档页脚即可；MIT/Apache 只需保留许可证副本。

Q: ??批量改色值时正则会不会误伤描边 stroke？

??只匹配 `fill` 不匹配 `stroke`。正则 `fill="#[0-9A-Fa-f]{6}"` 精准命中填充色，描边通常写 `stroke="#..."` 不受影响。改完建议在浏览器拖入几个 SVG 目测一次。

Q: ??WebP 在 Safari 老版本会不显示怎么办？

??详情页用 `<picture>` 标签做兜底：`<source type="image/webp" srcset="icon.webp"><img src="icon.png" alt="">`。PNG 做 fallback，体积只大 15% 左右，兼容性零风险。

Q: ??团队共享盘里图标版本怎么管不乱？

??文件名强制 `类别_关键词_vYYYYMMDD.zip`，如 `cart_shopping_v20241011.zip`。Notion 建张表格记「来源站点、协议、更新日期、负责人」，新人入职能自己查。

Q: ??急单来不及跑批量导出，有没有现成三格式同源包？

??Iconscout Free 区勾选「PNG + SVG + WebP」筛选器，搜「ecommerce」能直接下 30+ 组三件套，尺寸固定 64/128/256px，拿来即用，我上周双十一大促就是这么救场的。

Q: ??如何向法务证明「免登录下载」不等于「无版权」？

??保留三样证据：来源页截图（含协议声明区）、下载时的 Network 请求录屏、解压后的 LICENSE.txt。法务最认这套「三件套」，比口头解释快十倍。

直接说结论

上周三晚十点赶详情页，在4个免登录、标注CC0或MIT协议的站点里，用「shopping cart」「tag」「coupon」三个关键词分别搜到120+组PNG/SVG/WebP三格式同源图标，全流程6分钟拖进Figma直接出图，零版权投诉风险。

小标题一：四个真·免登录可商用站点实测

我把收藏夹里积灰的23个图标网站全拉出来跑了一遍关键词「shopping cart」。Undraw 返回 38 组 SVG，全是 MIT 协议，连作者署名栏都省了；Iconscout 的 Free 区能筛选「Commercial Use」，一次性给出 56 组 PNG/SVG/WebP 三件套，尺寸从 24px 到 512px 全覆盖；SVG Repo 搜「tag」直接弹出 214 个单文件，页面底部写着「CC0 1.0 Universal」，下载键旁边连「登录」按钮都没有；Figma Community 里搜「ecommerce icons」能看到 12 个打包文件，最大的那个含 300+ 组件，作者在 Description 里贴了许可证链接，点进去是 Apache-2.0。这四家我实测过至少 3 次批量下载，没弹过验证码、没强制跳转注册页、没在压缩包里塞 txt 广告。

小标题二：搜关键词时我踩过的 3 个坑

第一、别只搜中文「购物车」。我在 Iconscout 先输「购物车」只出 7 个结果，改成「shopping cart」瞬间变 56 个；第二、别信「Free」大字标题。有家站点首页写着「Free Commercial」，进详情页却把 SVG 锁在 Pro 会员里，只给 64px PNG —— 这尺寸放详情页主图直接糊成马赛克；第三、别忽略格式后缀。同一组图标在 SVG Repo 能下 24px/48px/96px 三套 PNG，但在另一家只给 512px 单张 WebP，进 PS 还得手动批量导出，多花 15 分钟。

小标题三：批量重命名+三格式归档的 6 分钟 SOP

在 SVG Repo 搜「coupon」→ 勾选前 50 个 → 点「Download ZIP」得到 svg-repo-coupon.zip
解压后用 Everything 搜 *.svg 全选 → 重命名工具加前缀 coupon_ → 3 秒完成 50 文件
同目录新建 png_64 png_128 webp_256 三个文件夹
用 Photopea 打开任意 SVG → File → Export More → Batch → 依次输出三套尺寸 → 存入对应文件夹
全选三个文件夹 → 右键压缩成 coupon_icons_v20241011.zip
丢进团队共享盘「Icons/Ecommerce/Coupon」目录，备注「CC0/SVG Repo/2024-10-11」
全程我计过表，不含网速时间，纯操作 5 分 42 秒。

小标题四：把图标塞进详情页前的 3 道检查清单

尺寸对齐：主图区 80px 留白，图标必须导出 80px 或 160px@2x，别用 512px 靠 CSS 缩放 —— 移动端会模糊、加载慢。
色值统一：把 SVG 里的 fill="#333" 批量改成品牌主色 #FF6B00，用 VS Code 正则 fill="#[0-9A-Fa-f]{6}" 一键替换 200+ 文件只需 2 秒。
协议留痕：在设计源文件图层名后加 [CC0] [MIT] [Apache-2.0]，法务审核时能直接搜图层名定位来源，不用再翻聊天记录。

操作步骤

打开 SVG Repo 搜「shopping cart」→ 勾选前 60 个 → 下载 ZIP
用批量重命名工具加前缀 cart_ 并按 PNG/SVG/WebP 分三个文件夹
用 Photopea 批量导出 64px/128px/256px 三套规格
用 VS Code 正则统一 fill 色值为品牌主色
压缩打包上传共享盘，文件名带日期与协议标签
在需求文档里粘贴来源页截图+协议链接，留档备查

去哪下载：这套免费素材库可以直接用

上面这些图标素材，我常用的是一个免登录的免费库，收录了 400 多个扁平图标，每个都提供 PNG、SVG、WebP 三种格式，授权是 CC0，个人和商用都不用申请。比如完整的图标合辑在免费 AI 素材库，单个图标示例：shopping-bag，点进去就能直接下载，不需要注册或卡密。

常见问题

Q：SVG Repo 下载的 ZIP 里怎么全是 .svg 文件，没有 PNG？

A：SVG Repo 只分发源矢量文件。解压后用 Photopea、Figma 或命令行工具 `svgexport` 批量导出 PNG/WebP，我习惯一次跑三套尺寸 64/128/256px，省得后改。

Q：Iconscout 标注「Free Commercial Use」却下载不了 SVG？

A：Free 套餐只给 PNG/WebP，SVG 需要 Pro。应急时用 512px PNG 进 Photopea → `Image → Vectorize Bitmap` 再导出 SVG，虽有锯齿但能救急，正式上线前再去找同款 SVG 替换。

Q：Figma Community 里的打包文件能直接商用吗？

A：看作者在 Description 里贴的许可证链接。我见过 MIT、Apache-2.0、CC BY 4.0 三种，CC BY 需保留署名，把作者名写进设计规范文档页脚即可；MIT/Apache 只需保留许可证副本。

Q：批量改色值时正则会不会误伤描边 stroke？

A：只匹配 `fill` 不匹配 `stroke`。正则 `fill="#[0-9A-Fa-f]{6}"` 精准命中填充色，描边通常写 `stroke="#…"` 不受影响。改完建议在浏览器拖入几个 SVG 目测一次。

Q：WebP 在 Safari 老版本会不显示怎么办？

A：详情页用 `<picture>` 标签做兜底：`<source type="image/webp" srcset="icon.webp"><img src="icon.png" alt="">`。PNG 做 fallback，体积只大 15% 左右，兼容性零风险。

Q：团队共享盘里图标版本怎么管不乱？

A：文件名强制 `类别_关键词_vYYYYMMDD.zip`，如 `cart_shopping_v20241011.zip`。Notion 建张表格记「来源站点、协议、更新日期、负责人」，新人入职能自己查。

Q：急单来不及跑批量导出，有没有现成三格式同源包？

A：Iconscout Free 区勾选「PNG + SVG + WebP」筛选器，搜「ecommerce」能直接下 30+ 组三件套，尺寸固定 64/128/256px，拿来即用，我上周双十一大促就是这么救场的。

Q：如何向法务证明「免登录下载」不等于「无版权」？

A：保留三样证据：来源页截图（含协议声明区）、下载时的 Network 请求录屏、解压后的 LICENSE.txt。法务最认这套「三件套」，比口头解释快十倍。

最后说两句

下周我要把这套流程做成 Figma 插件原型，想不想看我怎么把「搜关键词→三格式导出→改色→打包」压缩成一键操作？

📚 相关专题：未分类