1
00:00:00,360 --> 00:00:01,740
Hey, everyone, welcome back.

2
00:00:02,190 --> 00:00:08,280
So one thing that we often forget about is something like our assets, like icons.

3
00:00:08,610 --> 00:00:10,770
Now icons are very important.

4
00:00:10,780 --> 00:00:18,330
We created our own icons in this course and we've also found different types of resources that give

5
00:00:18,330 --> 00:00:19,290
us a bunch of icons.

6
00:00:19,290 --> 00:00:26,910
And these icons are definitely based off of our feather icon resource, which you can find right here.

7
00:00:27,150 --> 00:00:29,640
So these icons are based off of that.

8
00:00:30,620 --> 00:00:36,080
And I've taken all the icons I need for this application and I've broken them into two things.

9
00:00:37,500 --> 00:00:41,790
Two different sizes, twenty four pixel icons and 16 pixel icons.

10
00:00:42,330 --> 00:00:48,210
Now, you may not need to, depending on how you set your icons up, you could just resize them if you

11
00:00:48,210 --> 00:00:49,040
really need to.

12
00:00:49,440 --> 00:00:53,550
But what I've done here is I've split them up just to make it easier for you.

13
00:00:55,280 --> 00:01:00,950
Now, I've also included several failed versions, so, I mean, if there's a heart, let's turn off

14
00:01:00,950 --> 00:01:03,740
our grid, because each of these is on a grid.

15
00:01:06,790 --> 00:01:12,760
So if we take off our grid over here, you will notice that we have like a heart that is filled or like

16
00:01:12,760 --> 00:01:15,430
a zap icon or just like a star.

17
00:01:15,430 --> 00:01:21,520
And this helps us really like if we're creating interactions with icons and we need to fill them, this

18
00:01:21,520 --> 00:01:22,000
really helps.

19
00:01:22,010 --> 00:01:27,580
So you don't necessarily need, like, massive icons set with like four hundred different icons.

20
00:01:28,600 --> 00:01:34,810
I personally use the icons that I'm going to use within the application, I may have a couple extras

21
00:01:35,140 --> 00:01:37,330
just in case, and that's totally fine.

22
00:01:37,330 --> 00:01:39,310
And you can continue just adding to this.

23
00:01:39,610 --> 00:01:43,150
This is my icon system right now, and I'll show you how I went in and built it.

24
00:01:44,350 --> 00:01:46,100
So I have different sections.

25
00:01:46,120 --> 00:01:47,290
This is how I've named them.

26
00:01:47,620 --> 00:01:49,690
I have outlined twenty four pixel.

27
00:01:50,690 --> 00:01:53,450
And just that is where the artwork is within.

28
00:01:55,500 --> 00:02:02,660
And then I've actually here I will show you what I've done, so if I take this, there's this disconnect

29
00:02:02,700 --> 00:02:02,880
of.

30
00:02:04,880 --> 00:02:13,160
This is my icon, and I've just taken it and created it as a component of the option, commend K. I've

31
00:02:13,160 --> 00:02:14,500
named it whatever I want to name it.

32
00:02:14,510 --> 00:02:19,160
So I've been using this naming convention for my icons just to split them up between twenty four pixels

33
00:02:19,580 --> 00:02:21,140
and 16 pixels.

34
00:02:22,910 --> 00:02:26,810
And now, whenever I want to use it, if I go into my assets section.

35
00:02:28,800 --> 00:02:31,530
You'll see that I have it split up over here.

36
00:02:33,040 --> 00:02:35,740
Let's change that for one second.

37
00:02:37,650 --> 00:02:44,880
OK, so this is my outline twenty four pixel arrow, you'll see that, see it selected now let's just

38
00:02:45,030 --> 00:02:48,240
delete that and it won't show up there my ass at section.

39
00:02:51,680 --> 00:03:00,950
But I have my iconography split up by 16 pixels and then I have filled an outline, 16 pixels and the

40
00:03:00,950 --> 00:03:01,870
same for the 24 pixels.

41
00:03:01,880 --> 00:03:07,790
And if I wanted to say get twenty four pixel outlined icon, I can see all my assets right here.

42
00:03:07,790 --> 00:03:09,730
And this is why I split it up just like this.

43
00:03:09,740 --> 00:03:10,970
It's perfect.

44
00:03:11,480 --> 00:03:17,000
You can just grab I want a home icon and just drag it into whatever file you're using.

45
00:03:17,450 --> 00:03:22,460
And if I wanted to change that icon and I will show you how I've used this within other components,

46
00:03:23,240 --> 00:03:28,850
I can just go into my instant section over here and it'll automatically give me a related component

47
00:03:28,850 --> 00:03:32,630
if I'm in twenty four pixels per say, if I want to use like 16 pixels, I can do that to.

48
00:03:36,290 --> 00:03:44,120
I can change it like that and just like that, we have icons that we can easily use within other components,

49
00:03:44,450 --> 00:03:50,090
not even with other components, but just within a file, if we need to grab something quick, it keeps

50
00:03:50,090 --> 00:03:52,880
everything in one place and neatly sorted.

51
00:03:54,910 --> 00:04:01,330
So these are the icons I've decided to go with, you can tell they're more rounded, more playful,

52
00:04:01,450 --> 00:04:06,900
kind of like how our logo is for habitual and just how the overall app kind of tone is.

53
00:04:08,170 --> 00:04:12,160
And I've done the exact same for the smaller versions, as you can tell that.

54
00:04:13,370 --> 00:04:19,580
They are a little bit more chunkier, but when you start shrinking your icons, you need them to be

55
00:04:19,580 --> 00:04:24,260
a little bit more thicker so people can really understand them and understand what they are.

56
00:04:26,090 --> 00:04:31,600
We don't have them as often as we do as 24 pixels, so just another thing to think about.

57
00:04:32,890 --> 00:04:39,390
But that is how I have decided to incorporate iconography into my design system.