跳转到内容

图标设计规范

本页列出了 Lucide 图标必须遵循的规则。

如需查看示例和指南,请参阅 Lucide 设计语言

要求级别

以下术语表示每条规则的严格程度:

  • 必须不得表示必需遵守的规则。
  • 应该不应该表示在需要设计出更好图标时可以灵活调整的规则。

任何例外都应是有意为之,并且符合 Lucide 设计语言

画布

  1. 图标必须使用 24 × 24 像素的画布。
  2. 画布必须为正方形。
  3. 图标描边必须与画布边缘至少保持 1 像素的距离。

描边

  1. 描边宽度必须为 2 像素。
  2. 描边必须使用圆形线连接。
  3. 开放路径必须使用圆形线帽。
  4. 描边必须居中于其路径。

圆角

  1. 除非图标的几何形状另有要求,否则应该将尖角圆角化。
  2. 宽度或高度至少为 8 像素的元素,90° 角应该使用 2 像素的圆角半径。
  3. 小于 8 像素的元素,90° 角应该使用 1 像素的圆角半径。
  4. 以 90° 角相交的对角线,应该使用能够保持像素网格对齐的半径。该半径通常约为 2.41 像素。
  5. 锐角应该根据其几何形状使用适当程度的圆角化处理。
  6. 多条线相交处的角,在圆角化会导致图标在不同尺寸下渲染不一致时,应该保持尖锐。

间距

  1. 不同元素之间必须至少保持 2 像素的视觉间隔。
  2. 不同元素之间的间隙不得小于 2 像素。
  3. 内部间隙应该至少为 2 像素宽。
  4. 元素连接或相交处的间距应该在视觉上保持一致。
  5. 元素在另一元素从视觉上延续或与其相交的位置,不应该以突兀的截断结束。

视觉重量

  1. 图标的视觉重量应该circlesquare 图标相近。
  2. 与可比较的 Lucide 图标相比,图标不应该显得明显更大、更小、更厚重或更轻。

对齐与平衡

  1. 图标在画布中应该保持视觉居中。
  2. 不对称图标可以略微偏离中心,以实现视觉居中。
  3. 对称图标应该保持几何居中。

视觉密度

  1. 图标的细节程度应该与其他 Lucide 图标相近。
  2. 当细节导致图标显得比可比较的图标明显更密集时,应该对细节进行简化。
  3. 对于识别图标而言并非必要的细节应该省略。

曲线

  1. 连续曲线应该具有平滑的曲率。
  2. 曲线不应该包含非预期或突兀的曲率变化。
  3. 在能够准确表示预期几何形状的情况下,应该优先使用弧线和二次 Bézier 曲线。
  4. 在必要时可以使用三次 Bézier 曲线。
  5. 相邻三次 Bézier 曲线的控制点在需要保持连续曲率时,应该对齐。
  6. 曲线不应该包含不必要的控制点。

像素对齐

  1. 在可能的情况下,坐标应该与像素网格对齐。
  2. 在可能的情况下,弧线及其他几何元素的中心应该与像素网格对齐。
  3. 在视觉平衡、可识别的几何形状或平滑曲率有要求时,可以使用非网格对齐的几何形状。
  4. 像素对齐不应该优先于图标的视觉质量。

共享几何形状

  1. 现有图标的变体应该保留基础图标的几何形状、位置和方向。
  2. 在适用的情况下,其他 Lucide 图标中已经存在的元素应该复用既有几何形状。
  3. 相关图标应该对共享元素使用一致的表现形式。
  4. 常见修饰符和附加元素在相关图标之间应该使用一致的几何形状、尺寸和位置。
  5. 在满足 Lucide 设计语言的其他规则所必需时,可以修改现有几何形状。

要求优先级

当两条非必需规则发生冲突时,应选择视觉清晰度以及与 Lucide 设计语言的一致性。

标记为必须不得的规则,只有在项目明确定义例外时才能违反。