线性、填充、双色、彩色：图标风格怎么统一

风格不统一几乎从不体现在单张图上，而是排成一排时暴露：线宽 1.5 和 2 混着、圆头和方头混着、有的带底色有的不带。定标准比挑好看的图更重要。

本文目录

• 先写一张三行的规范
• 四种风格各自适合的位置
• 跨素材库拼图怎么不翻车
• 深色模式是风格统一的试金石
• 把规范写进组件库，而不是写进文档

先写一张三行的规范

把线宽（stroke-width）、端点（round / square / butt）、画布（viewBox 与留白）三件事定死，之后所有图标按这三条筛。再补两条软约束：圆角半径一致、正负形比例接近。有这五条，跨库挑图也不容易散。

• 线宽：整套统一 1.5 或 2，别混
• 端点：圆头更亲和，方头更硬朗，二选一
• 画布：统一 24 网格与相同的四周留白
• 圆角：卡片与图标的 corner radius 保持同一量级
• 正负形：填充图标的挖空比例接近

四种风格各自适合的位置

线性最百搭，适合功能按钮与后台；填充在小尺寸和高对比界面更清楚；双色适合功能卡片、空状态这类需要一点层次但不想太抢眼的位置；彩色适合频道入口与节日专题，同一屏别超过 6 个。

• 产品界面：线性或填充，全站只选一种作主风格
• 状态与标签：填充
• 引导页 / 空状态：双色或扁平插画
• 节日与活动：彩色，配 2～3 个主色

跨素材库拼图怎么不翻车

ATSvg 汇集的图标来自多个素材库，各库的网格和线宽本来就不一样。最稳的做法是一次只从一个库里挑齐一整套；确实要跨库时，先在 CSS 里统一尺寸与 stroke-width，并把明显更粗或更圆的那几张换掉。详情页标了来源与线型，可以按它筛。

深色模式是风格统一的试金石

把整套图标放到深色底上看一遍：纯黑填充会消失、细线会显得更细、彩色图标可能刺眼。如果一套图在浅色和深色下都成立，说明线宽和留白定得比较合理。具体做法见《深色模式下的图标怎么处理》。

把规范写进组件库，而不是写进文档

规范写在文档里很容易过期：新人不知道、老人懒得翻。更有效的做法是把它固化进组件——图标组件只暴露 size、color、state 三个属性，size 限定在 16 / 20 / 24 / 32 四档，color 只接受主题变量，线宽与端点在组件内部写死。这样「风格不统一」从评审问题变成编译期就过不了的问题。ATSvg 上挑图时按详情页标的来源与线型分组下载，导入组件库后统一命名，后面维护会轻很多。

• 组件只暴露 size / color / state
• 尺寸限定四档，避免随手填 22px
• 颜色只接主题变量，不接受 #hex
• 按来源与线型分组管理，跨库混用要显式评审

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →