@Alina_Trussova I put together this example file to a similar question, on how one could address button+ icon scaling, swapping and coloring. Hope it helps 
I wish Figma had focused on fixing this in their recent Little Big Updates series. This annoys me on a daily basis…providing the swappable nested components in different sizes might be a workaround, but it is not a solution (and in most cases not an option for me). I can’t wait for the day to come that this is getting fixed.
It looks for me that they did fix it. At least in the beginning of the week I erased all workarounds (separate component with manually scaled stroke) and it seems to be working as expected. Maybe latest update will help?
Thanks for your support!
I fixed it with @tank666’s solution and it worked very well for me for couple of months. Now Figma fixed the issue, so I can finally continue building it without unnecessary complexity.
EDIT: I managed to get the desired behaviour in one component, but the bug still exists! Hope Figma fixes it soon.
1 Like
I am seeing the same behaviour that @Preston_Lewis described in his video.
I have a bunch of components where I want to incorporate icons e.g. a button component which has sizes large, medium and small. I have a whole lot of icon components that are all the same height but different widths.
In the button component I can put an instance of an icon component and scale it so that it’s the right height for that button size.
When I create an instance of the button it looks fine, but as soon as I swap the icon that is displayed, I run into problems:
- If I have the icon components set to autolayout, the replaced icon is displayed at full size instead of scaled. It honours the aspect ratio of the original icon but is the wrong size.
- If I have the icon component without autolayout but with scaling on for the content, the replaced icon is scaled to the size of the original icon. Since my icons are different widths, they get stretched
In both of these scenarios there does not seem to be any way of fixing the issue in the instance either.
Is there any way for me to get it working so that the swapped in icon maintains the scaling that was applied in the button component with the icon maintaining its own aspect ratio, or failing that, is there any way I can scale the replaced icon instance in the button instance?
Yes please! I have a quite a complex component with 3 variants that I need to use in marketing layout masters with vastly different resolutions, so in most of these the component instance is resized using the scale tool. But when I wish to swap the instance variant, it switches back to the original size of the component, it doesn’t keep the scale I gave it. That is really frustrating. I can work around it IF I have only text with auto layout (change the sizing, paddings ect manually), but I also have vector graphics in these components that I’m unable to resize by hand, while keeping the instances intact 
+1 from me.
This is a real headache in my everyday workflow. Currently forced not to use components or keep unnecessarily huge component sets which affect performance…
Hey! How did you get the solution here? I saw that you put that Figma made an update, but I’m not seeing what you’re talking about.
Hi Miller! Sadly, the problem still exists.
I had the same issue, and now it works for me…thanks for the tip 
+1 from me.
This would be really useful.
Not sure if this has been resolved yet, but I was struggling with this today and found the solution. Went back to a material icon set to see how they set it up. For me the problem was I had auto layout applied to the Nested logo component or holding container. Here is my solution:
— Card component (either fixed or hug, doesn’t matter)
— Nested logo frame fixed at 24px square (fixed, no auto layout applied, set to “scale”)
— Logo artwork
Unbelievable the fact this still an issue on August 2024!
Anyway guys, I found this workaround that helped in my use case(Scaling without messing up with Stroke proprieties from nested components), check it out:
