In this 10-hour video course, you'll learn core skills and techniques for user interface design, from simple graphics to complex patterns and design systems.
13:07 min
In this hands-on tutorial, Laura shows you how she’d how to design a simple home icon for breadcrumb navigation using Penpot. She covers the entire process from concept to export while focusing on proper sizing, alignment, and design considerations.
13:07 min
Let's jump into designing something. We've looked already at some of the fundamentals of design tools, and so let's put some of that into action.
I am going to create a very simple icon design. An icon is a nice place to start because it's a basic shape and we don't have to think too much about the surrounding elements, although it is still important to think about the environment that we're putting it into.
So we're gonna create an icon that's part of breadcrumb navigation, and we want it to be 24 by 24 pixels, so it might fit in or be the beginning of an concept. Let's do a little mockup of our breadcrumb so we know what we're working with. I'm just gonna draw a board here and being very organized. I'm going to call that board Breadcrumb and let's mock up what a breadcrumb looks like. Just in case you don't know.
So we have a home link. This is just text and I'm adding an underline. So it looks a bit linkish, and we might have a category link, and we might have a post link. Now, the way that breadcrumbs work is it shows you where you have already been on the site and how you can get back quickly to the previous places you've been. And the way that you understand the relationship between the links is usually there's a little arrow in between them. Now, I'm not gonna put an an icon in, I'm just going to put a bit of text in that looks like an arrow, just so we get the idea of what we're doing. A very rough mock up. This is more wire frame, I guess. So let's group those together and call that breadcrumb. This is our little mock up.
Now, the home icon is going to replace this home link. The reason we're doing this is it provides a nice little visual landmark. Usually a breadcrumb would be underneath the page navigation, and so it just provides a very easy to spot icon that says home. This is how you get to your home.
A home icon is usually represented by a little house. So what I'm gonna do is I'm gonna hide this home icon by using this, I hide it and replace that with a board where we're going to build our icon.
Now this board, we can put boards inside other boards, as many as we like. It just gives us an idea of the spacing that we have for our icon and makes it easier to export. And so this is going to be our home icon board. It's very hard to see the board, especially when it's deselected because it's on another board that has a white fill. So what I'm gonna do, I'm just gonna give it a slightly off-white gray background, and we can hide that later or delete it later. It just gives us an idea of the space we're working with, and I said earlier, we want the pixel to be the pixel.
We want the icon to be 24 by 24 pixels, so that's 24 pixels wide and 24 pixels high. Let's constrain that and so that way if I resize it by accident, we keep the proportions. This is our icon. It will be kind of in place there.
Now let's think about what a home icon should look like. Well, it's a house and we could have outline icons or you can have solid icons. And the difference between those is an outline icon. It's like these Penpot icons here, where the stroke shows the shape of the icon. Whereas a filled icon, or a solid icon is just like a silhouette of the shape of the icon, and we're gonna go for that style.
So I'm gonna start off by drawing a rectangle and because it's going to be like a silhouette, it's going to be black. And I want to, so this is, think about this as the body of our house. Next I want to make a roof. I'm gonna draw that in with the path tool. So this doesn't have to be very accurate at all. See, I could draw a really extremely wrong looking, it's a futuristic roof. Now let's make that use a black fill as well. Remove the stroke. Okay.
Once I've created a shape like this, even if it's wonky, what I can do is I can double click and use the path editing tool. So just drag those points to where I want them, and that way I can get a bit more accurate. Let's zoom in for that. So let's drag our points so it looks a little bit more like the points on a house and make sure that that center aligned. There we go. That looks like a little house.
Now these are currently two separate shapes, so let's use the Union Boolean to join them together, and we want to put a little door into our house as well, so draw that as a gray shape, and then I can see what it looks like on top.
Now with bearing in mind that this icon is gonna be quite small, we don't want the details to get too small because we want to still be able to see it when we are zoomed to say a hundred percent. There we go. So this is what it would like at a hundred percent. It is already too big for that box. So we want the detail to be quite big, to be easily spot able. And we want that to align to the center of our rectangle.
And now we can, this door shape, we can remove that door shape from our house. So it remains silhouette. So just a dark shape on a background. So we're gonna use the difference tool for that. So we remove that. And you know what? How about we put a little chimney in there? So a chimney would just be a little rectangle. We'll make that black as well. And we can position our little chimney. I'm gonna use the arrow keys. There we go. To position our chimney and zoom out to see how that looks. It looks a little bit fiddly, doesn't it? Maybe I'll make that a little bit bigger.
Would it look nice if it was aligned to the side of the rest of the building? That's actually probably quite realistic, isn't it? And I'm gonna make it quite big. So this space here is a bit bigger, and so that detail is less fiddly looking. We'll zoom out and let's, uh, join that chimney to the rest of our shape. So we've just got it all as one shape. And that means that we can change the fill color of the shape all at once. So it could be a slightly off black gray shade like that.
And now let's resize it and put it into our icon board and see how it works at the right size. So I make that nice and small. If I position it over the top automatically, it should put it into the correct board. But I can always make sure by going into the layers folder, the layers panel, and checking that that icon is inside. Have to call that home. And at the moment's not really center aligned, I can to sort out the alignment or I can select both objects and use the center aligned here. Oh, it's not center. Align it to the right thing. There we go. I've select the object center, aligned it so it's center aligned to its container.
Okay. And now if I zoom out, we can see How does that look? It's quite hard to tell with the. color of the fill. So I'm gonna remove that. That's not looking too bad. It's quite big and it's, there's not much space around it and it maybe doesn't align to the size of the text as well as it could do. So let's work on that. So I'm going to add a fill in again so we can see that background. And let's give our icon a little space to breathe. So I'm just gonna make that a bit smaller. The proportions haven't been constrained, but actually I think when it's a bit squished so that it's wider than it is tall, that does look a bit better and try and center align it.
I'm not happy with the detail of the roof shape here. I feel like this is a little too. Uh, very narrow points here, and it makes it difficult to see what's going on when we are zoomed out. So what I'm going to do is I'm going to make the roof a bit steeper now because I've made the shape up of a union of different shapes. I can still go in and edit that original roof shape, its original rectangle, and in fact it's probably this original path I, it's probably quite good for me here to name these so that if I go back later, I can see exactly what each of these layers is for and edit them much more quickly. Learn to spell chimney. There we go.
And so I'm going to make my roof a little bit steeper. I'm gonna use the tools to drag it like. Now one of the problems is that my building is peeking out from behind my roof, so I'm going to add a few more points in so that I can hide these top corners of the building underneath the roof.
I'm gonna do that by double clicking on the shape, and I'm going to add in a point where the building meets the roof, and then I can drag these little points here. And it doesn't spoil this line, the continuity of the line going down there, but it's nice and hidden behind my roof and oh, now my chimney's a little bit hanging off the roof, so I make that a little bit bigger.
Oh, let's try and position that nicely. When you are working at this small sizes, you can see that a pixel grid has appeared behind my canvas. This isn't visible when you export your file, but it just shut, helps you align your objects so that they render at the edges of the pixels. And what that will do is it will make it look nice and crisp when it's resized.
In fact, it's probably a good idea to make sure that the rest of my building is aligned on that pixel grid. I can drag to do that, or I can look at the values here. Now, if I look at this, the width is 14.4, so it's going to be 14 pixels wide and then 0.4 of a pixel wide, which means it's going to render at half of a pixel, which is going to possibly create a blurry edge. So what I'm going to do is I'm going to position that so that it starts at five and I'm going to make it a width of 14. And now you can see, because I've used those whole numbers, the edges of my pixel aligned to the pixel grid, the edges of my building.
I'm gonna do the same thing for the door here. So you can see all these, not these decimal numbers. We want them to be round numbers where possible. So if I think about the width of my building, that's 14. And so that's an even number. So if I want my door to fit in the middle of my building. I want that to be an even number as well, so it can align centrally whilst aligning to the edges of the pixels.
So I'm going to make that a width of six and it's a quite wide, but I want it to be able to stand out and I'll make it a height of seven so it's not a square and I want it to start on Now I'm bad at doing math, so, so I'm just gonna drag it. There we go. So I'm going to drag it. So now you see these are all hole numbers and this is aligned nicely to the grid.
And now if I zoom out, I think that door's probably a little bit big, looks a bit more like a garage, but it's getting there. So I'm gonna make the door a bit smaller. Let's make that one pixel shorter and maybe two pixels narrower. And there we go. I think we have a good home icon.
Now, if I hide that fill background and I want to export this icon to be used in a website, so SVG is a good choice for that because it's a vector format. So I've got this board selected. I'm going to scroll down to the export section and I'm going to export that. As an SVG, and there we go. If I hit export to that element, it will download that SVG to my machine, which I can then use in my designs.
13:07 min
You can read more about shapes and paths in the Penpot User Guide:
The demo file features the example from the video on creating an icon. Download the .penpot file and import the file into Penpot to try it out for yourself.
