Hello Community, I cannot seem to quite find a thread that already discussed this. I have build a small set of Icon components in different sizes. Hence icon and font size differ between lg, md and sm.
Apart from that I have icons on another page in my library all as components in size 30x30px. Icon size in lg button is 24x24px all icons, when switching icons there it seems to fit the 30x30px icon perfectly into the button without increasing size.
But when I add an icon into the md or sm button the icon is visibly larger than the 16x16px that I have set up in the component. Does anyone have an idea what that could be and why the icon doesnt automatically adhere to the given size in the button component? Appreciate any and all support and tips.
Thank you for getting in touch. To the best of my knowledge, the feature you’re asking about appears to be unavailable currently. However, you can create variants for each size and switch between icons as needed!
That being said, it is possible that I might have overlooked something, so I’d greatly appreciate it if other community members could contribute to this discussion in case I’ve made an error.
I’ve actually figured it out. So to make an icon component automatically adjust to your design component.
Let’s say a button, the icons constraints have to be set to scale. I also made the icon component of an auto layout frame. Not sure if that is mandatory.
But that made it all work. One icon set now fits perfectly in several components regardless of their size.