Make Icon Library in Figma in Only 5 min

[@adamacevelasquez]

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 🖤

[@antonijapek]

Happy to help 😋

[@mathewskiran4010]

Been scratching my head for a very long time, Now found the holy grail! Thank you for the well made and crisp video!

[@silvershot970]

4:45 I feel the pain. Thanks for writing this plugin. It makes working on design projects soooooooooooooooooooooooooooo much smoother.

[@n4gpal]

this video is so helpful, i don't know why i keep coming back to this!

[@eri_dailylife]

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!!

[@dianaeka3308]

this is actually what i need for years, thank you!

[@tiwasulaiman6777]

This is amazing .... reduces days of work i need more amazing videos from you

[@andilendlovu6398]

Can't seem to find this plugin please give me a link

[@laura_vilela]

Omg life saver! I’ve been putting it off all day 😆 I will give this a go tonight

[@sancoblanco]

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!

[@antonijapek]

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.

[@alinanozik7903]

Thank you so much for the amazing plugin! I tried and created a library of a huge number of icons in just 5 minutes!!!! 😄

[@davemo1401]

Really great!! Saved me so much time! Thank you!!

[@prasadkarmarkar495]

Shift Enter not working in mac...any other option?

[@NiteshMalap-s1m]

Best trick ever for icons!

[@Rizzonho]

OMG! This video saved my life. Thank you so much!

[@Sofia0S0S]

Awesome! You just saved me so much work, thank you :)

[@antonijapek]

Glad I could help!

[@ausome0me]

Im so glad I found your channel

[@suzannebelair6529]

Thank you for this video and your plugin 👍

[@rafales1525]

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 💯

[@antonijapek]

You're so welcome!

[@haenalee8249]

Thank you so much for making & sharing the plugin!

[@antonijapek]

My pleasure!

[@epharimmiracle6724]

Thanks so much for this video It was really helpful 😌😌😌🤝🤝

[@God-T]

thank u Miss Lady you help me so much today your video is the best 😁 !

[@ShimmerandAll]

Just started playing around with figma today.... I’m not sure what I just did but thank you lol!

[@antonijapek]

No problem, glad my plugin helped

[@brunodonato]

Using it! Thank you a lot

[@wengeltesema8724]

Thanks I use u plug in all the time 😊

[@tracyocalllaghan]

Legend! Such a good video short and snappy! Will help my work flow so much! Thank you : )

[@antonijapek]

Nice to hear 😁😁

[@gabqurizen1651]

Amazing! Thank you so much for sharing!!! Loving it.

[@AbdussalamPopoola]

Thanks for this Antonija!

[@TheFaithfulFridaysPodcast]

I love your energy! New subscriber 🙌🏿

[@gideonosekreablorh8374]

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?

[@eotikurac]

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

[@antonijapek]

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

[@mikeball4959]

Fantastic. Nice plugin, nice video. Thanks you!!!

[@Linuuuush]

Exactly what i was looking for! thank you, subscribed :)

[@stuartrussell2859]

Nice work :-) I would love it if the icons were set to scale/scale in the frame..

[@stuartrussell2859]

They do you need to remove that redundant frame.

[@raphaeltadeu1996]

@@stuartrussell2859 Your comment saved my life. I started to select one by one, but now is everything done. I love you so much bro

[@casimirkrupinsky8545]

This is incredible. THANK YOU.

[@rojomen27]

Thank you Antonija, you are my hero!

[@AlexShutyuk]

Thanks for the video. Am I right that we shouldn't do one icon component with all the icons inside it as a variants?

[@antonijapek]

I mean you can do variants but then you lose drag and hot swap. Whatever feels better and easier for you tbh 🤷‍♀️

[@beo30]

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. 😃

[@franciaduque3243]

This is fabulous! Really thannks is great and easy to use. You just win one new subscriber. ❤️

[@skylawgaladriel5588]

Thanks Antonija, very useful ! Subscribed!

[@abdulrahmanhashem3426]

Great Tutorial

[@maianhnguyen9683]

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?

[@antonijapek]

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

[@TutoDS2014]

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.

[@antonijapek]

www.figma.com/community/file/912992763307072611 Preserving colors seems to be tricky in Figma

[@ruiparada]

Thank you again! Love your videos!

[@rajusp89]

Simply Super!!! Thank you soo much

[@angelicojohnrago2878]

This is amazing Thank youu

[@designjourney2]

Love you!! thanks for this video

[@borisjovanovic1653]

Thank you!!! This is AMAZING!!!

[@helalimam5713]

Thanks "Antonija Pek" your trick really help out ..................

[@rukminikotamraju]

Wonderful! Thank you so much.

[@blaineschwab7432]

You're amazing thank you!

[@kaisinzinger5521]

great one! thanks a lot 👍🎉😊

[@stuartrussell2859]

The plugin is not selecting the redundant frame in the latest version of figma.

[@stuartrussell2859]

select all then hit enter 🙂

[@raphaelnogueira4412]

I love you so much, thanks for this tutorial

[@77Arham]

Great plugin! thanks a lot.

[@raghothamharish2283]

The pug in is awesome, however, is there a possibility to create some option not to resize or resize with the aspect ration

[@antonijapek]

Can you please explain a bit more?

[@raghothamharish2283]

@@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]

Yep, that is exactly the problem I faced with Fontawesome and this plugin. it's not resizing as aspect ratio.

[@raghothamharish2283]

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

[@kendallwilliams2784]

Hey, that looks awesome, what is your plugin called? You never mentioned it anywhere Thanks in advance.!

[@antonijapek]

It's in description. Icon Grid Maker

[@gabriellahong6485]

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?

[@gabriellahong6485]

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.

[@antonijapek]

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)

[@IMzz12]

THANK YOUUUUUU❤

[@honeylavender1122]

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?

[@antonijapek]

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

[@adagli]

awesome Antonija, thank you so much

[@Nadiia_kot]

Thanks so much, you are amazing!

[@zaforiqbal1256]

hey bro, can you tell me what you font used on the thumbnail.

[@antonijapek]

It's Noway

[@scottfwalter]

Awesome plugin!

[@ladayaremenko4134]

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]

If icons are downloadable, then you can just drag the folder of svgs to Figma

[@ladayaremenko4134]

@@antonijapek Okay, thank you

[@mariazielinska1147]

Hey, Antonija, your plugin is awesome!

[@antonijapek]

Interesting. I guess I would import one type and batch rename like circle / solid. Then same for all other types. (circle / regular, circle / outline)

[@stevenhines4211]

Is the plugin ready? 👀

[@antonijapek]

Of course. Check description

[@katiehoang2954]

yup, this is why I love the UX community

[@princeisaac5177]

Nice thanks you so much.

[@memoinanci5984]

Hi Antonija, you are a very likeable person with great KZbin 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]

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!

[@memoinanci5984]

@@antonijapek ok, will do. Thank you 😊

[@digitalarvind1]

Hey I have one question How to get the size of two icons equal?? Tow icon equal size please

[@antonijapek]

Do you mean the size of the frame or?

[@digitalarvind1]

@@antonijapek No icons Like search icon home icon

[@antonijapek]

@@digitalarvind1 I didn't resize them, they are just placed in 24x24 frame

[@amentotech5163]

can we mask a folder with multiple objects in it

[@antonijapek]

Sure, but why would you do it?

[@printempo202]

Thank you for the video :) The plugin looks quite handy. What is the name of it?

[@antonijapek]

Icon Grid Maker

[@DM-DesignsInMyUniverse]

Can we give group name icons or components in Library?

[@antonijapek]

Not sure I follow this question

[@JakeDeGrootNY]

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.

[@antonijapek]

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

[@JakeDeGrootNY]

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.

[@JakeDeGrootNY]

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]

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

[@JakeDeGrootNY]

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

[@PauloOrtega]

Awesome! Thanks for share!

[@user-cw5ro6tk5t]

So simple and easy

[@ismailoladoja8492]

Where can i download the icons svg folder?

[@antonijapek]

If icon creator provided that, it’s usually behind some download button 🤷‍♀️

[@taniavaideanu]

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?

[@antonijapek]

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

[@benvsantos]

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 ?

[@benvsantos]

oh i can find it now when i search under your name, thanks

[@girolamosansgiannatempo9672]

great video!

[@raunar.7036]

😙 Thank you, thank you

[@andreagarcia5149]

brutal!!! gracias! ;)

[@Neosouleskimo]

Mega Dope!!

[@elizfikret7489]

The icons become 16x16 and are not resized proportionally. How do I fix that?

[@antonijapek]

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

[@justinasbagdonas7762]

my icons stretch to the size of the frame and loose aspect ratio. But seeing the video they are placed in the center.

[@antonijapek]

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.

[@justinasbagdonas7762]

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

[@sobeck6900]

same here

[@justinasbagdonas7762]

@@sobeck6900 founded another plugin to do it.

[@antonijapek]

@@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. :)

[@raunar.7036]

Game changer

[@darconny]

Hvala mnogo za plugin! :)

[@antonijapek]

Nema problema 🙂

[@jaminizam9450]

How to download all that icons together?

[@antonijapek]

Can you explain a but more what are you trying to achieve?

[@windunes]

OMG!!!! Thank you

[@khalidaosmanova830]

you are the best

[@sonikaprasad2510]

Please explain a little bit more. The alignment please and how to make customised ones

[@antonijapek]

I need a bit more info 😢 tell me what do you wanna achieve

[@iralizard]

Cool! Thanks!!!

[@susisuuu9]

A W E S O M E !!

[@kokoesulay-bf2sg]

I can't find Icon grid maker in Menu.:'(

[@antonijapek]

Make sure you go to plugins and search there

[@SHAHIDAHMADKPHDDES]

can anyone help to find the location of this folder where we have all icons, I am new to this design world

[@antonijapek]

When you download icons you should have some folder with all of them, in SVG format preferably.

[@SHAHIDAHMADKPHDDES]

@@antonijapek thankyou for your quick response

[@gretarthorgudjonsson965]

great job ;)

[@JoxnieD]

Nuts!

[@dansolo360]

Danke!

[@MRJK-]

Thanks for sharing

[@maurojr19851]

where is the FEATHER folder please

[@antonijapek]

You need to download Feather icons which are free. Google it.