Lucide 设计语言
Lucide 是一套一致的图标集，而不是一组互不相关的图标。每个图标都应该让人感觉它属于整个图标库。
本指南介绍 Lucide 图标背后的视觉规则，以及设计新图标时如何使用这些规则。
完整规则列表请参阅图标设计规范
1. 使用 24 × 24 像素的画布
图标必须在 24 × 24 像素的画布上设计。
使用 24 × 24 像素的画布。
不要使用更大、更小或非正方形的画布。
2. 保持 1 像素的安全区域
图标的描边与画布边缘之间必须至少有 1 像素的内边距。
在图标周围保留至少 1 像素的内边距。
不要将描边放在画布边缘。它们可能会被裁剪。
3. 使用 2 像素的描边
描边必须为 2 像素宽。
使用 2 像素的描边宽度。
不要使用更粗或更细的描边，也不要混用不同的描边宽度。
4. 使用圆角线连接
描边必须使用圆角线连接。
使用圆角线连接。
不要使用斜接或斜角线连接。
TIP
圆角连接不能替代圆角处理。大多数尖角仍然需要设置半径。
5. 使用圆角线帽
开放路径必须使用圆角线帽。
在开放路径上使用圆角线帽。
不要使用平头或方头线帽。
6. 使用居中描边
描边必须以路径为中心。
让描边以路径为中心。
不要使用内描边或外描边。它们会改变线连接的显示方式，从而产生尖锐的内角。
7. 使用一致的圆角半径
几乎所有尖角都应该进行圆角处理。
使用圆角。
不要使用尖角。
圆角半径取决于元素的大小和角度。对于 90° 角：
对于宽度或高度至少为 8 像素的形状，使用 2 像素的圆角半径。
对于小于 8 像素的形状，使用 1 像素的圆角半径。
也有例外：
以直角相交的对角线通常需要 2.41 像素的半径（1+√2），才能与网格保持对齐。
即使是非常尖锐的角，通常也需要进行少量圆角处理。具体数值取决于形状。
避免在多条线相交的位置进行圆角处理。
在多条线相交的位置保持尖角，以便图标能够良好缩放。
不要在三条以上的线相交的位置进行圆角处理。这会导致图标缩放效果不佳。
8. 元素之间至少保持 2 像素的间距
不同元素之间必须至少有 2 像素的视觉间距。
不同元素之间保持 2 像素的间距。
不同元素之间不要使用小于 2 像素的间隙。
这同样适用于形状内部。大多数内部间隙应该至少为 2 像素宽。
在形状内部保持至少 2 像素的间距。
不要使用小于 2 像素的内部间隙。
你可以将一个宽度为 2 像素的圆放在形状内部，以此进行测试。
如果一个宽度为 2 像素的圆能够在不重叠的情况下放入，说明间隙足够宽。
如果圆与形状发生重叠，则间隙应该更宽。
当元素在视觉上连接或相交时，同样适用 2 像素的间距。
不要在未保持 2 像素间距的情况下连接元素。
不要在一个元素与另一个元素相接的位置使用突然截断。
9. 力求一致的视觉重量
图标并排查看时，应具有相近的视觉重量。
匹配 circle 和 square 的视觉重量。
第一个图标太大，最后一个图标太小。
TIP
描边的数量和位置会影响图标看起来的厚重程度。即使描边宽度相同，包含许多紧密描边的图标也可能比更简单的图标看起来更厚重。
将你的图标放在 circle 或 square 旁边，然后同时将两个图标进行模糊处理。你的图标不应比参考图标明显更轻或更重。
10. 在视觉上平衡图标
图标在画布中应看起来居中且平衡。
让图标在视觉上居中。
这个图标感觉偏向左上方。
对称图标应保持几何居中。
不要毫无理由地将对称图标放置在偏离中心的位置。
TIP
几何居中并不总是看起来居中。不对称的形状可能需要进行小幅调整。
将你的图标与 circle 或 square 并排比较，同时进行垂直堆叠比较。如果看起来发生了偏移，就进行调整。
11. 保持低密度
Lucide 图标应具有相近的细节程度。
简化复杂的对象，但保留使其易于识别的特征。
不要添加让设计显得拥挤的额外细节。
TIP
密集区域和紧密的描边会让图标看起来比附近的图标更厚重。
以图标的预期尺寸查看它，并进行模糊处理。变暗的区域可能包含过多细节。
12. 使用平滑、简单的曲线
曲线应尽可能平滑且简单。
尽可能优先使用简单弧线和二次曲线。
不要使用不均匀或不必要地复杂的曲线。
TIP
需要使用三次 Bézier 曲线时，请对齐控制点，以避免出现明显的凸起。
避免使用多余的控制点。它们会使形状更难编辑，并可能产生细小的瑕疵。
13. 针对像素网格进行设计
Lucide 图标在小尺寸下也应保持清晰，包括在低密度显示屏上。
尽可能将坐标、弧线中心和其他几何元素与像素网格对齐。
不要毫无视觉理由地将几何元素放置在像素网格之外。
同时将子元素与像素网格对齐。
不要将子元素放置在网格之外。它们在低密度显示屏上可能会变得模糊。
通常应尽量将每条对角线与像素网格对齐。
避免将对角线放置在网格之外。在低密度显示屏上，它们会显得模糊且在视觉上更宽。
TIP
像素对齐应当服务于图标。不要让它损害形状识别、平滑曲线或视觉平衡。
14. 重用已建立的形状
创建变体时，除非新想法需要改变，否则应保留基础图标的几何结构。
完全按照现有基础图标的样子重用它们。
不要改变基础形状的几何结构、位置或方向。
相关图标应尽可能共享形状和视觉模式。
不加改动地重用现有图标中的元素。
不要重新设计现有元素。
常见的修饰元素和组成元素在整个图标库中应保持一致。
保持附加元素在位置和大小上的一致性。
不要相较于现有图标使用不规则的位置或大小。
TIP
保留基础形状可以让相关图标在用户切换使用时表现得更好。
与现有图标保持一致不应凌驾于清晰度、平衡性或可读性之上。必要时调整形状。
总结
设计 Lucide 图标时：
- 使用带有至少 1 像素安全区域的 24 × 24 像素画布。
- 使用带有圆角线帽和线连接的 2 像素居中描边。
- 使用与大小和几何结构相匹配的一致半径，为尖角添加圆角。
- 不同元素之间，以及在形状内部可能的情况下，保持至少 2 像素的间距。
- 匹配
circle和square的视觉重量。 - 考虑视觉重量，让图标在视觉上居中。
- 保持较低的视觉密度，移除不必要的细节。
- 使用平滑、简单的曲线，避免不必要的控制点。
- 尽可能将几何结构与像素网格对齐。
- 重用现有 Lucide 图标中已建立的形状。
当这些指南发生冲突时，应优先考虑与 Lucide 其余部分的清晰度、视觉平衡和一致性。