Filled versions of icons

[tryoxiss]

I know this has been suggested before and it was refused because the fill: property does the same thing, but it dosent always. For most (probably 60-70% of the icons) it works great, no issues there. But it does break quite a few (notably the file/foleder type icons)

(fill: currentColor)

And you can make th stroke/color to transparent, but I think that does more harm than good:
(fill: currentColor; color: transparent)

I'm not sure if theres an easy fix to this, or if it would require a lot of work. But it would be nice for those icons that break to work when you set a fill, so it looks good even with those.

[jd-solanki]

I do want to use lucide icons in my lib - Anu but due to missing filled icons. I am using another icon lib.

[nandorojo]

This would be awesome. Icons like ticket don't have a clear way to add this.

[tryoxiss]

@nandorojo yeah I didn't know how hard it would be, in the case of ticket I think it works well enough to be useable when its just filled but there certinly are some that seem tricky.

[nandorojo]

yeah tbh it probably requires making new icons

[tryoxiss]

Yeah... if someone were to do that, how would they do it? Would it be a seperate SVG or would there be a way to modify it so it works with just the fill property?

[tryoxiss]

Ok, my proposals suck. I thought they looked good... until I saw what karisa came up with literally next reply, which is a million times better. As a designer of non-vector things I can't believe I missed the visual weight issue despite being glaringly obvious, but I did.

THE FOLLOWING is only kept for archival pourposes. These were simple prototypes made with my VERY LIMITED vector graphics ability. See the above message for more information.

---

I did a bit of work on what I imagine some of the icons looking like when filled, and came up with some basic design rules for it.

1. if the icon consists of one or more, large, non-intersecting shapes, fill fill them.
   
   
   

2. if the icon is one large shape, with smaller ones inside, fill the inner items -- this one im not sure about, the alternative is to fill it and make the inner bits transparent, but thats complex and im dumb and couldn'tfigure out how to do that.
   
   

3. If the icon consists of two large disctinct sections, fill whichever feels more right, generally the larger one -- also not sure abt this one
   
   

4. if the icon is a large shape, with missing/sections in them, leave them transparent.
   (White parts are ones that I imagine to be transparent)
   

5. if the icon contyains the cross, ignore it in your design and follow the otrhewr ruiles
   

Still not great and needs a lot of refining, but even with my terrible SVG-ing abbiluty I still think it they look really good, and using the exisitng icons would be much less work than a new icon set like some people said. Its still editing almost every icon, but much more manageable.

EDIT: Ok, SOME, like home, will probably need to be a new SVG but the vast majority is either just adding fills or fixing stuff. Don't really want to work on this until I have come up with cleaner guidelines for what/how and a better idea of when to use transparancy and what looks better with it, etc. Looking at font awesome stuff to see what they do with that and I will reply to this thread with something more updated later:tm:.

[karsa-mistmere]

Some of these suggestions are no brainers, but some I'm not quite sure about:

Column 1: our current icons
Column 2: @tryoxiss' proposal
Column 3: alternate approach A
Column 4: alternate approach B (same as Col3 if missing).

I think Col4 is the sure winner here, since:

• Col2 adds too much visual weight to certain elements
• Col3 will introduce some unpredictable clipping where elements meet.

[tryoxiss]

Yeah, looking at proper versions I agree that column 4 is 100% better. And yeah, column 4 is defintely better than column 3, since in the image-cross one it creates a weird small filled area and I can imagine that will happen with other icons too.

[tryoxiss]

Ok, I spent some time trying to put the changes in column 4 into words and I think I have some rules for it:

Forgive the probably bad termonolgy, I have very limited experince with vector graphics and icon design.

General Rules:

1. Fill all shapes within the icon
2. If any lines exist within the icon, make then cutout/transparent instead of solid. Bring them outside of the shape if they go to the edge, make them extend out to make a clean line.
3. If two icons would inserset, identify the main object (e.g., the pencil in the edit icon) and surround it with a transparent stroke.

Alternate Approach A:
4. If lines within the shape form thier own isolates shape (e.g., the sun and mountian in row 3 column 4), make it and its outline cutout. But make sure to keep any surrounding outline around them, such as in the picture icon.

Alternate Appraoch B:
4. If lines within the shape form thier own isolates shape (e.g., the sun and mountian in row 3 column 4), make its outline cutout, but keep the inner part filled. Exrtend it past to penetrate any surrounding border lines.

[karsa-mistmere]

Closed as duplicate of #815. Continue discussions in #458