Welcome back to the second part of icons.
There are a bunch of icon sites out there.
I mean, I couldn't even name them all if I tried.
But another option that we do have is that we can actually design our very own icon.
I know that sounds pretty scary, but I promise is it I mean, it is time consuming, but if you do
have the time, go for it.
So icons are pretty crucial to a design system.
And before we even build, we need to really take into account a couple of things.
First is size.
So if we think about base units, that has to come into play again and your icons should be designed
based off of it.
Our base unit is eight pixels, so let's create a grid.
So we're going to create a frame.
And it's going to be a small frame, it's going to be only twenty four by twenty four pixels.
Let's zoom right in.
There you go.
Let's rename that to Icon so we have a little grit right here.
And what we can do is we can create a layout grid or not a little group, but we're going to create
an actual grid.
So you'll notice that this is a defaulted 10 pixel grid.
So it'll have 10 pixels by pixels.
We want actual just a one pixel grid.
So that's going to work for us.
Perfect.
So another thing is when we're creating an icon, we want to only use one color.
Anything more than that.
That's just a bit too much for product use.
So I would just stick with one color all times, unless it's something like a marketing website where
icons are a little more blown up, a little bit more larger, like 40 pixels or something like that.
That's fine if you want to really use more colors to reinforce your brand.
But for typical like product interface use and stuff like that, stick to one color.
Now that we have our pixel grid.
This makes it much easier so we can stick to it.
Our icons will render much more nicely if we stick onto these pixel lines here and onto our grid.
So the first icon we're going to make is just a simple checkmark.
And what we can do is we can just press P for our pencil and we could just stick to our grid like this
cricket.
If we hold shift, we can stick to a certain angle.
So if you're on a 45 degree angle, we could just see that.
And do something like that, and there you go, I mean, like it doesn't have to be hard, this looks
a little too rigid, but if I select these points, so if I lose this and I click it again, if I double
click it, I can select this point.
If I hold shift, I can select that point.
Then I can go over here to a vector.
Little toolbar, and I can just change.
That will change it if it's an actual outlay, if it's an actual stroke, you can go here and I'll show
you both scenarios so you can round those corners.
But if I didn't do that and I did something like this.
Increase the stroke, and then I did something like this where we're going to click out of that and
I can outline a stroke, then you can go over here and you can outline the edges.
So what we can do here is we can start moving it any which way we want.
That looks fine, we can also just leave it, we can bring this in a bit more, which is much better,
and we're going to center that.
So this is one icon that we just easily made.
I'm going to just pump up the Jaroch on that, because it's going to be harder to see.
And I'm going to like I said before, I'm going to go and adjust the caps to meet them around.
And you can also.
Adjust their.
To make it a little more rounder Nago, we have an actual Czech icon and you can duplicate that and
you can actually make a variation of it.
You can make this a little bit smaller if you want.
Let's copy that and then put that there and you can actually go ahead and make a circle and make another
variation of it.
So it's sitting on those lines that to the back and this is what I'm going to do here, I'm going to
make this black.
And I'm going to make this white.
And this is great if you want to kind of create another variation of an icon that we just created,
some people like to create like circle based icon sets or just having a circle variation of like a checkmark
for other applications.
Another easy icon that we can make.
There's something like a cloud, so if I select our lips tool to appear or if I select oh for the.
I can just create a quick cloud like this.
I'm going to bring down the middle and this one's going to be much bigger.
They will go, and if I double click this, I can take this point and bring it down here.
That doesn't really look like much of a cloud, but if I select that and I delete it, there we go,
we have our cloud.
I'm going to select all these shapes and combine them.
And then to press E to flatten that layer, you can also take our.
Able to and we can draw an arrow like it's an actual.
Download icon, let's adjust that cap again, it's around.
And we were using two pixels, so let's try and see consistent.
That's not going to work there, so we're going to stick to one pixel on this one and we should probably
stick to one pixel on this one, too, if we're going to create like an actual set.
It's going to be a little hard to see.
That's the only issue.
But there are different ways you can get around that.
So there we go.
And if I wanted to create like an actual See-Through icon, so like right now this is not See-Through
if you take it off the canvas.
It's still light and it's not one actual shape.
So I'm going to create outlines.
So I'm going to.
Right.
Click on that.
Create a line.
That's Rokke.
Perfect, and I'm going to select them and I'm going to go back up here and I'm going to click, subtract,
and what that's going to do is it's going to subtract this shape from the shape.
And now it's one shape.
All we need to do.
You'll notice that you'll still be able to see them here and you'll still be able to move them around.
Now, if we don't want that ever to happen, we could just.
Flat that right here.
So all we need to do is click that and Phosphine or Kamandi and there you go.
You have a cloud icon.
Let's create a couple more.
This is probably like you can create a location service icon the really much more easier than you think.
So if I'm just going to do that, I'm going to double click and I'm going to hold shift.
So before I click this and a double click in here, I'm going to click that hold shift and pull upward.
And just like that.
We have our very own location, Eikon.
And it's pretty easy to make we can do that even for a Mappin, we can do some pretty cool tricks.
Not everything is as complicated as it looks.
So let's just create a little circle here will create another larger circle.
So this is going to be our inside.
Let's bring that to the front.
Select on both and bring that here.
Great, we're in a double click into that back there and we're going to grab this point and bring it
down.
They're going to bring this down so that we can use our grid control, gee, let's zoom in and use our
grid to say that I want to on this point so I know that when I do this.
And it on that point, too.
Now, that's not really nice at the bottom.
It kind of curves down.
What we can do is command.
It'll bring both of those points in and from their.
You can round it by clicking up there, see?
Just click that point.
Go up here, press one or whatever number you desire, and there you go, you have your Mappin.
Like I said before, what you can do is you can subtract that.
And then pressing Kamandi to flatten it and you have your very own Nopporn icon.
OK, last one.
Let's create a heart.
This one's really fun, so I'm going to actually suck my life into hearts are really hard to make.
I mean, I even have a hard time drawing hearts to this day for some sort of reason.
I have a hard time even making them in here.
But this is a little Chieko that I often use.
I mean, actually, I press my pencil.
Let's go like this.
Boom, hold shift.
Hold shift, so we have two lines that forty five degree angles.
And that's it, and what we're going do is we're going to select each and.
We're going to go into our stroke settings and our advance stroke settings.
I'm going to press round and we're going to bump that right up.
And there you go.
You kind of have your own heart.
You can't really see it right now.
We bring this in a little bit more, we can start playing with it, that looks really good.
I hold command and click on this.
We can start creating a really nice round heart.
And that is great, we can also just kind of manipulate that just a bit if we want to.
Now, what I'd like to do here is just kind of outline that stroke.
You see, there's a weird outline in sometimes that will happen with icons.
That's totally fine.
I'll show you how to fix that.
There you go.
We're going to do is we're going to double click into here so we have these weird things happening and
that's even much more weirder.
But we're going to fix that.
So we're just going to drag this right to the bottom.
We're going to click on this and you can delete this.
So be careful.
Sometimes we'll actually delete the whole film.
But if you just Kamandi out of that, they'll be totally fine.
And if I press one, like I said before, there you go, you have your nice heart.
Just make sure.
That you don't do that to kind of these little Knux because it doesn't really look that a.
So that's it, I mean, you can easily make quick icons for whatever application you want, I mean,
you can create them for your own navigation, for individual, whatever navigation you choose and whatever
navigation you think is right.
Maybe try actually making icons for that because it's not that hard.
And sometimes you don't necessarily need a whole icon set for a product, but you will be using probably
a good steady like 10 consistently, whether those are chevrons, which are really easy to make.
I mean, we can even make one right now.
Chevrons are those little arrows that are pointing left, right and.
Up and down, so, I mean, we can easily create our own chevrons.
Just like that, it's totally easy.
So take some time, try to find that consistency within the grid, if you're using, like lined with
of like two pixels, stick with two pixels, don't have something that is, like, really thick and
then something really thin.
So if you're using something like three pixel lengths, stick with that being very consistent within
your iconography.
But take some time, have some fun.
I mean, you can create your own little style here if you really have that time to do it.
There you go.
You have your very own custom icons and there are so many other things we can do when we're drawing
within Sigma.
But that's a deep rabbit hole that we're not going to really go down right now, remember.
Have fun.
Don't take it too seriously.
Choose some icons that you want to do for our app.
Jump right in there and just do it.