How to setup Button component with varying icon sizes?

Ask the community
1

Hey Figma & friends! :wave:

I need your help because I’ve run out of ideas when building Button components.
For a project I have to figure out how to effectively integrate nested icon components with different sizes.

I already built quite complex Button variants containing options for type (primary, secondary, …), color, size (large, medium, small), icon (left, none, right) and state (normal, hover, active, disabled etc.). But I could not solve different icon sizes properly.

See this screenshot for more explanation:

button-problem
button-problem992×1371 86.7 KB

Looking forward to any new ideas!

Cheers :smiling_face:

2 Likes
2

Add an Auto Layout container for the icon instance with “Hug content” settings, and set the icon instance to “Fixed width” and “Fixed height”.

3

I’ve already tried that but unfortunately, that doesn’t work either.
The icon still keeps the original components size values.
It seems the width and height cannot be changed as an override.

4

It’s possible. Could you share a link to the file?

You can also use the forum search where icon resizing is discussed and where you can find sample files.

Here is an example file with variants:

2 Likes
5

Ohhhhhh! :exploding_head: The icon component itself must be set as an auto-layout container!
I only tried it with a surrounding auto-layout frame inside the button where I placed icon components inside.

Now it works – thank you very much! :tada:

For anyone interested and wondering, here is the link to my example file:
https://www.figma.com/community/file/1076162448890469900/Button-component-with-nested-icon-in-varying-sizes

6

It’s not obligatory. You can also see this example:

This example was built as I wrote here:

7

I’ve tried this today and it did not work for me.
But I think I also found out why.

In my situation I have Icons with different with I want to swap.
This works fine (regardless if the icon itself has autolayout or not) until you nest this icon into another master component.

It also seems to make a difference wether the icon is a vector or a union.

If its a vector your method worked perfectly.
With the icon being a vector I had to use the autolayout frame at the icon component already - otherwise it would not work.