Hey, everyone, welcome back.
So one thing that we often forget about is something like our assets, like icons.
Now icons are very important.
We created our own icons in this course and we've also found different types of resources that give
us a bunch of icons.
And these icons are definitely based off of our feather icon resource, which you can find right here.
So these icons are based off of that.
And I've taken all the icons I need for this application and I've broken them into two things.
Two different sizes, twenty four pixel icons and 16 pixel icons.
Now, you may not need to, depending on how you set your icons up, you could just resize them if you
really need to.
But what I've done here is I've split them up just to make it easier for you.
Now, I've also included several failed versions, so, I mean, if there's a heart, let's turn off
our grid, because each of these is on a grid.
So if we take off our grid over here, you will notice that we have like a heart that is filled or like
a zap icon or just like a star.
And this helps us really like if we're creating interactions with icons and we need to fill them, this
really helps.
So you don't necessarily need, like, massive icons set with like four hundred different icons.
I personally use the icons that I'm going to use within the application, I may have a couple extras
just in case, and that's totally fine.
And you can continue just adding to this.
This is my icon system right now, and I'll show you how I went in and built it.
So I have different sections.
This is how I've named them.
I have outlined twenty four pixel.
And just that is where the artwork is within.
And then I've actually here I will show you what I've done, so if I take this, there's this disconnect
of.
This is my icon, and I've just taken it and created it as a component of the option, commend K. I've
named it whatever I want to name it.
So I've been using this naming convention for my icons just to split them up between twenty four pixels
and 16 pixels.
And now, whenever I want to use it, if I go into my assets section.
You'll see that I have it split up over here.
Let's change that for one second.
OK, so this is my outline twenty four pixel arrow, you'll see that, see it selected now let's just
delete that and it won't show up there my ass at section.
But I have my iconography split up by 16 pixels and then I have filled an outline, 16 pixels and the
same for the 24 pixels.
And if I wanted to say get twenty four pixel outlined icon, I can see all my assets right here.
And this is why I split it up just like this.
It's perfect.
You can just grab I want a home icon and just drag it into whatever file you're using.
And if I wanted to change that icon and I will show you how I've used this within other components,
I can just go into my instant section over here and it'll automatically give me a related component
if I'm in twenty four pixels per say, if I want to use like 16 pixels, I can do that to.
I can change it like that and just like that, we have icons that we can easily use within other components,
not even with other components, but just within a file, if we need to grab something quick, it keeps
everything in one place and neatly sorted.
So these are the icons I've decided to go with, you can tell they're more rounded, more playful,
kind of like how our logo is for habitual and just how the overall app kind of tone is.
And I've done the exact same for the smaller versions, as you can tell that.
They are a little bit more chunkier, but when you start shrinking your icons, you need them to be
a little bit more thicker so people can really understand them and understand what they are.
We don't have them as often as we do as 24 pixels, so just another thing to think about.
But that is how I have decided to incorporate iconography into my design system.