Lucide

Appearance

Naming conventions ​

Learn how to choose clear, consistent names for Lucide icons.

This page covers word order, modifiers, variants, related icons, and other rules that keep icon names predictable.

Use this when naming a new icon or reviewing a proposed name.

1. Use lowercase kebab-case ​

Icon names must use lowercase kebab-case.

arrow-up-0-1
Do

Use lowercase kebab-case.

Arrow Up 0-1 or arrowUp01
Don't

Avoid other naming schemes.

2. Use American English ​

Icon names must use American English, not local variants.

color, maximize, center
Do
colour, maximise, centre
Don't

3. Name icons for what they depict ​

Icon names must describe what the icon shows, not how someone might use it.

floppy-disk
Do

The icon shows a floppy disk.

save
Don't

Save is a use case.

circle-slash
Do

The icon shows a circle with a slash across it.

ban
Don't

Ban is an action.

TIP

An icon can mean different things in different products. Naming icons by appearance keeps names clear and independent from use cases.

4. Name related icons consistently ​

Icons that belong to the same group must use the <group>-<variant> naming scheme.

The group name comes first. The variant comes after it.

+ badge-plus & badge-check
Do

badge is the group.

+ plus-badge & check-badge
Don't

plus and check are not the group.

5. Describe alternate icons ​

Alternate versions of an icon must be named for what makes them visually different. Do not use numbers just to separate one version from another.

send-horizontal
Do

The icon depicts a horizontal "send" symbol.

send-2 or send-alt
Don't

"send number 2" and "alternative send" are not clear names.

6. Only use numerals when depicted ​

Icon names must not include numbers unless the icon shows the number.

arrow-down-0-1
Do

The arrow points from 0 to 1.

send-2
Don't

The icon does not show the number 2.

clock-3
Do

The hands point to 3 o'clock.

user-3
Don't

The icon does not show the number 3.

Do not use numbers to separate similar icons.

7. Order elements by size ​

When an icon shows multiple elements of different sizes, order their names from largest to smallest.

For an icon containing a circle and a person:

moon-star
Do

The moon is larger than the star.

person-circle
Don't

The person is not larger than the circle.

8. Order equally sized elements by position ​

When an icon depicts multiple elements of roughly equal size, their names must be ordered according to their visual position.

If elements overlap, name them from front to back.

If they do not overlap, name them in English reading order: top to bottom, then left to right.

pencil-ruler
Do

The pencil is in front of the ruler, so it comes first.

ruler-dimension-line
Do

The ruler is below the dimension line, but it is larger, so it comes first.

sun-snow
Do

The sun is left of the snowflake, so it comes first.

ruler-pencil
Don't

The ruler is below the pencil, so pencil-ruler is the correct name.

9. Place modifiers after the element they describe ​

Modifiers must come after the element they describe: <element>-<modifier>.

heart-broken
Do

The icon shows a heart that is cracked.

broken-bone
Don't

The icon shows a bone that is broken, so name it bone-broken.

When an icon has multiple modified elements, each modifier must follow the element it describes.

circle-fading-arrow-up
Do

The icon shows a fading circle with an arrow pointing up inside it.

circle comes first because it is larger than arrow. fading follows circle because it modifies the circle. up follows arrow because it modifies the arrow.

notepad-text-dashed
Don't

This icon shows a dashed notepad with text inside, so name it notepad-dashed-text.

notepad comes first because it is larger than text. dashed follows notepad because it modifies the notepad. text follows both because dashed does not modify text.

Summary ​

When naming an icon:

  1. Describe what you see, not what the icon could mean.
  2. Use American English and lowercase kebab-case.
  3. Keep related icons together with <group>-<variant>.
  4. Describe what makes an alternate unique instead of numbering it.
  5. Only use numerals when they are depicted in the icon.
  6. Order elements from largest to smallest.
  7. If elements are roughly the same size, order them front to back, or otherwise in English reading order.
  8. Place modifiers after the element they describe: <element>-<modifier>.