How do I allow swappable icons to take on the shape and of variants they're a part of?

Ask the community
1

I’m building out a design system. I have many icons (which I’ve turned into components) that can be used in a variety of components that may affect the size and color of the icons. I’ve seen other design systems get this to work by creating every possible combination as a variant, but I want to try to avoid that to save time. I’ve tried creating a component with different sized variants for the icons, as well as a component for the different colors. I’ve nested the color component within the size component. When I make an instance of this, I am able to swap sizes and colors, however as soon as I change the icon to one that is not a perfect square, the vector icon stretches out to match the parent frame (which is the component level). I’ve tried messing around with the icon and vector’s autolayout, and huge/fixed settings and etc, but I still can’t get it to work.

Also, there are some boolean layers within the components and that’s because I used the tips described here to get the colors to work so far:

Here’s a screenshot of what I’m working with.
icon-andrew-2 is my color variants
Frame 6 is my size variants with instances of icon-andrew-2.

Any help is appreciated.

icon help wanted figma forum
icon help wanted figma forum2560×1363 144 KB

2

Have you tried using icon containers instead of using the vector drawing to swap? or checked the constraints settings? It would be good to see a recording or a sample file to be able to identify the issue.

3

Hi, Andrew.

How about instead of creating components for colors, use color variables?
Ideally, I wouldn’t maintain the size of each icons as variants and just keep it as it is (make sure it’s in a bounding box—add a frame that wraps the icon so that all of them have the same size, to maintain proportion or else its going to be like how you describe the stretching icon issue).

image
image1692×834 43.4 KB

This is how I maintain my icon set.

As for prototyping it, i just need to nest the icon to another component that has interactions, and create variants from there.