How to pick perfect icon libraries

Hey, what's going on guys? We're going to talk about how to pick icon libraries, specifically how to pick a good icon library for your next design project. Alright, so I have open over here compose icons. Now this is just a little project that combines a bunch of different icon libraries and I just have this open here so I can show you a bunch of different icon libraries, what the icons actually look like, the subtle differences between them and just discuss how to pick a good icon library right so if you go over here you have a bunch of different libraries like material icons loose side icons you have bootstrap icons and a bunch of others right we don't need to go through all of them the point is simply this there are tons of different icon libraries out there to choose from right and you need to pick the best one for your project for your brand because picking a good icon library can greatly enhance your designs right so a lot of times picking the right icon library can just come down to the brand and what kind of like brand you're actually building for right so for instance hero icons over here hero icons is very rounded very playful kind of icons right you can see over here that the corners are very rounded right you don't have any sharp edges which you would have in something like material icons right or something like bootstrap icons so first of all let me just go through a couple of uh general tips for picking icon libraries avoid first of all avoid using multiple icon packs all right stick to just one icon pack because if you use more than one icon packs throughout your design throughout a single page it's just going to give a very inconsistent amateurish kind of look so avoid that and just stick to one single icon library ideally for your entire project right now sometimes you can't avoid it sometimes you're looking for a specific icon that isn't available in your icon library and you you have to use a different icon library, right? In those situations, yeah, you can do it, but just try to avoid it, right? So try to just stick to a single icon library for your entire project just so you can have a consistent icon palette and a consistent design right secondly prefer to use large and comprehensive icon packs right something like for instance you can see over here material symbols has more than 3 000 icons to pick from right whereas hero icons over here only has 300 reddix only has 318 right so make sure you pick something that has a lot of icons so you have a bigger like choice to pick from right because otherwise you're going to have a problem where you're looking for a specific icon to represent some specific state and you just can't find it in your icon library right because there's just not that many icons to pick from right so try to pick something try to pick an icon pack that has a lot of icons for you to choose from right so you don't ever feel constricted by the limited choices or anything so over here in this example I have three different icon packs, right? I have all of them rendered over here so we can go through them. So let me just zoom in so I can show you the specific issues, the specific differences that we need to go through, right? Ignore these issues, they don't mean anything. First of all, I just want you to look at all three of these icon packs up here and just notice the subtle differences between all of them, right? You can see, for instance, that material icons and bootstrap icons have very sharp corners, right? Whereas if you look at Lucite, it has very rounded corners, right? In all of these icons. So just subtle differences like these can really make or break your design. So you need to make sure that you're sticking to a single icon pack, a single icon library, so you don't have these minor inconsistencies between your icons, right? You want to have a consistent icon palette, if that makes sense. This is why consistency matters and this is why you want to use the same icon library ideally or just very similar ones and you want to be very consistent with your icon usage. Now down here in the final row I have combined all three of these icon packs. So the first one is material and this delete icon is from bootstrap and this last one this pencil icon is from lucide right Now it might be a bit difficult to notice these subtle differences between all three icons but they are inconsistent right each of these icon libraries was designed by some different designers who had different ideas and different like ways to use them so just try to use a single icon library just to have the consistency throughout your design right now moving on from this i want to talk about the two types of icons that we have so we have svg icons which are better obviously and we have font icons. So let me show you some examples. Now over here in this compose icons website all the icons you see over here are going to be SVG icons and I will always recommend you to use SVG icons over font icons and I'll explain why. So basically you can grab any icon from over here you can copy the SVG and paste it in here right and if I show you this code over here yeah you can just paste a bunch of SVGs over here to represent the icons. Now these are SVG icons you can easily customize them you can easily change the size of the icon the width the height anything you want i will say avoid resizing icons too much but svgs are very very customizable so that's definitely a plus point whereas font icons if i show you um if i show you something like font awesome so this is a website where you can get a bunch of font icons right and font icons are basically just like a font family but a custom font family that basically instead of having letters it has icons right so if i can find a search page or something over here yeah see so you have all these different icons over here and in order to use them you use this i element right so this these are font icons and i will always say do not use them svgs are just much better much easier to use much more customizable flexible and you can even animate them right even animating svgs is much more simpler than these font icons right and font awesome also has svg options but they're locked behind their pro plan as you can see which i'm obviously not gonna pay because who cares right but yeah try to use svgs instead of font icons because they much more customizable much easier much more flexible and you can even animate them right Now finally try to use icon packs that offer different states of the same icon right So something like outlined, filled, etc. Now, if I go over here to material icons, you can see that we have outlined icons, we also have rounded, we also have sharp. So, we have different styles of the same icons, right? And this can be very useful and provide a lot of flexibility in your designs. So, if I I have a very simple example over here in filled states. There we go. Let me comment this one and Uncomment this one and then save And Let me go and reset the zoom a little bit about this much. So basically this is just a little comment element like you have a forum and you have some comments or you have some blog post or something or a video or something or whatever and you have a bunch of comments below that right the what I want to show you is just this like button over here right so in almost every single like button that you see across the web how it works is you have an unfilled outlined icon like this one and if you press it and you like the actual post or comment or whatever it turns into a filled icon right so you have different kinds of icon states to represent different things in your app, right? Outlined icons can represent inactive states, whereas filled icons can represent active states. So this is just a very basic example of what I mean. But basically, try to pick icon packs that offer different kinds of icon states for the same icons so that you have this kind of flexibility in your designs, right? And you can then just use these different icon states to represent different kinds of things in your app, right? It just gives you a lot more flexibility in your designs. That's all. But with that being said, that is all of the tips I wanted to share. Hopefully these help you to pick better icon libraries or just a single icon library for your next design project. Have fun. Thank you for watching. Like, subscribe. If you want to work with me, check out my website. Link in the description. And yeah, that is all. Thank you for watching and bye-bye.