Icon Variables + more! | Master Figma Icons

Build your own icon variable library, create custom icons, swap icon properties, and more! This is the Figma icon lesson you've been asking for.

My favourite icon libraries

----

Videos to help further explain token/variable organization

---

0:32 Icon Variables
7:16 Icon Tips & Tricks
11:52 Working with Unions
15:05 Icon Properties

[milanrdesign]

Great video. I would just like to add, dark/light mode isn't just simply always reversing colours depending on the project. I'd caution designers against thinking it's that simple.

[Underhills]

Very nice, thanks for sharing. Still waiting for Figma to support gradient variables. When they do I'm sure you guys will post a video on it.

[jasonmiller]

Thank you for the video. When you speak of the 100 for colors, are you speaking of the formatting of 950 down to 50? Also, to get the variants in color, are you using a program like Color Impact, which helps you get the various levels of dark down to light?

[cponmtv]

Thank you!

Oddly enough one of my main pain points with icons is sizing. 😅

I have 3 diff sizes for icons. 16, 24, and 32. When used separately and the size property is changed it works perfectly. But when nested in another component, like a text input, changing the size from 16 to 24 does nothing. Why is this?? Is there a constraint that isn’t set properly? Does the icons ability to get bigger/smaller depend on what it’s nested in? This has been a head scratcher because a lot of time went into setting up our icons with multiple sizes but they don’t work inside of other components

[hnoldin]

How do you deal with icon scaling. I have issues sometimes with icons getting stretched or cut off.