图标设计规范
本页列出了 Lucide 图标必须遵循的规则。
如需查看示例和指南,请参阅 Lucide 设计语言。
要求级别
以下术语表示每条规则的严格程度:
- 必须和不得表示必需遵守的规则。
- 应该和不应该表示在需要设计出更好图标时可以灵活调整的规则。
任何例外都应是有意为之,并且符合 Lucide 设计语言。
画布
- 图标必须使用 24 × 24 像素的画布。
- 画布必须为正方形。
- 图标描边必须与画布边缘至少保持 1 像素的距离。
描边
- 描边宽度必须为 2 像素。
- 描边必须使用圆形线连接。
- 开放路径必须使用圆形线帽。
- 描边必须居中于其路径。
圆角
- 除非图标的几何形状另有要求,否则应该将尖角圆角化。
- 宽度或高度至少为 8 像素的元素,90° 角应该使用 2 像素的圆角半径。
- 小于 8 像素的元素,90° 角应该使用 1 像素的圆角半径。
- 以 90° 角相交的对角线,应该使用能够保持像素网格对齐的半径。该半径通常约为 2.41 像素。
- 锐角应该根据其几何形状使用适当程度的圆角化处理。
- 多条线相交处的角,在圆角化会导致图标在不同尺寸下渲染不一致时,应该保持尖锐。
间距
- 不同元素之间必须至少保持 2 像素的视觉间隔。
- 不同元素之间的间隙不得小于 2 像素。
- 内部间隙应该至少为 2 像素宽。
- 元素连接或相交处的间距应该在视觉上保持一致。
- 元素在另一元素从视觉上延续或与其相交的位置,不应该以突兀的截断结束。
视觉重量
- 图标的视觉重量应该与
circle和square图标相近。 - 与可比较的 Lucide 图标相比,图标不应该显得明显更大、更小、更厚重或更轻。
对齐与平衡
- 图标在画布中应该保持视觉居中。
- 不对称图标可以略微偏离中心,以实现视觉居中。
- 对称图标应该保持几何居中。
视觉密度
- 图标的细节程度应该与其他 Lucide 图标相近。
- 当细节导致图标显得比可比较的图标明显更密集时,应该对细节进行简化。
- 对于识别图标而言并非必要的细节应该省略。
曲线
- 连续曲线应该具有平滑的曲率。
- 曲线不应该包含非预期或突兀的曲率变化。
- 在能够准确表示预期几何形状的情况下,应该优先使用弧线和二次 Bézier 曲线。
- 在必要时可以使用三次 Bézier 曲线。
- 相邻三次 Bézier 曲线的控制点在需要保持连续曲率时,应该对齐。
- 曲线不应该包含不必要的控制点。
像素对齐
- 在可能的情况下,坐标应该与像素网格对齐。
- 在可能的情况下,弧线及其他几何元素的中心应该与像素网格对齐。
- 在视觉平衡、可识别的几何形状或平滑曲率有要求时,可以使用非网格对齐的几何形状。
- 像素对齐不应该优先于图标的视觉质量。
共享几何形状
- 现有图标的变体应该保留基础图标的几何形状、位置和方向。
- 在适用的情况下,其他 Lucide 图标中已经存在的元素应该复用既有几何形状。
- 相关图标应该对共享元素使用一致的表现形式。
- 常见修饰符和附加元素在相关图标之间应该使用一致的几何形状、尺寸和位置。
- 在满足 Lucide 设计语言的其他规则所必需时,可以修改现有几何形状。
要求优先级
当两条非必需规则发生冲突时,应选择视觉清晰度以及与 Lucide 设计语言的一致性。
标记为必须或不得的规则,只有在项目明确定义例外时才能违反。