Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:30 minutes

Next lesson playing in 5 seconds


Free Preview: Icon Design With Adobe XD


  • Overview
  • Transcript

Welcome to “Icon Design With Adobe XD”. This short course focuses on learning how to use the tools available in Adobe XD to design a variety of different icons. We’ll start by creating a grid for the artboard that we can work on, before learning how the various tools in Adobe XD can be used to create and customise stylish icons.

Learn Adobe XD

We've built a comprehensive guide to help you learn Adobe XD, whether you're just getting started with UX design or you want to explore prototyping and collaboration.

1. Introduction

1.1 Introduction

[MUSIC] Hello there, my name is Daniel White. Some of you guys know me as Dan Skeet. I'm an instructor with Envato Tuts+ and in this course we're going to learn all about designing icons in Adobe XD. We're going to start by setting up a grid on an art board. We're then going to draw the icons using various tools in XD. And then we're going to adjust properties like color and border width all at the end to complete each of the different icons. So I'm really excited to get started and I look forward to seeing you in the course.

2. Designing Icons in Adobe XD

2.1 Move Icon

[MUSIC] In this lesson we’re going to learn how to design a move icon in Adobe XD. So, to to start with, I'm working on a 60 by 60 pixel art board, and I'm going to switch on my grid. And the grid is set to 1. So every one pixel there will be a horizontal and vertical grid line. The first thing to do is select the line tool, and left-click and hold Shift to draw a horizontal line. Next we're going to select the pen tool and left-click and hold Shift to draw a line at a 45-degree angle. Left-click again, drag this down the other side, and you'll see those guides nicely line this up. So we can left-click again. And it wants to continue that line, but we can press Escape on the keyboard and it cancels that. And we now have our arrowhead. So, we can can drag over both of these shapes and set the width to 2. And from the color picker we can now pick a color. I'm going to use 4A4A4A. Press Return. And we can also add this as a color swatch here for use at a later time. So now we can drag the arrow head into position and rotate by left-clicking from the corners when you see this symbol. And it rotates freely. Or we can hold Shift and rotate in set increments. And you can also enter your rotation up here in the property inspector. So we can drag this into position. And then go to Edit > Duplicate, and hold Shift and drag this across. And then, again, hold Shift and rotate from one of the corners so it's pointing the other way. So now we've created one of our arrows. We can drag over both of these, go to Edit > Duplicate, and again, hold Shift and rotate from one of the corners. And it will complete our arrow. Now the horizontal one is aligned to the pixel grid nicely. This vertical one, we need to select this and just remove this 0.5. So we'll change that to 29, we'll round it down, and you'll see it shuffles in place. And these arrows as well, we can just shuffle those into place. And then drag over everything and go to Object > Group. And our arrow shape is all now grouped together. And we can scale this down and up from the center, by holding Shift and Alt and left-clicking.