图标设计原则

¥Icon Design Principles

在为 Lucide 制作图标时，应遵循以下规则以保持质量和一致性。

¥Here are rules that should be followed to keep quality and consistency when making icons for Lucide.

1. 图标必须设计在 24 x 24 像素的画布上。

¥ Icons must be designed on a 24 by 24 pixels canvas.

2. 图标在画布内必须至少有 1 像素的内边距。

¥ Icons must have at least 1 pixel padding within the canvas.

3. 图标的描边宽度必须为 2 像素。

¥ Icons must have a stroke width of 2 pixels.

4. 图标必须使用圆角连接。

¥ Icons must use round joins.

5. 图标必须使用圆角端点。

¥ Icons must use round caps.

6. 图标必须使用居中描边。

¥ Icons must use centered strokes.

7. 形状（例如矩形）的边框半径必须为

¥ Shapes (such as rectangles) must have a border radius of

A. 如果尺寸至少为 8 像素，则为 2 像素

¥A. 2 pixels if they are at least 8 pixels in size

B. 如果尺寸小于 8 像素，则为 1 像素

¥B. 1 pixel if they are smaller than 8 pixels in size

8. 不同元素之间必须有 2 个像素的间距

¥ Distinct elements must have 2 pixels of spacing between each other

9. 图标应具有与 circle 和 square 相似的视觉体积。

¥ Icons should have a similar optical volume to circle and square.

提示：将图标放置在圆形或方形图标旁边，并对两者进行模糊处理；你的图标不应该比基本形状暗太多。

¥Tip: place your icon next to the circle or square icon and blur them both; your icon should not feel much darker than the base shape.

10 . 图标应以其重心为中心进行视觉居中。

¥. Icons should be visually centered by their center of gravity.

提示：将图标放置在方形或圆形图标的上方/下方和旁边，并检查其是否偏离中心。对称图标应始终与中心对齐。

¥Tip: place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center.

11 . 图标应具有相似的视觉密度和细节层次。

¥. Icons should have similar visual density and level of detail.

提示：尝试对密集元素进行抽象。模糊你的图标，模糊后不应显得过暗。

¥Tip: try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark.

12 . 连续曲线应平滑衔接。

¥. Continuous curves should join smoothly.

提示：确保使用圆弧或二次曲线。使用三次曲线时，控制点应具有镜像角度以获得平滑曲线。

¥Tip: make sure to use arcs or quadratic curves. When using cubic curves control points should have mirrored angles for smooth curves.

13 . 图标应力求像素完美，以便在低 DPI 显示屏上清晰显示。

¥. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.

提示：尽可能将元素和圆弧中心与网格对齐。

¥Tip: whenever possible align elements and arc centers to the grid.

命名约定

¥Naming conventions

1. 图标名称使用小写短横线命名法。例如：使用 arrow-up 代替 Arrow Up。

   ¥Icon names use lower kebab case.\ For example: arrow-up instead of Arrow Up.

2. 图标名称使用国际英语名称，而不是本地变体。例如：使用 color 代替 colour。

   ¥Icon names use International English names, as opposed to local variants.\ For example: color instead of colour.

3. 图标的命名应基于其所描述内容，而非其用例或所代表的含义。例如：floppy-disk 代替 save，circle-slash 代替 ban。

   ¥Icons should be named for what they depict rather than their use case or what they represent.\ For example: floppy-disk instead of save and circle-slash rather than ban.

4. 属于某个组的图标命名为 <group>-<variant>。例如：badge-plus 基于 badge。

   ¥Icons that are part of a group are named <group>-<variant>.\ For example: badge-plus is based on badge.

5. 备用图标的名称应该体现备用图标的独特之处，而不是使用编号。例如：使用 send-horizontal 代替 send-2。

   ¥Icon names for alternate icons should represent what makes the alternate unique instead of being numbered.\ For example: send-horizontal instead of send-2.

6. 不允许使用包含数字的名称，除非数字本身在图标中表示出来。例如：arrow-down-0-to-1 包含两个数字。

   ¥Names containing numerals are not allowed, unless the number itself is represented in the icon.\ For example: arrow-down-0-to-1 contains both numerals.

7. 如果图标描绘的是多个不同大小的元素（例如，一个人和一个圆圈），则必须按大小递减的顺序列出这些元素。例如：如果圆圈较大，则应为 circle-person；如果人物较大，则应为 person-circle。

   ¥Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\ For example: if the circle is bigger, it should be circle-person, if the person is bigger, it should be person-circle.

8. 如果图标描绘的是多个大小大致相等的元素（例如，ruler 和 pencil），则必须按从前到后的顺序列出这些元素，以防一个元素在另一个元素之前，否则必须按英文阅读顺序（从上到下，从左到右）列出。例如：如果 pencil 位于 ruler 的前方、上方或左侧，则应为 pencil-ruler；否则，应为 ruler-pencil。

   ¥Icons depicting multiple elements of roughly equal sizes (e.g. a ruler and a pencil) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).\ For example: if the pencil is either in front of, above or left of ruler, it should be pencil-ruler, otherwise, it should be ruler-pencil.

9. 描述元素某种变体的图标必须使用 [element]-[modifier] 命名方案，并为每个元素分别应用修饰符。例如：虚线圆圈必须命名为 circle-dashed，而不是 dashed-circle。根据之前的指南，包含破碎心形的虚线圆圈应命名为 circle-dashed-heart-broken，因为心形比圆圈小。

   ¥Icons depicting some sort of variation of an element must use the [element]-[modifier] naming scheme, with modifiers being applied to each element respectively.\ For example: a dashed circle must be named circle-dashed, not dashed-circle, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named circle-dashed-heart-broken, due to the heart being smaller than the circle.

代码约定

¥Code Conventions

在将图标添加到库之前，我们希望拥有可读且优化的 SVG 代码。

¥Before an icon is added to the library, we like to have readable and optimized SVG code.

全局属性

¥Global Attributes

对于每个图标，这些属性都会根据上述规则应用。

¥For each icon these attributes are applied, corresponding to the above rules.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <!-- SVGElements -->
</svg>

最小化路径

¥Minify paths

路径代码有时会变得非常长。为了减小文件大小，我们希望压缩代码。我们建议使用 Lucide Studio 将路径整理到 3 个点的精度。

¥The code of paths can sometimes get quite large. To reduce file size we like to minify the code. We recommend to use Lucide Studio to tidy paths to 3 points of precision.

允许的元素

¥Allowed elements

SVG 文件只能包含简单的路径和形状元素，这些元素除了大小和间距之外不能包含任何其他属性。实际上，只允许使用以下元素和属性：

¥SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.\ In practice only the following elements and attributes are allowed:

• <path d>

• <line x1 x2>

• <polygon points>

• <polyline points>

• <circle cx cy r>

• <ellipse cx cy rx ry>

• <rect x y width height rx>

这也意味着不允许使用任何变换、滤镜、填充或显式描边。

¥This also means that no transforms, filters, fills or explicit strokes are allowed.

切勿使用 <use>。虽然有时这似乎是优化文件大小的好方法，但一旦 SVG 嵌入 HTML 文档，就无法确保引用的元素 ID 是唯一的。

¥Never use <use>. While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.

JSON 元数据描述符

¥JSON metadata descriptor

每个添加的图标还必须附带一个匹配的 JSON 文件，其中列出了该图标的标签和类别。请使用以下模板：

¥Each icon added must also come with a matching JSON file listing tags and categories for the icon. Please use the following template:

{
  "$schema": "../icon.schema.json",
  "contributors": [
    "github-username",
    "another-github-username"
  ],
  "tags": [
    "foo",
    "bar"
  ],
  "categories": [
    "devices"
  ]
}