跳到主要内容
文心 · 万形

图标

线条型图标,1.5px 描边,三档尺寸。这是图标使用规范,不是随包附送的通用图标库—— 当前只交付尺寸与描边 token。署名标记与朱砂印章归品牌。

尺寸与描边

Token值用途
--icon-sm16px行内、密集列表
--icon-md20px默认
--icon-lg24px导航、工具栏
--stroke-mark1.5px签名描边

四条规则

  • 只用线条型图标,禁止填充型——这条针对图标集的风格, 数据标记(图表柱、评分方块)不在此列
  • 禁止两个图标库同页混用——描边风格不一致会立刻被看出来
  • 图标不能独立承载信息——必须有可访问名称或相邻文字
  • SVG 缩放时用 vector-effect: non-scaling-stroke—— 这是 1.5px 在海报尺度下仍然是 1.5px 的关键

采用者在自己的项目中选择一个符合以上规则的图标库;本包不临时混入 CDN 图标, 也不把品牌 SVG 伪装成 UI 图标。

命中区域

图标的视觉尺寸和命中盒是两件事。 一个 16px 的图标按钮仍然需要 ≥24px 的可点击区域(移动端 44/48)。 扩命中盒,不必放大文字——这是田野审计在三个生产站上都发现的问题。

本包没有随附 UI 图标资产,因此这里不拿字符或临时图形冒充图标。采用者选定单一图标库后, 让视觉尺寸为 16px 的实际图标落在 ≥24px 的可点击元素内即可。

与品牌的分界

图标和 Logo 的线宽刻意不同:图标 --stroke-mark 1.5px, Logo 2.5px。这不是不一致——品牌标识被允许且必须偏离 UI 图标的常规设定, 以获得足够的物理重量。把 Logo 改成 1.5px 是明确的禁止项。

UI 图标品牌 Logo
线宽1.5px(--stroke-mark)2.5px
填充禁止填充型必须实心底座
深色模式跟随主题不变色
归属全局样式品牌