Fill icons #458
Replies: 17 comments 13 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.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
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.
-
|
This is great! My only problem with using lucide-icons at the moment is the lack of filled icons. My ThoughtsIn my test i noticed a few things. Many icons work quite well out of the box, some need some extra attention. Here is a preview of what I have so far: Icons with open endsEspecially icons that have open ends would need some adjustment. Here is my attempt at solving some of those open end icons:
Icons with no fill possibleSome icons like arrows and similar stroke icons simply don't have a good way to have a filled version. In those cases I would leave all them the same but outline them (convert the strokes to an outline).
Scaling IconsScaling with stroke icons is different than scaling with filled icons.
Anyway those are my first thoughts around this topic and i would love to actively push this further. |
Beta Was this translation helpful? Give feedback.
-
|
One thing I feel pretty strongly about is that filled icons should not be a full separate Lucide set, but instead a group of icons that are pretty much an integral part of the core package(s). Firstly, this leaves plenty of room for our filled icon set to grow without the need for forcibly having to add and maintain multiple different variants of the same icon. And more importantly: not all icons need a filled variant to begin with, in fact a lot of our icons are based on lines that cannot and need not be filled. |
Beta Was this translation helpful? Give feedback.
-
|
Yes I definitely agree. However what do you think about consistency between using filled icons and also mixing them with stroke icons? I am afraid that the scaling could become an issue when using both next to each other.
I do think this could also be done programmatically. Icons that don't need to be filled, could automatically be outlined for the filled version. Another issue I see if we wouldn't be doing this, is the problem on how to address the icons in code. Let's say we wan't to only use "filled" icons in our project and therefore use the |
Beta Was this translation helpful? Give feedback.
-
|
Handling the diffrent stroke widths are certinly a challange. In the seccond example, you say strokes are equal (which they likely are), but notably don't feel equal since they are diffrent visual weight. One way to handle it may be to use stroke for those stroke like elements, but that has its own host of problems (notably having it scale disproportianly, possibly having the lightning intercept the cloud). As for code, you could make them proxy each other. For example if you set the fill attribute and request a stroke only version due to it being only lines, the request will return the stroke version. EDIT: I see three additional categories of icon that need attention, beyond the ones with gaps Slashed/
|
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.
-
|
These look great, although the gem and raincloud look a bit funky in perhaps not a good way. |
Beta Was this translation helpful? Give feedback.
-
|
how can i fill an icon with a tailwind variable? |
Beta Was this translation helpful? Give feedback.
-
|
This is a dicussion about adding filled versions of the icons. For some icons, you could use the |
Beta Was this translation helpful? Give feedback.
This comment was marked as spam.
This comment was marked as spam.
-
|
especially thumbs up/down. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
does anyone have any progress on this? |
Beta Was this translation helpful? Give feedback.
-
|
Very much still in the proof-of-concept stage; don't expect official support for filled icons any time soon. However, if you have experience working with SVGs, you can certainly take inspiration from this thread and implement them yourself in your project. Here's an example of a how you could make a custom filled house icon in React:
// my-custom-filled-icons.js
export const houseFilled = [
[
"path",
{
"d": "M5 21a2 2 0 0 1-2-2v-9a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2h-3a1 1 0 0 1-1-1v-7a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1z",
"fill": "currentColor",
"key": "1xsl9c"
}
],
];// App.jsx
import { House, Icon } from 'lucide-react';
import { houseFilled } from './my-custom-filled-icons;
const App = () => {
return (
{isHomePage ? <Icon iconNode={houseFilled} /> : <House />}
);
};
export default App;Or vanilla SVG <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 d="M5 21a2 2 0 0 1-2-2v-9a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2h-3a1 1 0 0 1-1-1v-7a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1z" fill="currentColor" />
</svg> |
Beta Was this translation helpful? Give feedback.
-
|
@jamiemlaw How to fill the "users-round" icon? <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"
class="lucide lucide-users-round-icon lucide-users-round"
>
<path d="M18 21a8 8 0 0 0-16 0"/>
<circle cx="10" cy="8" r="5"/>
<path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/>
</svg> |
Beta Was this translation helpful? Give feedback.
-
|
Personally, I'd cap off the bottom of the front user before filling it in. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! But is it normal that the second user in the background remains unfilled? |
Beta Was this translation helpful? Give feedback.
-
|
Greatest |
Beta Was this translation helpful? Give feedback.
-
|
some time an icon is on an surface whose color can change based on its state like active, hover etc in that case we need to fill in the icon, most of your icons already support filling, some has issues like the hand icon raised her |
Beta Was this translation helpful? Give feedback.
-
The same issue is happening to me now with the Tag and Tags icons: https://lucide.dev/icons/tag Filled just shows a single dot. The icon is going over an image and I can't control what the background will be. For this reason, I want it to be filled so it stands out in more instances. |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone, |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
This discussion is about creating fill icons.
Here's the creation of
homeicon with fill mode.The above svg code is not optimised
Beta Was this translation helpful? Give feedback.
All reactions