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.
Build a community profile + join the community: www.uicollecti...
Resource library: resources.uico...
Request a design system audit: www.uicollecti...
My favourite icon libraries
iconists.co/ce...
pikaicons.lemo...?aff=bdzGd
----
Videos to help further explain token/variable organization
Guide to naming + setup: • Master Figma Tokens & ...
Build a variable library: • Figma Variables Setup:...
---
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.

[@UICollectiveDesign]

Thank you! & really great call out! Agreed - there's so much more to dark mode than what people think

[@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.

[@UICollectiveDesign]

Gradient variables are also supported! Will indeed be filming a vid on this soon :)

[@jasonmiller6381]

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?

[@UICollectiveDesign]

Yup! That is the formatting I am referring to :)
+ for the variants, we are not using a specific program right now.

[@jasonmiller6381]

@@UICollectiveDesign Thank you kindly. I am still stumped with the 950-50, as the colors to me are not levels similar to percentages. Thank you UI Collective.

[@cp3onmtv963]

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

[@UICollectiveDesign]

It could depend. It's hard to tell without knowing your particular use-case, and how your components are structured

[@monostorizsolt2472]

Full beginner here, its just a guess
Do you want to use different size icons on different screen sizes? If yes than maybe mode could be a solution for you. Creating as many size variables as needed and depending in screen size it can pick up which to use?

[@UICollectiveDesign]

@@monostorizsolt2472 Absolutely, modes are a great solution!!

[@monostorizsolt2472]

@@UICollectiveDesign great to hear 😊 i try to make a good start by creating modes for everybreak points and collect evert "measurable" variables there, from text size to padding, stroke width than to adjust these for the right amount for every screen detail so i can design responsively from the start.
If i were to create dark mode too, than i belive i should create 2 aliases and divide variables to alias_color and alias_sizes? As colors wont change from screen size changes, neither sizes from dark/light mode
Im reading google material design to get some info, however, i wonder is there any guidance for text size/padding/ etc depending on screen size/functionality? Im trying to search everywhere but no avail so far.
Thanks

[@hnoldin]

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

[@UICollectiveDesign]

Are each of your icon frames to start an identical size? Ex: 24x24

[@hnoldin]

@@UICollectiveDesign Yeah I found that having the vector shape on scale scale sometimes works but depending where it is being placed it can be squished or cut off based on the auto layout that the icon is in. That’s where I always get confused. Do you think it is necessary to create multiple size variations like 8x8 16x16 24x24. Or is there a way to use variables and to map them somehow.

[@cp3onmtv963]

yup, same!@@hnoldin

[@nazaradana1252]

@@hnoldin I am having the same problem, all the icons are the same size and same components, when i use scale i can change the size easily, but when i swich icons like from chevron to a trashcan, the new icon is always with the size determined in the design system, i just wanted a way to create the sizes, and be able to swap the icons and they have the personalized size, and not having to create every size of every icon

[@nazaradana1252]

Dude i just solved this problem, you create separated components for each icon, then you create a component named size, and using one of the icons, you can duplicate and change the sizes scaling, after that you change the names of the instances (exemple small medium and large), but here's the trick, all the separated icon components, have to be in absolute position, this way you can make them scale vertically, and horizontally, and make sure to lock the w and h as well so they don't get twisted, this way when using the size component, you can change the size, and to change the icon you just have to click one more time, so you can change the icon component frame, i dont know if you got this but i hope it helps, and if you already solved this but in a different way i would love to know how!