Icons seem to violate ICON_DESIGN_GUIDE

[samuelmtimbo]

Hi! I am new to lucide! I really like the concept of Open Source icons and lucide's design specifically.

I noticed some icons don't seem to follow the ICON_DESIGN_GUIDE correctly.

Also, there are some cases which do not seem to be addressed by the guide.

Let me try to explain:

GREEN: "circle" is correct;

PURPLE: "thumbs-up" also seems correct by the guide, although I'd argue it should be centralized in the canvas (by moving it just a bit to the right);

YELLOW: "plus" and "x" seem too small; I'd say they should be scaled up to their maximum allowed space;

ORANGE: "triangle" seems off by a tiny fraction;

RED: "volume-x", "voicemail" and "user-x" touch the edge of the canvas, violating the 2nd rule of the guide ("Icons must have a 1 pixel padding within the canvas.")

I believe this is important because these nuances can be spotted in the UI, specially when the icons are used as buttons in a row/column like this:

I think PURPLE can be addressed by adding a new rule to the guide on the lines of "icons must be center aligned on the canvas".

Similarly, YELLOW could be addressed by adding an "icons must take all available space" rule;

ORANGE and RED should probably be worked on case by case.

What do you think?

[ericfennis]

@samuelmtimbo Thanks for mentioning this! And a warm welcome to the Lucide community!

It is known that some icons are violating the design guide. The reason is that the design guide was written later then when the icons where designed. So we need to refactor some icons. The past year we already redesigned these icons: settings, all phone icons, wifi, all the cloud icons, thermometer. and probably more icons. So we are improving in some ways, but it always more exciting to add new icons then redesign/refactor existing icons.

To go a bit in depth on your findings: PURPLE: I think we can improve this by extending the line a bit so it is aligned. Aligning it just in the middle can create blurry pixels on low resolution screens. So it is better to keep it on the 24x24px grid. ** YELLOW**: I think the icons are fine. I'm not in favor for "icons must take all available space" rule. From a design perspective: the icons are in this way more balanced and uniform with the other icons. Otherwise it some icons can look "oversized". ORANGE: This not perfect, but this one is really hard to get perfected. I think it is not that high priority, but we can try to fix this. RED: I agree, these icons are too big, and can be really easy fixed.

[samuelmtimbo]

@ericfennis thanks for the prompt answer!

After thought, I think you are right about YELLOW.

I guess we can leave this issue open to represent the sum of all deviations from the guide; we can also maybe use it to catalogue the problematic icons later on.

KUTGW!

[btzr-io]

2. Icons must have a 1 pixel padding within the canvas.

Italic icon has 3 (top, bottom ) and 4 (left, right ) pixel padding

[schmidt-oliver]

2. Icons must have a 1 pixel padding within the canvas.

These Icons are currently to large: award, coffee, coins, cpu, credit-card, crop, delete, dollar-sign, eye-off eye, github, map-pin, map, mic-off, mic, paperclip, shopping-cart, toggle-left, toggle-right, trending-down, trending-up, umbrella, user-check, user-minus, user-plus, user-x, users, video-off, video, voicemail, volume-x, watch, youtube, zap-off

[ghost]

most of the old icons definitely need a refactor

[ericfennis]

@karsa-mistmere is doing a really nice job.

Progress:

• [x] award
• [x] coffee
• [x] coins
• [x] cpu
• [x] credit-card
• [x] crop
• [x] delete
• [x] dollar-sign
• [x] eye-off
• [x] eye
• [x] github
• [x] map-pin
• [x] map
• [x] mic-off
• [x] mic
• [x] paperclip
• [x] shopping-cart
• [x] toggle-left
• [x] toggle-right
• [x] trending-down
• [x] trending-up
• [x] umbrella
• [x] user-check
• [x] user-minus
• [x] user-plus
• [x] user-x
• [x] users
• [x] video-off
• [x] video
• [x] voicemail
• [x] volume-x
• [x] watch
• [x] youtube
• [x] zap-off

[karsa-mistmere]

I'll close this as most faults raised by this issue have already been addressed.

While surely some other violations still remain, we'll deal with those if and when the need should arise.