Ready for a @figmadesign pro tip?
Use an `IconWrapper` to nest icons in your components.
That way you can always resize your icons without having to detach components, hide layers, or add additional variants.
Here's how it works 👇
Use an `IconWrapper` to nest icons in your components.
That way you can always resize your icons without having to detach components, hide layers, or add additional variants.
Here's how it works 👇
This is how I build my .base—Button component:
Two hidden icons on the left and right of my text that I can unhide as I need them.
The problem is...
If I need different icon sizes across my components, I have to hide multiple icon sizes in my .base 😠
Two hidden icons on the left and right of my text that I can unhide as I need them.
The problem is...
If I need different icon sizes across my components, I have to hide multiple icon sizes in my .base 😠
The solution...
Introducing the `IconWrapper` 💪
I simply insert an icon from my icon library and duplicate it once for each of the sizes I need (ex: 16px - 20px - 24px).
I then turn these into new main components and combine as variants naming it `IconWrapper`.
Introducing the `IconWrapper` 💪
I simply insert an icon from my icon library and duplicate it once for each of the sizes I need (ex: 16px - 20px - 24px).
I then turn these into new main components and combine as variants naming it `IconWrapper`.
That way, for every nested icon, I have a variants menu that allows me to switch between sizes!
Maximum flexibility without having to clutter my layer list with a bunch of hidden icon sizes or requiring multiple base components and losing overrides.
Maximum flexibility without having to clutter my layer list with a bunch of hidden icon sizes or requiring multiple base components and losing overrides.
IconWrappers are particularly valuable in responsive design!
If you simply insert an `IconWrapper` from the beginning, you can easily scale down icons as you move to smaller breakpoints without having to detach your component.
If you simply insert an `IconWrapper` from the beginning, you can easily scale down icons as you move to smaller breakpoints without having to detach your component.
Simple as that!
One of those tiny little hacks that makes a huge difference and I'll use in every project forever and ever amen.
One of those tiny little hacks that makes a huge difference and I'll use in every project forever and ever amen.
If you’ve ever had to detach a component to change the icon size, help another designer out by sharing the first tweet 🐣
https://twitter.com/ridderingand/status/1426980974961643521
• • •
Missing some Tweet in this thread? You can try to
force a refresh
