Fill icons #458
Replies: 9 comments 5 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 check-circle-2 and x-circle-2 and the other complete circles and squares. |
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.
-
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