Working with devs to have all or naming align - can not wrap my head around naming all our icons the same name, and not a name that aligns to naming best practices.
Am I the only one that struggles with whether icon components need to be all the same consistent size or not?
It seems that no matter how many things I try…IF I want to be able to swap icons, my icons need to be positioned inside of a same size component.
In other words, if I have a circle icon that is 44px, everything is great. BUT, if I swap that icon for a chevron icon that is 44px x 24px, then the swapped icon STILL inherits the size set in the component (the one where the icon is used). This means my chevron is stretched tall to 44px x 44px instead of the correct size.
My solution? Has always been that I make ALL icon comonents at 44px x 44px. And the chevron just gets centered in there.
That works…or USED TO WORK? Now, with DevMode, when a developer inspects that icon, they are misled in seeing it as 44px x 44px. NOT the correct 44px 24px.
No matter if the icon components and vectors in my library are all set to SCALE or not…it does not make a difference. And there is no alternative to “hug contents.” It is unclear, and anyone who writes articles and tutorials just glosses over this stuff and we are left to just figure it out.
So which is it Figma? Do we make icon components all the same size? Or is there some magic way to make them stay scaled properly on swap?
1 Like
Hi, There
One thing I would like to know what’s is best practice to add stoke inside, centre, Outside in ‘‘Outline icons’’?
In general, all icons should have the same size (visual boundary and padding area included) to ensure easier control on cases like this.
For this case, you got it a bit backward; the component design should’ve respected the icon’s size first, as in adjust the rest of the component’s elements’ specifics (margins, spacing) to said icon.
Unless, the use for that particular component was highly specific, like iOS’ back button in the navigation bar. The chevron/arrow icon itself is non-standard (as it was a font icon rather than a regular icon in the guideline), and it wasn’t used anywhere else; only in similiar usage of ‘back button’. For this, just separate the icon from the whole set and make a separate, specific component for that particular case.
It depends on your styling, but in general, keep it in center since it’ll be much easier to control visually.
Also, when you export it to SVG, by keeping it to center you can ensure that the strokes will be kept as strokes instead of shapes, thus minimizing its sizes and complexity.
Hey there! I would like to know. Is there any reason why some libraries opt for not optically align the Chevron icons? I see that for example, on Google’s Material Symbols, they are not optically aligned (at least on Figma’s plugin, I noticed this detail by adding a fill to the 24px Icon and rounding it’s corners to 9999).
I would like to know the reason if anyone knows. Is it a proper practice? or just google’s shenanigans?
Hello Abraham!
I am dealing with this question currently.
I feel like Figma is stellar when dealing with outlined icons. I’ve always worked with outlined, flattened icons (24 and 16 since I need them in both sizes). However… there is a specific dev in the team who wants pixel perfect icons in both sizes so he demands outlined icons for the open source project.
However… as you said, smaller icons can get hard to read if they’re reduced with the same line weight.
What I’ve been doing is:
- Outlined icons mostly, in two sizes: 16 and 24.
Pros: Super easy to manage on Figma.
Cons: some of them have weird lines when outlined + less “flexible” if their weight/design needs to be changed. According to the dev who required them: they’re not crisp enough since they might not sit perfectly on the grid. - Stroked icons are “crispier”, but are a PAIN to manage on Figma: since it is not a single vector, overwriting the colour values is very hard since some parts of the icon will fill with colour when it shouldn’t.
So… I still haven’t find my answer lol. I guess that “it depends”?
If you want to modify/adapt stroke is gold. If you’re sure you’re ready to roll with them and you will not change them, then flatten them.
I hope I could help in some way.