Okay so this is an icon component. And I’m using Rogie’s trick to preserving the icon color by nesting the icons and creating a union. But the union is making the icon look like this.
This is the layers. The “Change-Color” is the union and this is where I apply the colors and inside is the “Icon-Base-Regular” which is another component composed of multiple icons.
If it’s only the “Icon-Base-Regular” the icon looks fine.
I never wanted to use the union trick in the first place since it’s nesting another icon which makes everything complicated and dirty. But I got no other choice.
Each icon is enclosed in a frame just to keep the 24 x 24 px ratio. The frame itself is the variant component. And inside the frame are vectors, I stayed it that way so I can adjust the stroke anytime. As you can see here:
Before you say it, I already read your other reply to my post that it was not recommended again, it sucks because I don’t know that it was “what your supposed to do” I just followed this design system where they made one component for different icons.
This is theirs and they’re selling their design system on Gumroad so I thought it was a good way of doing it:
Unfortunately, you haven’t shown what your problematic “Notification bell” icon consists of so that I can reproduce it.
Most likely, the outline of this icon runs over another or breaks altogether, which is why such an effect appeared in the union. Try to flatten this icon. I think this should help.
You’d better have two options for icons:
Editable;
Flattened (for design use).
Check out the example I created for you:
The left part of the file contains icons, in which there from 1 to 4 vector paths (layers).
The right part of the file contains icons, in which there is 1 vector path (layer), obtained by flattening (Cmd / Ctrl + E).
As you can see, the “test” frame has problems with the icons on the left. In them, the stroke thickness of only two of the four vector paths has changed. This is because the “base-icon-1” component contains an icon with only two vector layers, while the “hash” icon has four of them.
Chill out with your wordings:
“Unfortunately, you haven’t shown what your problematic “Notification bell” icon consists of…” that’s so freaking rude. I wasn’t able to share a file because I don’t know how I’m new to Figma.
I already told you, I already tried flattening the icon vectors.
I also tried converting the “Outline stroke”. Still no luck.
I really don’t like bothering people the only time I posted here on the forums is because I’ve wasted so much time already for this that I’m delaying the team.
Alyssa, thanks a lot for the file. And excuse me if I seemed rude to you. Without this icon, I was unable to recreate this effect.
I looked at your file and found a solution, which is to edit the vector path of the icon. Edit the vector nodes (with the Bend tool) shown in the screenshot below.
