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!
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. 😃
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
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?
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.
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
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 :)
@@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
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
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)
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?
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?
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).
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
@@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. :)
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.
this video is so helpful, i don't know why i keep coming back to this!
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.
Omg life saver! I’ve been putting it off all day 😆 I will give this a go tonight
This is amazing .... reduces days of work
i need more amazing videos from you
this is actually what i need for years, thank you!
Can't seem to find this plugin please give me a link
Thank you so much for the amazing plugin! I tried and created a library of a huge number of icons in just 5 minutes!!!! 😄
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. 😃
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
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
Hey, that looks awesome, what is your plugin called?
You never mentioned it anywhere
Thanks in advance.!
It's in description. Icon Grid Maker
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)
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
Im so glad I found your channel
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?
Using it! Thank you a lot
thank u Miss Lady you help me so much today your video is the best 😁 !
Really great!! Saved me so much time! Thank you!!
This is fabulous! Really thannks is great and easy to use. You just win one new subscriber. ❤️
Shift Enter not working in mac...any other option?
OMG! This video saved my life. Thank you so much!
Thanks for this Antonija!
Thank you so much for making & sharing the plugin!
My pleasure!
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
Thank you for this video and your plugin 👍
Legend! Such a good video short and snappy! Will help my work flow so much! Thank you : )
Nice to hear 😁😁
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
Awesome! You just saved me so much work, thank you :)
Glad I could help!
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 😊
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
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
Great Tutorial
Thanks I use u plug in all the time 😊
Fantastic. Nice plugin, nice video. Thanks you!!!
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)
Amazing! Thank you so much for sharing!!! Loving it.
Thanks so much for this video
It was really helpful 😌😌😌🤝🤝
Thank you for the video :) The plugin looks quite handy. What is the name of it?
Icon Grid Maker
This is amazing Thank youu
You're amazing thank you!
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
Exactly what i was looking for! thank you, subscribed :)
This is incredible. THANK YOU.
Thank you Antonija, you are my hero!
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
Simply Super!!! Thank you soo much
Thanks Antonija, very useful ! Subscribed!
I love your energy! New subscriber 🙌🏿
Wonderful! Thank you so much.
Nice thanks you so much.
Love you!! thanks for this video
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
Thank you again! Love your videos!
The plugin is not selecting the redundant frame in the latest version of figma.
select all then hit enter 🙂
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).
yup, this is why I love the UX community
awesome Antonija, thank you so much
Thank you!!! This is AMAZING!!!
Can we give group name icons or components in Library?
Not sure I follow this question
Great plugin! thanks a lot.
Thanks "Antonija Pek" your trick really help out ..................
hey bro, can you tell me what you font used on the thumbnail.
It's Noway
Mega Dope!!
I love you so much, thanks for this tutorial
Is the plugin ready? 👀
Of course. Check description
Awesome! Thanks for share!
great video!
THANK YOUUUUUU❤
can we mask a folder with multiple objects in it
Sure, but why would you do it?
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
Awesome plugin!
Game changer
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
great one! thanks a lot 👍🎉😊
Thanks so much, you are amazing!
Cool! Thanks!!!
brutal!!! gracias! ;)
So simple and easy
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
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. :)
Nuts!
Thanks for sharing
OMG!!!! Thank you
Where can i download the icons svg folder?
If icon creator provided that, it’s usually behind some download button 🤷♀️
you are the best
How to download all that icons together?
Can you explain a but more what are you trying to achieve?
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
Hvala mnogo za plugin! :)
Nema problema 🙂
A W E S O M E !!
😙 Thank you, thank you
great job ;)
Tried out that plug-in. Used it for a day, deleted it. It needs some work.
It would be nice to hear what improvements you need so I can work on them 😅
I can't find Icon grid maker in Menu.:'(
Make sure you go to plugins and search there
Danke!