去哪找好用的 SVG：资源实测，以及怎么给 AI 画图当参照

本站每篇文章的头图和配图，都是让 AI 直接写 SVG 代码画出来的。画多了会发现，AI 画得好不好，很大程度上取决于它“照着什么画”。只说一句“画一个简洁的图标”，线宽、网格、圆角全凭它自己的印象，每次都不一样；给它看几张好的 SVG，画出来就稳得多。这里的“看”不是让 AI 把别人的 SVG 扒下来直接用，而是给它一条 baseline：风格向谁看齐，质量要到什么程度，画完以后拿什么来对照。

于是就要去找好的 SVG。搜 “free SVG illustrations”，能搜出一长串站点，每个都写着 free。真下载了几张，事情没那么顺。一张 unDraw 的插画放进页面，主色是一种很显眼的紫色 #6c63ff，和本站的暖色完全不搭；一张 Open Peeps 的手绘人物在浅色模式下很好看，切到深色模式，黑色线条就和背景融成一片；从图标库里拿来的房子图标，用 <img> 引进来以后，怎么设 color 都还是黑的。再往页脚看，“free” 后面还跟着小字：有的要求署名，有的禁止拿去训练 AI，有的只免费给低清 PNG。

那么，哪里能找到质量好一点、适合当参照的 SVG？各家写的“免费”是同一个意思，允许拿给 AI 看吗？下载下来的文件，放进网页之前要做什么？真要让 AI 照着画，又该怎么跟它说？本文就从这几个疑问出发，把插画、图标、图案三类资源逐个下载下来试一遍，最后再让 AI 照着画一次。

一、SVG 资源的几种来源

搜出来的站混在一起，其实是几种不同的东西。按“一个文件里装的是什么”，可以分成四类：

• 插画：一个场景或一个人物，几十个到几百个形状，用来做头图、空状态、落地页。代表是 unDraw、Open Peeps、Storyset。
• 图标：一个符号，通常画在 24×24 这样的小网格上，几百字节，成套出现，一套几百到几千个。代表是 Lucide、Tabler、Material Symbols。
• 图案与背景：可以平铺的纹样，或者由生成器现场算出来的波浪、斑点。代表是 Hero Patterns、Haikei。
• 聚合站和开放图库：自己不画，把别人的作品汇到一起供搜索。代表是 Iconify、SVG Repo、iconfont.cn、Openclipart、Wikimedia Commons。

四类东西的“好”不是一个标准。插画看风格能不能统一、能不能改成自己的配色；图标看成套程度和能不能跟着文字变色；图案看能不能无缝平铺、体积多大；聚合站看能不能按许可筛选。拿来给 AI 当参照，还要多看一条：规格能不能量化。一套图标的网格、线宽、圆角都是固定的数字，可以原样写给 AI，也可以拿来检查它画出来的东西；一张孤零零的插画，只能让 AI 去“意会”。但有一件事四类都绕不开：每个站都写着 free，这个 free 到底允许我们做什么？

二、“免费”的几种含义

现象

把各站的许可页一个个点开（2026 年 10 月 28 日访问），“free” 至少有六种意思。Open Peeps 说的是 “CC0，你可以复制、修改、分发，甚至商用，不用问任何人”¹；Storyset 说的是“免费使用，前提是注明出处，不想署名就买 Flaticon Premium”²；unDraw 说的是“商用免费、不用署名”，后面紧跟着三条禁止：不能做竞品或打包再分发，不能用于训练 AI，不能未经同意自动抓取下载³。

分析

这些说法可以归成下面几类。前四类是通用许可，条款在任何地方都一样；后两类是站点自己写的，要逐条读。

站点自定义许可最容易被忽略，因为它的第一句往往和 CC0 一样宽松。DrawKit 允许商用、不用署名，但不允许把插画放进要下载的博客模板里，也不允许印到 T 恤和杯子上⁴。

这类禁止项里，和本文目的关系最大的是 AI。unDraw 的许可专门列了一串：不能拿来做生成式模型的训练数据，不能放进机器学习数据集，不能“用来训练、验证或测试 AI 系统”，也不能为开发 AI 模型做任何自动化处理；还不能未经同意自动抓取下载³。DrawKit 也写明不能用于训练、微调或改进任何 AI 模型⁴。把一张插画贴进 prompt 当参照算不算这些条款里的“使用”，条文没有说清。既然有 CC0、MIT 的同类可选，给 AI 当参照的素材就从许可宽松的库里挑，避开写了 AI 禁令的站。

许可会变

还有一个容易踩的坑：许可不是一成不变的。Remix Icon 从 2026 年 1 月起改用自己写的 Remix Icon License v1.0，新加了三条禁止：不能单独售卖图标、不能拿它做竞品图标库、不能把图标当 logo 或商标用⁵。我们用 npm 装下最新的 remixicon 4.9.1，package.json 里写的却还是 "license": "Apache-2.0"，只有包里的 License 文件是新条款。

按 package.json 自动统计许可的工具，会把它当成 Apache-2.0。判断许可要看许可文件本身，不能只看包的元数据。

聚合站里的许可分布

聚合站把这件事放大了。Iconify 的接口会返回每套图标的许可⁶，我们把 244 套、417,719 个图标按许可加起来：

将近四分之三的图标是 MIT、Apache 这类宽松许可，但剩下四分之一要署名或带附加条款，其中 Custom Brand Icons 和 PrestaShop Icons 两套还是非商业许可。在聚合站里搜图标，搜到的是图标，许可却要回到它所属的那一套去看。

许可弄清楚了，接下来按类型看资源本身。先看插画，因为插画最显眼，问题也最多。

三、插画资源

各家的风格和许可

免费 SVG 插画站数下来有十来家，风格差别很大：

• unDraw：扁平人物 + 一个主色，主题偏科技和办公。站上可以先选主色再下载³。
• Open Peeps / Humaaans：同一位作者 Pablo Stanley 的两套“积木”。Open Peeps 是黑白手绘线稿，Humaaans 是彩色扁平人物，头、身体、腿可以自由拼装，都是 CC0¹⁷。
• Open Doodles：同一位作者的涂鸦风，只有一个强调色加黑线，CC0⁸。
• Storyset：Freepik 出品的场景插画，可以在线换主色、加简单动画；免费版要署名²。
• DrawKit、ManyPixels：商业公司放出的免费插画，许可都是“商用不用署名、不能再分发”的自定义条款⁴⁹。
• IRA Design：渐变色人物和物件组件，MIT¹⁰。
• Blush：汇集多位插画师的风格，可以在线拼装；许可页写明免费使用不用署名¹¹。
• Icons8 Ouch：风格最多，但免费版只给低清 PNG，还要署名加链接，SVG 要付费¹²。
• Openclipart、Wikimedia Commons：开放图库，数量最大，风格完全不统一¹³¹⁴。

只看许可和风格还不够。我们从其中几家各下载了一两张，用同一个脚本统计文件里有什么：

改成自己的配色

开头那张紫色的 unDraw 插画，问题出在配色上。表里的“颜色数”恰好说明了改色的难度：unDraw 那张 agentic-network 一共 8 种颜色，其中主色 #6c63ff 出现了 30 次，其余是灰和深蓝。把这一个色值全局替换成站点的强调色，整张图就换了主题，这也是 unDraw 能在网站上先选主色再下载的原因。Open Doodles 是 #ff5678 加黑线，Storyset 是一个主色加几种灰，改法一样。

Humaaans 就难得多：一张图 26 种颜色，肤色、衣服、阴影各是各的，要改只能进设计软件逐个调。Openclipart 和 Wikimedia 上的图更是各画各的，40 多种颜色、几十个渐变很常见。

颜色数也决定了一张插画适不适合给 AI 当参照。Open Doodles 是“黑线加一个强调色”，Open Peeps 只有黑白两色，风格一句话就能写清，AI 也容易照着做；Humaaans 的 26 种颜色和 207 个图层 id，AI 读进去只是一堆噪声。

深色模式

颜色能换，还有一个问题没解决：深色模式。Open Peeps 的线条是写死的 #000000，本站深色模式的页面底色是 #111，两者的对比度只有 1.1:1，线条几乎看不见。unDraw 的深色部分 #3f3d56 在同样的底色上也只有 1.8:1。

写死颜色的插画在深色模式下只有三种处理办法：给插画垫一块浅色底，让它像一张贴纸；把关键颜色改成 CSS 类，深色模式下另给一组颜色（本站自己的配图就是这么做的）；或者只在浅色模式下显示。第一种最省事，第二种效果最好，但要先把文件里的颜色整理成少数几个，前面那张表里颜色越少的，越容易做。

插画在一个页面里通常只放一两张，而图标一放就是几十个，遇到的问题又不一样了。

四、图标库

同类图标库列全

开源 SVG 图标库数量多，但主流的就二十来套。我们用 npm 和 Iconify 的数据包装下了其中 23 套，每套取“房子”这个图标放在一起看：

图里的文件都是各库发布的原样，只去掉了尺寸和注释。12 套用了六种网格（16、24、32、48、256、960），同是 24 网格，Heroicons 和 Iconoir 的线宽是 1.5，Lucide、Tabler、Feather 是 2。同一个界面里最好只用一套，否则粗细和圆角会对不上。

完整的 23 套实测数据见下表。“只设 color 变色”和“CSS 改线宽”两列是在 Chromium 里实际渲染、数像素得出来的，具体做法在下一小节讲。

现象：图标不跟着文字变色

开头那个房子图标怎么设 color 都不变色，是因为用的是 <img src="house.svg">。我们在 Chromium 里做了一个实验：外层容器写 color: #ad4f36，把每套的房子图标分别用 <img> 和直接内联两种方式放进去，截图后数红色像素的比例。

结果分成三种：

1. <img> 引用：23 套全部是黑色，0% 变色。
2. 内联，文件里写了 currentColor：Lucide、Tabler、Phosphor、Remix、Font Awesome 等 13 套 100% 变色。
3. 内联，文件里没写颜色：Material Symbols、MDI、Carbon、Fluent UI、Octicons、Simple Icons 6 套，依然是黑色。

原因

<img> 引用的 SVG 是一个独立的文档，页面上的 CSS 进不到它里面去，所以第一种情况无论怎么写都不会变色，想换颜色只能换文件，或者改用 CSS 的 mask-image。内联以后，SVG 成了页面 DOM 的一部分，currentColor 这个关键字取的就是外层元素的 color 值¹⁵。至于第三种，文件里压根没有 fill 属性，按 SVG 的默认值就是黑色；它并不是“改不了”，只是要在页面里补一行 svg { fill: currentColor }，补上以后同样 100% 变色。

线宽和体积

描边图标还有一个好处：线宽可以用 CSS 改。我们给内联的 svg 根元素加了一行 stroke-width: 1，再数一次墨量：Lucide、Feather 少了 49%，Tabler 少了 45%，Heroicons 和 Iconoir 少了 33%，图标都变细了。IconPark 和 Ionicons 却没有变化，因为它们把 stroke-width 写在了内部的 <g> 或 <path> 上，内部元素自己的属性优先于从根元素继承来的值。

单个图标的体积都很小。Feather 平均 379 字节，Lucide 485 字节，Tabler 559 字节，用 svgo 再压一次能少 10% 到 40%。Font Awesome 每个文件多出一行许可注释，平均 920 字节；这行注释正好满足了 CC BY 的署名要求，压缩时别把它删掉。

怎么选

如果界面需要跟着主题变色、还想统一调线宽，描边的 Lucide¹⁶ 和 Tabler¹⁷ 最省心：许可宽松，数量够多，文件就是纯 SVG，不依赖任何前端框架，Go 的模板里直接内联也行。需要多种粗细的，Phosphor 一套六种字重¹⁸；需要和 Android、Google 系产品风格一致的，选 Material Symbols¹⁹，记得补那行 fill: currentColor。品牌 logo 用 Simple Icons，文件是 CC0，但 logo 本身是各家的商标，只能用来指代那个品牌²⁰。Font Awesome Free²¹ 和 game-icons²² 是 CC BY，用了就要署名。

给 AI 当参照，也是描边图标库最合适：它的规格就是几个数字（24 网格、线宽 2、圆角线端），量得出来，也查得出来。第八节就用 Lucide 做这件事。

图标和插画之外，网页上还有一类 SVG 用得很多：背景。

五、图案与背景

背景图案有两种来源。一种是现成的平铺图案，代表是 Hero Patterns：87 个图案，每个都是一个只有一种填充色 #000 的 path，中位数 485 字节²³。网站上选好前景色和背景色以后，它做的事情就是把 #000 换成你选的颜色，再整段塞进 CSS 的 background-image: url("data:image/svg+xml,…")。最大的 Topography 图案也只有 91,567 字节。它的许可是 CC BY 4.0，使用时要署名²⁴。

另一种是生成器。Haikei 能现场生成波浪、斑点、分层山峰等背景，免费且不用注册，但我们没找到它单独的许可页²⁵；fffuel 的一系列生成器明确写了生成的图片可以商用、不用署名，只是不能把图片本身拿去转售或再分发²⁶；SVG Backgrounds 的免费素材要署名，订阅后才能去掉²⁷。

生成器和现成素材相比，有个不显眼的好处：每次输出的都不一样，不会出现“三个网站用着同一张背景”的撞图。

六、聚合站与开放图库

前面几节的资源都来自“一个作者或一个团队画的一套”。当这些套里都找不到想要的图时，就会用到聚合站，而聚合站的问题前面已经看到了：许可要逐个看。

• Iconify：244 套、41 万多个图标，每套都有明确的许可字段，搜索时可以按许可筛选，也可以通过 API 直接取 SVG⁶。它的周边工具 Icônes 是一个很好用的检索界面。
• SVG Repo：图标和插画混在一起，每个文件页标着自己的许可，默认不要求署名，但不同作者的条款不同²⁸。我们用脚本访问它的许可页和首页，都收到了 429（请求过多），它显然不欢迎批量下载。
• iconfont.cn：国内用得最多的图标平台，图标由用户上传。vuepress-theme-hope 的文档专门提醒：商用项目要获得作者授权，上传者也可能上传了版权属于第三方的图标²⁹。它的授权说明页需要登录才能看到，我们没能核对原文。
• Openclipart：18 万多幅矢量图，全部放入公有领域¹³。风格不统一，而且大多是 Inkscape 导出的文件，带着大量编辑器元数据：前面表里那张 iso-house 有 359.5 KB、981 个 id，svgo 一压就去掉了一半。
• Wikimedia Commons：每个文件的许可不同。Linux 的企鹅 Tux 要求注明作者 Larry Ewing¹⁴。

像 Openclipart 这样的文件不止体积大。它和 Tux 里那上百个 id，被几十个渐变和滤镜引用着，把它们直接内联进页面时，还会碰到一个看不见的坑。

七、放进页面之前的处理

现象

我们做了这样一个实验：在同一个页面里先内联那张 unDraw 的 business-chart，再内联一个用 svgo 压缩过的 Tux，然后和单独渲染的 Tux 逐像素比较。结果有 1,674 个像素不一样，企鹅脚掌的阴影没了。

原因

SVG 内联以后，它的 id 和页面上其他元素共用一个命名空间。Tux 里有个渐变 ac，自己不写色标，而是用 xlink:href="#a" 继承渐变 a 的色标；浏览器按文档顺序找 #a，先找到的是 unDraw 那张图里的灰色半透明渐变，于是脚掌的金黄色阴影变成了几乎透明的灰。

更麻烦的是，这个冲突往往是“压缩”造成的。unDraw 的文件本身就只有一个 id="a"；svgo 默认会把 id 缩短成 a、b、c 这样的短名，两张都压过的图放在一起，几乎一定撞名。

解决

svgo 有一个 prefixIds 插件，给每个文件的 id 和引用统一加上前缀³⁰。给 Tux 加上前缀 tux 再做同样的实验，差异是 0 个像素。另一种办法是退回 <img> 引用：图片是独立文档，id 互不干扰，代价是上一节说的不能跟着文字变色。

所以一张下载来的 SVG 放进页面之前，大致要过三关：用 svgo 去掉编辑器元数据（Sketch、Inkscape 导出的文件通常能少一半，unDraw 这种已经很干净的只少 12%–19%）；内联时加 id 前缀；有深色模式的站，再把关键颜色换成 CSS 类。

交给 AI 之前，第一关同样要过。Humaaans 那张 79.6 KB 的原文件，按每 3–4 个字符一个 token 粗估要两万多 token，其中大半是图层名和编辑器元数据，对“学风格”毫无帮助；压过以后是 31.0 KB。图标就没有这个问题，一个 Lucide 图标不到 500 字节。

文件处理干净了，最后回到开头的目的：怎么把这些 SVG 交给 AI，让它画得更好。

八、给 AI 画图找参照

参照不是素材

先做一个最直接的尝试：让 Claude “按 Lucide 的风格画一个云上传图标”。它给出的三条路径里，箭头的两条 M12 13v8、m8 17 4-4 4 4 和 Lucide 自带的 cloud-upload 一字不差，云朵轮廓也只差在小数位（4.2 15.1 对 4 14.899）。

为什么会这样？Lucide 这类热门开源图标库在网上被转载过无数次，模型早就“记住”了它们。要画的东西参照库里已经有，AI 交出来的就是复刻，不是新画的。

这说明了两件事。第一，搜到现成的就直接用：许可允许，现成的图标总比重画的好，不必让 AI 再画一遍。第二，只有参照库里没有的东西才需要 AI 画，而这时参照的作用是给出 baseline，不是提供素材：网格、线宽、圆角和留白向它看齐，画完以后拿它来对照，形状要是新的。

边搜边用

参照最好不是事先备好的一个文件夹，而是画什么就搜什么。以“一张图片挂着许可吊牌”这个图标为例，Lucide 里没有现成的，于是让 AI 先把它拆成单个名词：图片、吊牌、许可，再到同一套图标里一个个搜。

搜索用的是 Iconify 的接口³¹，它能把搜索限定在一套图标里，还能返回这套图标的许可。我们把它包成一个十几行的脚本 svg-refs.mjs，AI 在终端里跑一行命令就能拿到参照：

$ node svg-refs.mjs lucide image tag license
# Lucide，许可 ISC，网格 24

## image → image（共 11 个结果）
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></g></svg>

## tag → tag（共 4 个结果）
<svg …>…<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></g></svg>

## license：没有搜到

有两个细节是实际搜了才知道的。一是要按单个词搜：直接搜 “image tag” 一个结果都没有，拆开以后两个词都能搜到。二是 license 在 Lucide 里没有，在 Tabler 里有。这时不要跨库去补，两套图标的线宽和圆角不同，混在一起当参照，AI 学到的风格反而是乱的。

搜到的参照要怎么用，整个流程如下：

prompt 的写法

拿到参照以后，prompt 要回答四个问题：参照是什么、从参照里学什么、画什么、画完怎么验收。下面是这个例子实际用的 prompt：

你要用 SVG 代码画一个 24×24 的界面图标：一张图片（方框里有太阳和山），
右上角挂着一枚许可吊牌，表示“这张图带授权信息”。Lucide 里没有这个图标。

【一、搜参照】
1. 把要画的东西拆成单个名词：image、tag、license。
2. 在同一套图标里搜：node svg-refs.mjs lucide image tag license
3. 只用搜到的结果。某个词没搜到，不要去别的图标库补。
4. 参照只用来对齐风格和质量：网格、线宽、圆角、留白、元素数量。
   不要复用参照的形状，交付的必须是新的组合。

【二、先量规格，写出来再画】
从参照里量出并写下：viewBox、线宽、线端和拐角、图形占用的范围、
元素个数、两个图形交叠时怎么处理、小圆点怎么画。

【三、画】
- 根元素只写 xmlns、viewBox 和描边属性，不写 width/height
- 不写 id、class、style；不用 defs、渐变、滤镜、image、text
- 颜色只用 currentColor
- 只输出一段 <svg>…</svg>

【四、对照】
运行 node check-icon.cjs out.svg；再把输出和参照并排渲染成 PNG，
线与线的间距、图形的轻重要和参照一致。不一致就写出具体差距，再改一版。

第二步要求 AI 先把规格写出来，是因为“学风格”太含糊。这一次 Claude 写下的规格是：viewBox 0 0 24 24；fill="none"、stroke-width="2"、线端和拐角都是圆的；几何落在 2–22 之间；转角半径 2；2–5 个元素；两个图形交叠时，下层的线断开、留出约 2 的空隙；小圆点用 r=".5" 加实心填充（照 tag 的孔）。写出来的规格就是 baseline，既约束这一次的绘制，也是第四步检查的标准。

渲染对照

第一轮的输出能通过规格检查，但和参照放在一起渲染，问题就出来了：

吊牌下角和山的斜线之间的距离不到 1，挤成一团，这在只看代码时是发现不了的。于是把差距写成具体的话交回去：“吊牌缩小到右上角约 9×9 的范围，图片边框在吊牌处断开，山的斜线终点左移，任何两条线之间至少留 2。”第二轮间距正常了，但吊牌上的孔贴着边；第三轮只挪了孔的位置。

检查脚本 check-icon.cjs 只有几十行，逐项对照规格：根元素的 6 个描边属性、有没有 id 和 defs、元素个数，以及在浏览器里用 getBBox 量出的图形范围。三轮输出都是 12 项全过。拿同一个脚本去查 MDI 的 home-outline，12 项里有 7 项不通过，因为它是另一套“填充”风格的图标。脚本挡住的是风格跑偏，并排渲染挡住的是质量问题，两者缺一不可。

插画的参照

插画的参照没法这样量得一清二楚，做法要变一变。插画没有 Iconify 这样统一的搜索接口；Openclipart 和 Wikimedia Commons 虽然能搜，许可也写在每个文件上，但我们从云端调 Wikimedia 的接口，第一次请求就收到了 429。更实际的办法是事先备一小批许可宽松、颜色少的插画（比如 Open Doodles、Open Peeps），压缩后存在本地，AI 画图时按文件名搜。

交给 AI 时，参照只给一两张压缩过的小文件，再把风格写成规格：几种颜色、各自管什么（线条、主色、灰阶），线宽多少，构图怎么留白。本站的配图规则 .claude/skills/blog-diagram/SKILL.md 就是这样一份规格：配色变量表、样式类名、4px 网格、卡片和行的高度、出图前的检查清单，每次让 AI 画图都会先读它。

九、按场景选资源

把前面几节的结论按用途收拢一下：

回到开头那三个问题。紫色的 unDraw 插画，替换一个色值 #6c63ff 就能配上本站的暖色；深色模式下看不见的 Open Peeps 线条，要么垫一块浅色底，要么把 #000 换成 CSS 类；<img> 引用的房子图标不变色，是因为图片是独立文档，换成内联、再确认文件里有 currentColor 就好。

至于本站的配图，还是会继续让 AI 来画。现成素材解决的是“快速有一张好看的图”，而本站的头图要按文章内容定风格、要跟着深色模式切换、要配上文中的真实数字，这三件事现成素材都做不到。找来的 SVG 在这里的角色是参照：画什么就搜什么，搜到现成的、许可允许就直接用；搜不到，就把搜到的近邻当 baseline，让 AI 对齐它的规格画出新的，画完再和它并排对照。

小结

1. SVG 资源分几类？ 插画、图标、图案与背景、聚合站和开放图库四类，评判标准各不相同。
2. “免费”是什么意思？ 至少六种：CC0、宽松开源、CC BY、相同方式共享、站点自定义许可、免费增值。自定义许可的禁止项（不能再分发、不能 AI 训练、不能当商标）最容易被忽略，许可还会变，要看许可文件本身。给 AI 当参照的素材，避开 unDraw、DrawKit 这类写了 AI 禁令的站。
3. 插画差在哪？ 风格之外，主要差在颜色数和文件冗余。unDraw 一个主色出现 30 次，换一个色值就能改主题；Humaaans 26 种颜色只能进设计软件；写死的黑线在深色模式下对比度只有 1.1:1。
4. 图标为什么有的不变色？ <img> 引用的一律不变；内联时写了 currentColor 的跟着 color 走，没写 fill 的要补 svg { fill: currentColor }。描边图标里只有线宽写在根元素上的 5 套能用 CSS 改线宽。
5. 聚合站要注意什么？ 许可按套或按文件看。Iconify 里约 23% 的图标要署名或带附加条款；iconfont.cn 的图标由用户上传，商用要作者授权。
6. 放进页面前做什么？ svgo 压缩；内联时用 prefixIds 加 id 前缀，否则两张图里的 id="a" 会互相串，实验里 Tux 有 1,674 个像素被改；有深色模式的话把关键颜色换成 CSS 类。
7. 怎么给 AI 当参照？ 参照是 baseline，不是素材。画什么就按单个名词在同一套图标里搜，搜到现成的就直接用；搜不到的才让 AI 画，prompt 里写清参照、先量出规格、再画、再对照。热门图标库 AI 早就记住了，让它画库里已有的东西，交出来的就是复刻。规格检查挡住风格跑偏，并排渲染挡住质量问题。

参考资料