How to use an IconWrapper in Figma

[@sharonmathews1687]

Thank you! I'm a total newbie to Figma so this tutorial had me going down a rabbit hole learning what all the different Figma terms meant! I've now emerged from the rabbit hole knowing a lot more than when I went in! Thank you again. I'll be checking out your other videos as well.

[@ridd]

That's the measure of success right there :)

[@Jen-ec6mj]

This is awesome! Thank you so much, I struggled a lot when switching between prototypes for different views.

[@skylartkitchen]

I was struggling with this for too long. This is a fantastic solution- thank you!

[@ridd]

Good I'm glad it helped!

[@TheNaramo]

Awesome! This is almost what I was looking for :D I tried setting this up with icons that are still strokes and not outlines and then resizing of the icons doesn't work properly, as in the stroke thickness won't adjust properly. Do you have a tip on how to solve that besides creating outlines?

[@delizade]

This channel is one of the best. Thank you for those very useful tips and guides.

[@ridd]

Appreciate it!

[@siau-jiunlim2691]

Awesome explanation! Straight forward without unnecessary babahah... love it! Thanks for making such as good quality videos!

[@ridd]

Appreciate the encouragement :)

[@megaroeny]

I'm so happy to see I'm not the only one trying to do something like this! 😆 Thank you for making this. 🙏 The other thing I need to check that I'm unsure of is if the icons we use will be pixel fitted when scaling like this. For example, we are planning to use the Phosphor icon library. It would be awesome if I only needed to import one size in Figma and have those pixel-fit still at each size needed, when scaled within the wrapper.

[@chidorirasenganz]

As long as its an svg it’ll work fine

[@delizade]

Wonerful workflow, thank you so much for this!

[@imjawads]

Question: With new Figma updates is that possible to keep one source for icons and having multiple sizes and can swap them from one source to any size?

[@DinaKaruniaRamadhan]

Hey, I'm wondering about the layers under the icon. Do you "outline the stroke" to make it a single vector or do you keep using strokes? I've tried using strokes, but the icon wrapper doesn't maintain the stroke thickness consistently. When I resize it to a larger size, the stroke thickness stays the same as the original size instead of adjusting to the wrapper size. Any tips on that?

[@i8ET]

thank you so much for this! it was super helpful!

[@PrahladKumar-xf6zq]

Nice vid. Thank you so much.

[@ridd]

You're welcome!

[@neil78]

Great info, was recommended by a third-party to follow this method. I'm a little late to the party but have a question about the actual icon sizing. Typical scaling as you mentioned might be something like 16, 20, 24 for an 8-pixel grid. When doing this, those dimensions are not for the icon itself but rather the frame, right? I have my 16px icons wrapped in a 24px frame so to get S, M, L I'd have to use the frame sizes and do 24, 32, 40 right? Or is the 16 the frame size and not the actual icon size? Thanks!

[@AliRushSongs]

Very informative i hope you get a lot of following man

[@noise7940]

great, thank you ridd!

[@chiragpatel3242]

Hi Ridd, Your content really help me...but I don't know how to add 100 icons into single library?

[@ridd]

I highly recommend checking out the "Phosphor" library + Figma plugin if you haven't already. I rely on that for the vast majority of my icons. Once you find one you want to use in your UI. Insert that into your icon library file and create a new component (I make sure they are all at 16px). That way, you can easily switch between all of your icons directly within your IconWrapper as long as any one of them is embedded. Here's a good article on using icons if you want to go deeper - www.uiprep.com/blog/ultimate-guide-to-using-icons-in-figma

[@Atractiondj]

This works only for outline icons but doesn't work for stroke icons!

[@dao.808]

EXCELLENT! thank you a lot!

I'm wondering how it could work when you have a set of icons instead. I tried to follow your tutorial, but I'm not able to make it work in a large scale environment. Any tips?

[@ridd]

When you say set of icons, are you talking about an icon library of components? In that case, by wrapping any icon component in an IconWrapper, you can automatically swap it with any other icon in your library (while still getting all the resizing functionality baked in)

[@mbarr]

How can we get this to work for icon fonts? Desperate here. Usiong icon fonts (FontAwesome) in our design system allows us to update all the icons quickly when they do new releases.

[@ronaldviernes1135]

How do you persist style overrides for icons with variants using the "naming your icon layer 'icon'" as you showed @ 5:00? I tried to do this method, but can't get it to keep color override when switching to an icon with variants.

[@ridd]

It's almost always an issue with naming if you're seeing this behavior. Make sure your icons have consistent layer names and that within your IconWrapper you are overriding the nested icon name - twitter.com/Ridderingand/status/1474401366604873728?s=20 Lmk if that unlocks something or not!

[@ronaldviernes1135]

@@ridd ty for the reply, i'll look into this more and let you know :)

[@edengildesign6423]

Hey Ridd! great video, this is really helpful. one question I have is how do you structure a button in figma with the 2022 component properties new features. When using the wrapper component it's impossible to create an icon swap property. Any input on that subject will help as I'm trying to narrow our DS and wanted to use the wrapper component in the buttons but I don't wanna lose the icon swap option that's very comfortable. Thanks!

[@ridd]

So I would definitely keep the `Icon` swap at the parent level using component properties. Unfortunately, until there's variant swapping... it doesn't make much sense to expose the IconWrapper at the parent level because you're never going to replace that with another component. I do think variant swapping will be a thing (more here - twitter.com/Ridderingand/status/1526232023383150593) which will be awesome because then you can control both the size and the nested icon directly from the parent level

[@edengildesign6423]

@@ridd thanks for the reply. I hope it's gonna work in the future as my developers are using wrappers too. BTW the link you shared leads to "a page that doesn't exist"

[@ridd]

@@edengildesign6423 Whoops lol twitter.com/Ridderingand/status/1526232023383150593?s=20&t=9nJmP3UV7SPq9eVEeX9JzA

[@chandima94]

Why not just use the scale feature?

[@NoContentVlogs]

This is good! but i have a problem which is....my stroke weight is also changing according to it? what to do?

[@ridd]

I definitely recommend "flattening" your icons to a single layer (I think that's cmd + opt + o). This way they scale proportionately AND your color overrides will always persist because you'll never be in a situation where you're swapping one icon with 1 layer with another icon that has multiple layers.

[@NoContentVlogs]

@@ridd Great! Thanks

[@CarlosAndresVelasquez]

Ridd, I dont see how we can swap instances on the icon wrapper? Say I have a chevron thats wrapped around an icon wrapper, the sizing works well. When I go to change that icon for another icon, the wrapper breaks and I can no longer resize the other icon. I dont see how that can be solved for with the icon wrapper I created.

[@ridd]

Are you swapping the IconWrapper for an icon? Make sure you're hitting enter to select the icon itself and then swapping that layer for another icon (not the parent wrapper). If you do that (and your layer name in the IconWrapper is just "Icon") then it should work.

[@AdeelKhan-rs9ng]

How to deal multiple icons . Should we put all the icons in iconwrapper? In that case what would be the better naming convention

[@ridd]

Nope you only need one icon in the IconWrapper! And it really doesn't matter which one it is. Because you can just hit "enter" to select the nested icon and then use the menu to change it to whatever icon you'd like.

[@AnneSong-d8u]

Thankssss

[@Irakli008]

You’re a god.

[@ridd]

Hah idk about that but I’m glad it helped 😇

[@noahhendrickson7076]

I can successfully make the icon wrapper but i think im failing at making icons because they get strectched and lose their proportions when put into the wrapper. Would love some advice :) (im pretty sure i just need help with icon design / making my icon into a component)

[@ridd]

Without seeing, my hunch is that perhaps your icons arent all in uniform square frames? Double check that and feel free to send a file over :)

[@ratsuns2828]

Im running into issues without the colors persisting for the icon. It seems like as soon as I change the size it will revert to its icon root name. Edit: I solved the styles persist issue and this strategy can still work.

[@ratsuns2828]

@Harshesh Sayani yes I figured it out

[@camlikesbikes]

When he says "break it" at 5:17, is he detaching the instance? How do you break it? I'm a noob, go easy.

[@playbak]

yeah Detach instance

[@playbak]

Great concept, unfortunately IconWrapper will not maintain icon color overrides between different states (variants: enabled, hover, disabled, etc.) once the size or icon itself is swapped. Even with all know override preservation techniques-meticulously matching all layer names down to the flat vector AND having the icon set an unused tertiary color. Desired icon color is maintained only if size is changed within the same state (not changed between states), or the icon is not changed within your component. e.g: • Enabled + icon size md -to- Enabled + icon size lg = ok • Enabled + icon size md -to- Hover + icon size md = ok • Enabled + icon size md -to- Hover + icon size lg = broken (defaults to icon set color) • Not swapping the icon in the component = ok As it stands the limitations severely restrict use cases. If anyone finds a fix to this please share, as this technique working to full effect would be amazing!

[@underscoreroa]

wasted a lot of time before stumbling on this video. now I need to find out if flattening icons will cause issues with definition/sharpness (i.e. will it pixelate)

[@dharmraj92]

Too good thankyou @ridd