Lucide

Appearance

On this page

Icon Design Principles ​

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

Summary of the rules we have ​

  1. Icons must be designed on a 24 by 24 pixels canvas.
  2. Icons must have at least 1 pixel padding within the canvas.
  3. 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) in icons must have border radius of 2 pixels.
  8. Distinct elements must have 2 pixels of spacing between each other.

The Rules Visualized ​

1. Icons must be designed on a 24 by 24 pixels canvas. ​

24px-24px

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

1px-padding

3. Icons must have a stroke width of 2 pixels. ​

2px-stroke

4. Icons must use round joins. ​

round-joints

5. Icons must use round caps. ​

round-caps

6. Icons must use centered strokes. ​

centered-strokes

7. Shapes (such as squares) in icons must have border radius of 2 pixels. ​

2px-border-radius

8. Distinct elements must have 2 pixels of spacing between each other. ​

2px-element-spacing

Code Conventions ​

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

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.

Global Attributes ​

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

xml
<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 ​

Code of paths can get really big. To reduce file size we like to minify the code. We recommend to use the SVGOMG to minify paths.

JSON metadata descriptor ​

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

json
{
  "$schema": "../icon.schema.json",
  "tags": [
    "foo",
    "bar"
  ],
  "categories": [
    "devices"
  ]
}