设计基础 / 05
图标系统
统一 24×24 网格、1.7～2 描边的线性图标族，配合五档尺寸、图标按钮、角标与彩色语义图标。下方网格由脚本自动生成，可直接点选复制。
线性图标网格
#iconGrid · 自动生成基础图标集
共 34 枚线性图标，悬停高亮，点击可复制图标路径。
24 × 24 画布
1.7 描边
Round Cap
线性 · 填充 · 双色
stroke / fill / duotone线性 Linear（stroke）
最常用形态：1.7 描边，颜色继承 currentColor，可直接用 text-* 类改色。
填充 Filled（fill）
填充图标用于选中态、收藏态与强调展示，实心底可承载反色图标。
双色 Duotone
底色用 currentColor + 14% 透明度，与描边同源，换色时整体一致。
图标尺寸
12 / 16 / 20 / 24 / 3212px
角标内、表格行内按钮、密集列表
16px
按钮内图标、卡片操作区、导航项
20px · 推荐
默认档：图标网格、工具栏、表单前缀
24px
顶栏按钮、空状态插画、提示图标
32px
大号操作区、功能入口卡片、引导页
图标按钮
btn-sq / row-btn / btn-ghost标准图标按钮
行内按钮
带文字的图标按钮
图标按钮组
带角标与状态的图标
icon + badge / dot / status数字角标
3
12
99+
圆点提醒
状态灯图标
图标 + 文字
校验通过
需要复核
存在冲突
彩色语义图标
semantic colors状态语义色
成功
危险
警告
信息
强调
品牌渐变图标
渐变只用于功能入口与强调位，避免在同屏出现多个渐变图标。
图标可读性检查
16 与 24 混排时描边视觉重量一致
fg-3 用于非交互图标，避免误认为可点击
fg 用于当前态与主要操作
语义色只在表达状态时使用
可访问性
纯图标按钮必须写 aria-label；装饰性图标加 aria-hidden="true"。