Auto-generated transcript 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 lucite 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 the 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 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. And if I show you this code over here, 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 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 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 fonts 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 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 outlined icons can represent inactive states whereas filled icons can represent active states so this 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 this kind of flexibility in your designs right and you can 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