If icons are designed 24x24 and you scale them down to 16x16 (you will still need to do manual work and remove some details, lines and adjust stroke) Not all icons that are designed 24x24 will look crisp and clear in 16x16. But a great plugin for setting up a library fast :) good job!
One question, I want to use the icons inside another component with 2 variants (dark e light mode). I create an instance to choose the icon, the problem is the colors, because when I change the icon, the color doesn't is the same as the component definition.
Thank Yuo soo much Antonija 🙏😊 I just have my first steps in figma - tutorials like this are very helpfoul ❤ Good luck with your chanel - looks very promissing 💯
I created it in the same way as variants, but with over 160 icons it became incredibly slow when I wanted to add or edit a variant. Also, variants are not sorted by letter and there is no preview when selecting the instance. I have now found a solution for myself. Partly as shown in the video here (thanks for the great video ), but I don't use a plugin for alignment, but rather autolayout with wrapping. 😃
That's wonderful, i tried it and it worked perfectly. But when i delete the icons from the board, the one i created in in ''Assets'' also deletes, it doesn't stay. What can i do please?
Curious to know if this icon maker plug-in is sharable with others? If I updated some of the icons and added new ones, would others get the updates if they re-downloaded my pack?
This video misled me... I thought I would be able to upload an icon library for other people to download via figma... but it just puts a frame behind the icon you drew.... I would've called it an icon framer rather than an icon library... because I still am not able to easily share icons with others or update the library to have consistency overtime through multiple users in any meaningful way.
This is a utility to help you make a file with icons that you can export aka share as a library within your team (libraries are available on paid tiers of Figma of course)
thank you! How about creating a library icon with option Bold/light stroke or outline/filled icon? Could you please make another video for this content?
You could make that with a few clicks without any plugin. This is more for making a library fast. Even without this plugin Figma has new features that can help creating an icon library from svgs quite fast
@@antonijapek I downloaded fontawesome icons pack and after I push that to figma, the icons are framed with constant height of 512 px but varied width, and the vector child layers are varied... now the plugin is good when we have square sized frames, now I just want to resize the frames to constant WxH and the vectors should also scale respectively... but with the plugin When the child vector resizes the aspect ration gone and the icon sizes and shapes are messed... now used or frame resize plugin to change the width of the parent frame and manually resizing and aligning to the new frames.... this is the background... in info you can share to achieve the above requirement? I'm new to figma... thanks for the response.
@@Designer.Shajeeb i solved it by adding frame to all the icons... then reframing all with frame all plug in then select child frames resize with aspect ratio on... but not an easy choice
Does this mean that we'll have to paste these icons components into every figma file we want to use them in? How does this compare to using the Feather figma Plugin for example?
life is easy when the person who put the icon pack together made the icon properly, meaning the stroke is the same width in all icons and the size of the icons are the same. from a developers perspective i would ask the designer to convert all strokes to fill (outline stroke) because the fill can inherit text color set for the web page. this eliminates the need for css overrides which is always a good thing. an icon that has outlined strokes also scales properly, like a picture. with strokes, when you make the icon 3x larger the stroke shrinks by 3. developer hell :D
Very good observation. Strokes can be made into unified vector in Figma quite easily. I need to check whether it can be done in a batch action, then this step would complete the workflow for making the icon library
Hi Antonija, I am very new to Figma and I struggle to download the SVG file in order to drop it in Figma. Could you please explain HOW i download the SVG file from your Community page?
Hi. This is really great thing to simplify your life. But if you don't mind I would like to know how did you get all those icons all at once in one place? I mean if I want to do the same thing but with different set of icons, for example Iconify, how do I bring them all together in one frame? Manually or there is some other way? Thanks in advance
@@antonijapek I will try a couple of options, but my icons are resized to have same width and height as frame size. Original SVG files differ in height and width.
@@justinasbagdonas7762 I would be more than happy to check what happens with the icons if you would share the file. Maybe the plugin requires some refining as well. :)
Try with different constraints. You will have to try with different options to make it work. Every set is a bit different so it might not work properly
Thanks for the video and the plugin! I found it today and it saved me a ton of time. But I'm trying to wrap my head around the best way to handle coloring the icons. In the video you just give all the vectors a red color, but I'm finding that when I use the components and i'm trying to change the color with overrides, it doesn't go so well. Since each icon can have a different number of vectors, if I set the color overrides and then switch the icon, if the new icon has more vectors, the new vectors have the default color, not the overridden color. How can I reliably color these icon components so even when I swap out icons, the color remains consistent? Would I use the vectors as a mask for a color rectangle? That's how I used to do things in sketch, but it's kind of a mess. Would I group the vectors? Maybe that helps... Any ideas would be appreciated.
It's a little bit hard to visualize what is happening with colors in your situation so if you can share a link or screen record with me I might be able to help
I've also tried the same thing without grouping the vectors and then just applying the color override directly to the vectors themselves in the instance. Same behavior.
I am hoping for a way that I can set a color override for an entire instance of an icon so no matter which icon component I swap in, the whole thing takes the color override. This is especially important for variants which contain icons.
@@antonijapek How would I apply it to the icon itself? When I select the instance of the icon component, I can add a fill (which colors the background) or a stroke (which colors the square border around the icon).
Hi Antonija, you are a very likeable person with great RUclips content :). Just a general question regarding changing icon sizes: Isn't it better to scale icons than just resizing them? Because the icon thickness stays and looks too thick when small at 16x16 e.g. or too thin at 64x64. What do you think? Thank you!! Keep up the great work :)
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Antonija.....you saved me almost a day's worth of work. I have to import about 3000 icons today into Figma for my job...I can not thank you enough 🖤
Happy to help 😋
Been scratching my head for a very long time, Now found the holy grail! Thank you for the well made and crisp video!
4:45 I feel the pain. Thanks for writing this plugin. It makes working on design projects soooooooooooooooooooooooooooo much smoother.
I had to do a library of more than 1000 icons, thanks to you I did this in less than 5 min, you deserve the world! thanks a lot!!
If icons are designed 24x24 and you scale them down to 16x16 (you will still need to do manual work and remove some details, lines and adjust stroke) Not all icons that are designed 24x24 will look crisp and clear in 16x16. But a great plugin for setting up a library fast :) good job!
That is true. Better to use icons designed for a certain size but it all depends what is the format of the icons. Sometimes scaling works.
this video is so helpful, i don't know why i keep coming back to this!
this is actually what i need for years, thank you!
Can't seem to find this plugin please give me a link
This is amazing .... reduces days of work
i need more amazing videos from you
Omg life saver! I’ve been putting it off all day 😆 I will give this a go tonight
Thank you so much for the amazing plugin! I tried and created a library of a huge number of icons in just 5 minutes!!!! 😄
One question, I want to use the icons inside another component with 2 variants (dark e light mode).
I create an instance to choose the icon, the problem is the colors, because when I change the icon, the color doesn't is the same as the component definition.
www.figma.com/community/file/912992763307072611
Preserving colors seems to be tricky in Figma
Shift Enter not working in mac...any other option?
Thank Yuo soo much Antonija 🙏😊 I just have my first steps in figma - tutorials like this are very helpfoul ❤ Good luck with your chanel - looks very promissing 💯
You're so welcome!
Thanks for the video. Am I right that we shouldn't do one icon component with all the icons inside it as a variants?
I mean you can do variants but then you lose drag and hot swap. Whatever feels better and easier for you tbh 🤷♀️
I created it in the same way as variants, but with over 160 icons it became incredibly slow when I wanted to add or edit a variant. Also, variants are not sorted by letter and there is no preview when selecting the instance. I have now found a solution for myself. Partly as shown in the video here (thanks for the great video ), but I don't use a plugin for alignment, but rather autolayout with wrapping. 😃
That's wonderful, i tried it and it worked perfectly. But when i delete the icons from the board, the one i created in in ''Assets'' also deletes, it doesn't stay. What can i do please?
Curious to know if this icon maker plug-in is sharable with others? If I updated some of the icons and added new ones, would others get the updates if they re-downloaded my pack?
This video misled me... I thought I would be able to upload an icon library for other people to download via figma... but it just puts a frame behind the icon you drew.... I would've called it an icon framer rather than an icon library... because I still am not able to easily share icons with others or update the library to have consistency overtime through multiple users in any meaningful way.
This is a utility to help you make a file with icons that you can export aka share as a library within your team (libraries are available on paid tiers of Figma of course)
Best trick ever for icons!
thank you! How about creating a library icon with option Bold/light stroke or outline/filled icon? Could you please make another video for this content?
You could make that with a few clicks without any plugin. This is more for making a library fast. Even without this plugin Figma has new features that can help creating an icon library from svgs quite fast
Really great!! Saved me so much time! Thank you!!
The plugin is not selecting the redundant frame in the latest version of figma.
select all then hit enter 🙂
Hey
I have one question
How to get the size of two icons equal??
Tow icon equal size please
Do you mean the size of the frame or?
@@antonijapek
No icons
Like search icon home icon
@@digitalarvind1 I didn't resize them, they are just placed in 24x24 frame
The pug in is awesome, however, is there a possibility to create some option not to resize or resize with the aspect ration
Can you please explain a bit more?
@@antonijapek I downloaded fontawesome icons pack and after I push that to figma, the icons are framed with constant height of 512 px but varied width, and the vector child layers are varied... now the plugin is good when we have square sized frames, now I just want to resize the frames to constant WxH and the vectors should also scale respectively... but with the plugin When the child vector resizes the aspect ration gone and the icon sizes and shapes are messed... now used or frame resize plugin to change the width of the parent frame and manually resizing and aligning to the new frames.... this is the background... in info you can share to achieve the above requirement? I'm new to figma... thanks for the response.
Yep, that is exactly the problem I faced with Fontawesome and this plugin. it's not resizing as aspect ratio.
@@Designer.Shajeeb i solved it by adding frame to all the icons... then reframing all with frame all plug in then select child frames resize with aspect ratio on... but not an easy choice
Im so glad I found your channel
Legend! Such a good video short and snappy! Will help my work flow so much! Thank you : )
Nice to hear 😁😁
Does this mean that we'll have to paste these icons components into every figma file we want to use them in? How does this compare to using the Feather figma Plugin for example?
If you don’t have paid plan that means you can’t publish libraries so yes, copy paste is the only way to go. I haven’t tried that plugin
Thanks so much for this video
It was really helpful 😌😌😌🤝🤝
Just started playing around with figma today.... I’m not sure what I just did but thank you lol!
No problem, glad my plugin helped
OMG! This video saved my life. Thank you so much!
thank u Miss Lady you help me so much today your video is the best 😁 !
Thank you for this video and your plugin 👍
Thanks for this Antonija!
Thanks I use u plug in all the time 😊
Thank you so much for making & sharing the plugin!
My pleasure!
Using it! Thank you a lot
Awesome! You just saved me so much work, thank you :)
Glad I could help!
life is easy when the person who put the icon pack together made the icon properly, meaning the stroke is the same width in all icons and the size of the icons are the same. from a developers perspective i would ask the designer to convert all strokes to fill (outline stroke) because the fill can inherit text color set for the web page. this eliminates the need for css overrides which is always a good thing. an icon that has outlined strokes also scales properly, like a picture. with strokes, when you make the icon 3x larger the stroke shrinks by 3. developer hell :D
Very good observation. Strokes can be made into unified vector in Figma quite easily. I need to check whether it can be done in a batch action, then this step would complete the workflow for making the icon library
Nice work :-) I would love it if the icons were set to scale/scale in the frame..
They do you need to remove that redundant frame.
@@stuartrussell2859 Your comment saved my life. I started to select one by one, but now is everything done. I love you so much bro
This is fabulous! Really thannks is great and easy to use. You just win one new subscriber. ❤️
Can we give group name icons or components in Library?
Not sure I follow this question
Amazing! Thank you so much for sharing!!! Loving it.
Fantastic. Nice plugin, nice video. Thanks you!!!
Hi Antonija, I am very new to Figma and I struggle to download the SVG file in order to drop it in Figma. Could you please explain HOW i download the SVG file from your Community page?
There is no SVG file at my community page. Usually free (or paid) icon packs you can Google out come in folders and one of these might be SVG
Great Tutorial
hey bro, can you tell me what you font used on the thumbnail.
It's Noway
can we mask a folder with multiple objects in it
Sure, but why would you do it?
I love your energy! New subscriber 🙌🏿
Hi. This is really great thing to simplify your life. But if you don't mind I would like to know how did you get all those icons all at once in one place? I mean if I want to do the same thing but with different set of icons, for example Iconify, how do I bring them all together in one frame? Manually or there is some other way? Thanks in advance
If icons are downloadable, then you can just drag the folder of svgs to Figma
@@antonijapek Okay, thank you
Exactly what i was looking for! thank you, subscribed :)
This is incredible. THANK YOU.
Hey, that looks awesome, what is your plugin called?
You never mentioned it anywhere
Thanks in advance.!
It's in description. Icon Grid Maker
Thank you Antonija, you are my hero!
Where can i download the icons svg folder?
If icon creator provided that, it’s usually behind some download button 🤷♀️
Simply Super!!! Thank you soo much
hi Antonija, i am following this tutorial, and search icon grid maker in figma, i couldn't find it, is it approved by figma yet ?
oh i can find it now when i search under your name, thanks
Thanks "Antonija Pek" your trick really help out ..................
Thank you again! Love your videos!
Thanks Antonija, very useful ! Subscribed!
can anyone help to find the location of this folder where we have all icons, I am new to this design world
When you download icons you should have some folder with all of them, in SVG format preferably.
@@antonijapek thankyou for your quick response
my icons stretch to the size of the frame and loose aspect ratio. But seeing the video they are placed in the center.
Try to use different constraints to achieve the result you expect. You can also share your Figma link with me so we can debug it together.
@@antonijapek I will try a couple of options, but my icons are resized to have same width and height as frame size. Original SVG files differ in height and width.
same here
@@sobeck6900 founded another plugin to do it.
@@justinasbagdonas7762 I would be more than happy to check what happens with the icons if you would share the file. Maybe the plugin requires some refining as well. :)
This is amazing Thank youu
Love you!! thanks for this video
Hey,
Antonija, your plugin is awesome!
Interesting. I guess I would import one type and batch rename like circle / solid. Then same for all other types. (circle / regular, circle / outline)
You're amazing thank you!
Thank you!!! This is AMAZING!!!
The icons become 16x16 and are not resized proportionally. How do I fix that?
Try with different constraints. You will have to try with different options to make it work. Every set is a bit different so it might not work properly
Wonderful! Thank you so much.
Great plugin! thanks a lot.
Please explain a little bit more. The alignment please and how to make customised ones
I need a bit more info 😢 tell me what do you wanna achieve
Is the plugin ready? 👀
Of course. Check description
How to download all that icons together?
Can you explain a but more what are you trying to achieve?
Thanks for the video and the plugin! I found it today and it saved me a ton of time. But I'm trying to wrap my head around the best way to handle coloring the icons. In the video you just give all the vectors a red color, but I'm finding that when I use the components and i'm trying to change the color with overrides, it doesn't go so well. Since each icon can have a different number of vectors, if I set the color overrides and then switch the icon, if the new icon has more vectors, the new vectors have the default color, not the overridden color. How can I reliably color these icon components so even when I swap out icons, the color remains consistent? Would I use the vectors as a mask for a color rectangle? That's how I used to do things in sketch, but it's kind of a mess. Would I group the vectors? Maybe that helps... Any ideas would be appreciated.
It's a little bit hard to visualize what is happening with colors in your situation so if you can share a link or screen record with me I might be able to help
I've also tried the same thing without grouping the vectors and then just applying the color override directly to the vectors themselves in the instance. Same behavior.
I am hoping for a way that I can set a color override for an entire instance of an icon so no matter which icon component I swap in, the whole thing takes the color override. This is especially important for variants which contain icons.
@@JakeDeGrootNY but if you apply a color style to icon itself it should cover all inside. I used it like that and never noticed problems
@@antonijapek How would I apply it to the icon itself? When I select the instance of the icon component, I can add a fill (which colors the background) or a stroke (which colors the square border around the icon).
I love you so much, thanks for this tutorial
great one! thanks a lot 👍🎉😊
awesome Antonija, thank you so much
Awesome plugin!
Nice thanks you so much.
Mega Dope!!
Hi Antonija, you are a very likeable person with great RUclips content :). Just a general question regarding changing icon sizes: Isn't it better to scale icons than just resizing them? Because the icon thickness stays and looks too thick when small at 16x16 e.g. or too thin at 64x64. What do you think? Thank you!! Keep up the great work :)
Hey. Thanks for the the kind words. Default size really depends on icon pack, if you believe they look visually better in different size - go for it!
@@antonijapek ok, will do. Thank you 😊
I can't find Icon grid maker in Menu.:'(
Make sure you go to plugins and search there
great video!
Thanks so much, you are amazing!
Thank you for the video :) The plugin looks quite handy. What is the name of it?
Icon Grid Maker
So simple and easy
THANK YOUUUUUU❤
Awesome! Thanks for share!
Game changer
yup, this is why I love the UX community
you are the best
brutal!!! gracias! ;)
OMG!!!! Thank you
Cool! Thanks!!!
😙 Thank you, thank you
im having issues downloading plug in folder. Did anyone else have issue or can help?
What plugin folder? Can you explain a bit more?
Nuts!
great job ;)
Hvala mnogo za plugin! :)
Nema problema 🙂
where is the FEATHER folder please
You need to download Feather icons which are free. Google it.
Thanks for sharing
Danke!