Hi Figma Community!
Basically, I have a bunch of one size icons as variants in a component - they all have an auto layout frame applied to them.
I want to use the icons throughout my design, but in different sizes. However, I don’t want to create varying sizes within the main component, as there would be too many icons and it would look messy.
So what I normally do is:
- Create another test component using the icon with another element (for example, with a CTA here)
- Scale the icon using the scale tool (larger as an example here)
- Then instance swap it and it usually adheres to the new scaled size that I give it.
However, recently, this method hasn’t been working and the instance just retains the same size as its original parent varient.
*As a note, the icon starts scaling properly if I detatch the instance. Which ideally I don’t want to be doing, as I may have changes to the test component that I need reflected throughout the file.
Can anyone assist in finding why this is, that would be much appreciated!
Hi @Tommy_Dinh ,
I see in our backend that you have already filed a ticket to our support team and they have replied you. Feel free to send them a copy of your file so they can try to replicate.
Do not hesitate to share a quick video of the issue so we can better visualize the issue! 
what was the outcome to this as I am having the same issues
The Figma team have told me it’s a known issue James, but they haven’t created a solution as of yet.
I think it has something to do with the complex nature of the icons itself (they were made in Illustrator with many separate vector parts), because if I use icons from the Google Materials plugin, instance swap honours to the new scaled size.
I am having the same issue. I have made a set of icons – based on the Material Icon set, but renamed and adjusted for my needs. When I use an icon in a component set, for example for a header component that has different sizes for small, medium and large, when swapping the icon in the instance the size of the icon doesn’t change. The content ‘box’/frame’ is the same size but the icon inside reverts to the original icon component size. Not sure I have explained that correctly. The icon ‘vector’ inside reverts to the original component size within a correctly resized component ‘frame’. Not sure what I am doing wrong.
If I use the Material Design icon set directly, it keeps the size but not my colour changes! Also I don’t want so much padding inside my icons for alignment purposes so this isn’t workng for me either!
I have fixed it for my purpose, basically the icons were strokes so I had to flatten them, and then make sure the icon itself was set to scale as well as the component frame set to scale. Now it works.
1 Like
Awesome Karen, thanks for letting us know!
