How to draw your own custom icons in Adobe XD

In this video I'll show you how to make a little easy little sort of a squat, but we're going to make this login icon. We'll also bring this one in here and as a bonus, I'll show you how to turn, easily, the columns on and off. So that you can just see what you're working on easily using a cool little shortcut. Let's go do that now in XD. 

So I'm drawing icons mainly because we want a Wireframe. I've got my Wireframe actually printed off next to me on my desk, makes it a good resource, but that's what I'm kind of copying for a rough layout, but what we've decided with the client is, we're really pushing towards this on-boarding being the most important, getting people to sign up and test it. So what we've done is, we've decided that sign up and example are really important. Getting people to sign up, and the example has a flow where people have to add details as they go along. 

So these two here, we're going to turn into little icons. So drawing icons in XD, you can draw simple stuff, super easy. If it's going to get in any way complicated, it's best to probably jump to something like Adobe Illustrator. Adobe Illustrator's one job in the world is to draw icons, amongst a couple of other ones, but it really has all the tools to do it. In XD, it has enough. So, let's draw our little icon, we want to draw that 'Account Login'. I had a little look online for images and icons for login, and it's a really tough one because there's no super universal login option yet. I think that little man is probably the best. 

So what we're going to do is draw a circle. I want to zoom in a little bit. Then we get it roughly to the right size, the size I need it to be something like that. So, Circle tool, and if you're drawing out a circle with the Circle tool hold down 'Shift' while you're dragging, and that will give you a perfect circle. So I want this for a circle and I want another one, that's going to be its body. How big is this person going to be? About that. I'm going to select both of them. Make sure they're lined up, using the Horizontal Alignment tool. That's going to be the basics for it. The cool thing about it is once you've joined two shapes, like this, when you want to merge them with them selected, these over here are called Boolean operators, but really, if you know from other design programs you probably know it from Illustrator, called the Path Finder tool, and if you're like me, you're not just clicking all of these to figure out which one you want. I can never remember exactly. 

This first one is actually going to work now because I've been practicing but that's not what you want so the second tool here, the top one masks the bottom one out. You could bring this one to the front and do the exact same thing to get a different result. So you've got to have to kind of work through what you want to do with all of these. There's all sorts of weird options in there. I want this first one that joins the two, then I'm going to grab a Rectangle tool, and just draw a box. I'm just kind of using this like a cookie cutter. I'm going to use this guy to-- the second one in here, minus front. And now I have quite a short squat. So probably not this, I probably need to go adjust him a little bit. 

With him selected, I'm going to pick a Fill color of dark green, light green, probably the light green. And a Fill of-- a Stroke Width of this. I'm going to go to 100%. Before you make choices, remember, 100%. He's probably a little bit thick. I'm going to go '2 pixels', that feels right. So my nice little squat guy there, it's going to be this. So there's one other icon, and these columns here getting in my way visually. I want to kind of visually place him. These columns are going to come in super handy when we do some more of the cards that we need or the kind of blocks of content, but for the moment they're just in the way. 

So a couple of shortcuts before we go. I'm going to zoom out a little bit. I'm going to select all of these guys. And then, 'Command ;'. On my keyboard it's next to the L key, yours might be somewhere else. I was teaching XD in Milan yesterday - Yes, I'm name dropping. Just flew back this morning - but their semicolon key was in some crazy place where you needed to hold down Shift. So, hit the semi colon ';'. I'm going to hold 'Command', click that. If you're on a PC, it's 'Control ;', and that just turns it off. To turn them back on, you need to go back into the Layers panel. And I can select all of them here. Then use the same shortcut. And they'll come back to life. I'll turn them off for the moment because I'm just trying to look to see how this all works, and the spacing, so just messing about. 

The last thing I want to do though is find an icon for the money. So instead of using Shapes, I could use the Pen tool. Now the Pen tool here, I'm not going into a full Pen tool exercise because it's a tough one, we'll spend probably an hour getting to the grips with the Pen tool. You'll find that if you're learning the Pen tool, go off and learn it in something like Adobe Illustrator. It's got a lot more helpful guides and useful things. This just has a really simple Pen tool, so if you already are a Pen tool user you can go in there, and obviously start drawing. I'm going to start drawing like a dollar note type thing. 

So clicking once for corner point, click and drag for a curve. That's the basics but I'm not going to go through it, and even if I put a dollar sign in it what I might do is actually just find one using-- we looked at this earlier, 'Creative Cloud', 'Assets', 'Market'. And in here I'm going to put in 'Money' or 'Pricing', not sure which. So now it's a kind of a decision, does that feel like pricing or does this feel like pricing? Little tag. I think it's probably money rather than pricing. So when you are looking for icons sometimes you either work on different source and work on different ways of saying the same things because I feel like this is probably going to work better for me. 

So I'm going to download this to my Instructor HQ library. One thing you also should note, SVG is good because it's Scalable Vector Graphic, and you get to choose the colors easily. I'm going to open up my 'CC Libraries', and from 'Library', 'Instructor HQ' you can see down here, it says you have two unsupported elements. So, this version of XD, 2018, it doesn't let you have SVGs yet. You should be able to just drag it out. So we're going to go by Illustrator. So here in Illustrator, here's my Instructor HQ. I'm just going to drag this out. It's probably a bit big. Copy it, and paste it in, so there's a little bit of a work around. I'm going to get it the right size. Remember, working at 100%. Tap it around using arrow keys. If you want it to get it to jump big chunks while you're working hold down 'Shift' while you're using your arrow keys on your keyboard. I'm going to zoom in, and I can double click on it. 

The nice thing about this, if I go inside of this, keep double clicking until you see the Fill. And I can say, actually I want you to be the Fill, this one. Double click. You might just ungroup it, work just as easily. And this one here, they are about the same sort of Stroke Weight. What you might have to do for this kind of thing here is you could add a really small border around the outside to kind of fatten it up if you needed to match this. Mine was kind of fine. One thing I want to show you before I go, and I forget, this guy here is kind of like a created shape. The cool thing about it in XD is that it's non destructive. What I mean by that is if you keep double clicking on it, you can see, the actual shapes are still there so if I double click this again, there's my circle, so I can kind of adjust this, come back out and it's still editable. So all these parts are kind of working together but they are totally editable, so you can go through and delete parts, and bring it back. I'm going to undo, and fix my little guy because he is probably just a little bit-- I'm going to grab the corner here, hold 'Shift' and just shrink it down a little bit. Grab these guys, line them up horizontally. I feel like that's better. He's kind of a proportionate size now. So everything is non destructive, which is awesome. 

One last thing I'm going to do before I go is I'm going to create a kind of wave to break this top column here. So I'm going to grab the Pen tool, and click once over here. Click once in that corner, once in that corner, and about here. So clicking once gives you corners with this Pen tool. And a bit down here, I'm going to click, hold, and drag because I want this kind of like paint drippy style thing down here. Why? Just, I saw it kind of with my Mood Boards. I like these kind of non square transitions. This is the one here. I'd like this kind of Paint Drop. I don't want mine to be as extreme so I'm going to play around with something like this. Double click on it to adjust it. And I'm going to say, you, about there. You, about there. You can adjust these little handles as well. Some sort of a wavy thing. And we'll give it a Fill color for the moment, not white. I'll give it a big red color. And I'm going to show you in the next tutorial how to do the Gradient. Let's do that now.