Fill icons #458
Replies: 10 comments 6 replies
-
It would be great if something like this could be achieved with an attribute (i.e. Related to #826 in a potential attribute that would fill an existing icon. Not sure that this would work for all, but inside a bordered container, perhaps it could invert the icon. i.e. |
Beta Was this translation helpful? Give feedback.
-
Where can I get icons for free? |
Beta Was this translation helpful? Give feedback.
-
Closed #893 #407 in favour of keeping all discussions related to filled icons here. |
Beta Was this translation helpful? Give feedback.
-
I would like to bump this, fill icons are very useful. |
Beta Was this translation helpful? Give feedback.
-
We could construct certain icons in a slightly different way, and do something like—for example with <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"
>
<path class="lucide-fill" d="M12 22s-8-4-8-10V5l8-3" />
<path class="lucide-hide" d="M12 22V2" />
<path d="m12 2 8 3v7c0 6-8 10-8 10" />
</svg> which looks exactly the same, by default: Then, optionally just have something like this in your CSS, to activate the fill version: .lucide-fill { fill: currentColor }
.lucide-hide { stroke: none } resulting in: Some kind of What do you guys think? cc: @ericfennis @jguddas @karsa-mistmere |
Beta Was this translation helpful? Give feedback.
-
@mittalyashu You would want to add the |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
It would be great to have these at least for icons such as circle-check and circle-x and the other complete circles and squares. (update with new icon names and links) |
Beta Was this translation helpful? Give feedback.
-
What if Lucide used Tabler's filled icons as a starting point. Tabler seems to use the same fundamental rules as Feather/Lucide. https://github.com/tabler/tabler-icons/tree/main/icons/filled I'm curious why there's never been a discussion of lucide and tabler merging the icon libraries with the substantial overlap |
Beta Was this translation helpful? Give feedback.
-
I've been having a play-around with how certain icons could be filled, including the edge-case ideas mentioned above: https://codepen.io/jamiemlaw/pen/WNqwQpG/782fa485aa0c544b06557d4e0aac47c9 It uses the same tactic as @karsa-mistmere's https://jsfiddle.net/cgd9a3h0/1/ by filling in parts of the icon and then using a mask to invert the strokes. I really like that as a concept. However, I'm not using classes, but instead hardcoding the fills and strokes, and treating the filled icons as separate entities to their outline counterparts. For icons like For details like the clock on the calendar or the heart on the book, I considered making these filled too, but I kinda prefer them as strokes. |
Beta Was this translation helpful? Give feedback.
-
This discussion is about creating fill icons.
Here's the creation of
home
icon with fill mode.The above svg code is not optimised
Beta Was this translation helpful? Give feedback.
All reactions