How To Create Icons In Adobe XD
Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.
As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.
Table Of Contents #
In this tutorial, you’ll learn how to:
- Set up your document for Icon Design (Artboard, Color Palette)
- Design with Rectangle Tool,
- Create a prototype,
- Export and share your icons.
So without a further ado, let’s get started!
Preparing Artboards #
First off, we are going to create a new office icon set, taking some examples from my previous icon set which was published as a freebie here on Smashing Magazine. First, we’ll create the icons, then we’ll create a simple app user interface with them.
Open Adobe Experience Design, and you’ll see this:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25dcb0cf-d574-4a08-b285-710c5400a6f9/creating-icons-in-adobe-xd-02-opt.jpg)
Choose “Custom Size” and click “Open”.
In the new window, click on the Artboard Tool (A) in the toolbar on the left. Once clicked, you’ll see some UI settings showing in the Property Inspector on the right. Since we’ll begin with our icon set, we will create a custom artboard first.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/445eed65-9475-49c6-acfc-14784fde66bb/creating-icons-in-adobe-xd-03-opt.jpg)
Click and drag to create a 512×512 px artboard. To have more control over its size, you can also enter the width and height values directly in the dimensions section in the Property Inspector on the right.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/080997a3-1dbe-4ccc-a419-f37e3e3e7b81/creating-icons-in-adobe-xd-04-opt.jpg)
Double-click on the artboard name on top of your artboard and name it “Icon-01”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50da5c78-04c3-4a77-af2d-93ed9e7ff017/creating-icons-in-adobe-xd-05-opt.jpg)
We need another three artboards identical to the one we already created. To create a new artboard with the same dimensions of the first one, you just need to do Cmd + C
and Cmd + V
.
(Note: if you just click on the gray space on the right-hand side next to your first artboard instead of doing Cmd + C, XD will also add a new artboard but with the dimensions of the first device that is listed in the Property Inspector on the right, in this case iPhone 6.)
Every new artboard will be positioned in the same row, but you can easily drag and drop artboards four and five under the first two. Name them “Icon-01”, “Icon-02”, “Icon-03”, “Icon-04”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/548584d5-c6f6-4d27-8c65-b64d9d717124/creating-icons-in-adobe-xd-06-opt.jpg)
At this point, save your project via File → Save as and name it “Office-Icons”.
Creating A Color Palette #
Now, let’s create a swatches palette to position above our artboards. Click on the Rectangle Tool ® and create a square with the dimensions 120×120 px. You’ll need to create four more squares with the same dimensions. Just do Cmd + C
and Cmd + V
. Contrary to copying and pasting artboards, Adobe Experience will paste objects like these on top of instead of next to each other. So select and drag them to the right.
To choose a color for your square, click on it and go to the Property Inspector on the right and there to the Appearance section where it says “Fill”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/93a7164c-e8cb-4ca2-9a83-994d53c5343a/6-create-icons-adobe-xd-opt.png)
Using Fill Tool, you will be able to do three things:
- Opening the swatches palette by clicking on the white rectangle displayed next to “Fill” and then choosing a color from the various palettes it contains (color wheel, color sliders, color palettes, image palettes, pencils).
- Using the color picker to pick a color from a source.
- Adding picked colors to the swatch in the color pick
If you prefer, you can also manually enter a hex value in the color picker.
Now, I will use the color picker to choose a color for every square from my palette image. After you’re done, select all your swatches palette squares and get rid of their border color by unchecking “Border” in the Property Inspector.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b40065e-4142-45e4-b54c-2ca787e8f443/creating-icons-in-adobe-xd-08-opt.jpg)
Here is my palette. You can use it to drag and drop it into your XD window.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c2e4fea-dbfb-4380-982b-26c126e04539/creating-icons-in-adobe-xd-09-opt.jpg)
Let’s see how to add these colors to XD watches. Create a square above palette colors and click on “Repeat Grid”.
![Create a square above palette colors and click on Repeat Grid](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b0e033b-a5f0-499c-b9b3-a6c9e49678d2/color-palette-1.png)
Drag to create other five squares.
![Drag to create other five squares.](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68d80640-5c2d-4fde-9ac2-23e71707a856/color-palette-2.png)
![Drag to create other five squares.](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/582ddb3f-034c-4c65-884f-307368a7c6af/color-palette-3.png)
Now, with all squares selected, click on “Ungroup Grid”. Click on the first square, then grab the Color Picker and pick the color from the first colored square of our palette.
Let’s see how to add colors to the swatch, in the video below. It shows you how to get rid of swatches, too.
After that, you are free to delete squares palette colors we created before.
Creating Icons #
Let’s begin to draw our icons! First, we need to see a grid on our artboards. Click on your first artboard and check “Grid” in the Property Inspector. Set the size of the grid to 30
. Now all your shapes will snap to the grid.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e75becef-d049-4d02-bb6d-60abec604343/creating-icons-in-adobe-xd-10-opt.jpg)
Icon Nr. 1: Clipboard #
Our first icon will be a clipboard.
Click on the Rectangle Tool ® and draw a rectangle as shown in the image below.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4792f922-bd57-46a3-a709-d1c937c33a92/creating-icons-in-adobe-xd-11-opt.jpg)
Select the color picker next to “Border” in the Appearance panel, and click on the blue square in your swatches palette. Then set the border size to 20
and set “Fill” to white.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5042939-d529-4eb4-bc14-b91121913ad0/creating-icons-in-adobe-xd-12-opt.jpg)
Drag your rectangle downwards, so that it goes over the border of your artboard. The overlapping part of your rectangle will disappear once you click anywhere outside the artboard.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c0916c3-523a-4ca9-a512-d6c4d35a1e2b/creating-icons-in-adobe-xd-13-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a9dd2139-2318-49d1-adac-d09ea0435b25/creating-icons-in-adobe-xd-14-opt.jpg)
Grab your Rectangle Tool ® again, and draw a little rectangle at the top of the board. Take the “Fill” color picker and select the yellow color from our palette. Uncheck “Border”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d583d1e0-0e61-4f32-985f-cd298ad20188/creating-icons-in-adobe-xd-15-opt.jpg)
Click on the last rectangle you created. You will four rounded corner handles showing up. Click on one of them and drag it inwards a little to create rounded corners. Alternatively, you can also insert a value directly into the corner radius box.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db18c4c1-173f-471e-8a70-9150b767c8eb/creating-icons-in-adobe-xd-16-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64f39e85-21a7-43af-b388-d35ef31bd88f/creating-icons-in-adobe-xd-17-opt.jpg)
This will be the result:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c8ff644-644a-45ab-9492-826bc6a5949a/creating-icons-in-adobe-xd-18-opt.jpg)
Now, create another rectangle following the previous steps and position it right above the last one. “Fill” will be the same yellow color, no border.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/214d03fa-2e7e-492a-820b-586e81328797/creating-icons-in-adobe-xd-19-opt.jpg)
Let’s create a little shadow. Select the last rectangle you created and copy and paste it on top of it (Cmd + C
/ Cmd + V
). Drag the top border of the new rectangle downwards and set the fill color to black, opacity 20%
.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8fa613cf-4364-413a-9edd-018e2e3a9dda/creating-icons-in-adobe-xd-20-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2339b013-81c5-4224-8720-bd05951da128/creating-icons-in-adobe-xd-21-opt.jpg)
Again, with the Rectangle Tool ® create a little box to represent a checkbox. Set the border color to blue and size to 7
. Leave the fill color white.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc85b5b1-48b0-4ac5-a92c-0fe0e16be6a4/creating-icons-in-adobe-xd-22-opt.jpg)
Now, draw some lines near the box to represent text lines. Set the fill color to blue and uncheck border color.
Grab the Pen (P) and draw a little V inside the checkbox.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ce6e43b9-2070-498b-b36d-b71a892b4b73/creating-icons-in-adobe-xd-23-opt.jpg)
Set the border width of the checkmark to 8
and select the green from our palette to color it.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7bfdaaa3-f188-445f-9941-56951dc80dd9/creating-icons-in-adobe-xd-24-opt.jpg)
When you create something with the Pen tool, you can always go back and modify. Just double click on the V shape and you will see little circles showing up. Drag and drop them to modify your shape.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64bb7dfd-1388-4fb1-a51b-e9695afe44d2/creating-icons-in-adobe-xd-25-opt.jpg)
After that, select both the checkbox and the lines on the right (holding down Shift
while clicking) and group them. Then, go on the Appearance Panel and click on Repeat Grid button. Drag and drop the handle group down and you’ll get your group repeated. Let’s repeat it three times.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f706e980-08fa-41b0-b6de-d7df85d33dbd/creating-icons-in-adobe-xd-26-opt.jpg)
Now, create a circle. Click on Ellipse (E) and, holding down Shift + Alt
to contain proportions, click and drag to create a circle. Set its dimensions to 512×512 px.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c6a212f1-cb8c-4d65-8c9c-28efab559c0a/creating-icons-in-adobe-xd-27-opt.jpg)
Select the circle and set its color to our red tone using the “Fill” eyedropper.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72eb8d26-8575-4827-9a11-f7b0aac3089d/creating-icons-in-adobe-xd-28-opt.jpg)
Select the circle again and move it behind the clipboard through Object → Arrange → Send to Back.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ad0ce328-a3b4-40ee-8760-b3dcaae2a677/creating-icons-in-adobe-xd-29-opt.jpg)
Once again, select the circle and hit Cmd + C
/ Cmd + V
to copy and paste it. You will now see the circle on the top.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d7d8383-333d-456c-8267-93ed196e24e8/creating-icons-in-adobe-xd-30-opt.jpg)
Select all objects and go to Object → Mask with Shape. Your icon will be masked with the circle. Uncheck the grid to see the result.
Icon Nr. 2: Coffee & Cookies #
On our second artboard, let’s create a yellow ellipse just like you’ve seen it in the previous step.
Then click again on Ellipse (E) and create a white circle positioned half in the yellow circle, half out of it.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9db9613c-9007-4045-8acf-83bb1ce36978/creating-icons-in-adobe-xd-31-opt.jpg)
With the white circle selected, hit Cmd + C
/ Cmd + V
to copy and paste to the front. Press Shift + Alt
and drag it inwards to create a smaller circle. Set “Fill” to the brown color from our palette.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b79d5372-7fd5-4843-99e5-944357f60f0e/creating-icons-in-adobe-xd-32-opt.jpg)
Select the brown circle and copy and paste it twice to create two more circles on top of each other. Position the top one as shown in the image below. Then select both shapes and click on “Subtract”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e441a5ca-6331-4351-9817-4e4831defbea/creating-icons-in-adobe-xd-33-opt.jpg)
Click on the new shape (a half moon) and set its fill color to black by double-clicking on “Fill”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6e280981-3d5b-44b7-9103-6e3601f6b991/creating-icons-in-adobe-xd-34-opt.jpg)
Now, set its opacity to 50%
.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/431a36f6-cf33-4657-8a54-63ea2d4046f9/creating-icons-in-adobe-xd-35-opt.jpg)
Again, create another circle with the Ellipse (E) Tool, this one smaller than the other. Then create two small white circles on the edge of that.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/23dfc667-110a-49f3-9e0f-14e18d1a95f8/creating-icons-in-adobe-xd-36-opt.jpg)
With all three circles selected, hit “Subtract”. The result is a bitten cookie.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1600ebea-d09c-40d9-9b50-51acfff5a3dc/creating-icons-in-adobe-xd-37-opt.jpg)
Draw some little brown circles onto the cookie to simulate chocolate chips.
Select the chocolate circles and the cookie and group them through Object → Group.
Make the coffee cup a little bigger and closer to the cookie.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f20552f-b9c6-41db-95dc-c08dfbcd9f33/creating-icons-in-adobe-xd-38-opt.jpg)
Select the yellow circle in the background and hit Cmd+ C
/ Cmd + V
, then select everything and mask through Object → Mask with shape.
Here the result:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ce1fa23-00a8-45c7-a950-ec0e429fda1f/creating-icons-in-adobe-xd-39-opt.jpg)
Icon Nr. 3: Drawers #
On to the third artboard.
Select the Rectangle tool and draw a rectangle. Press Cmd + D
to duplicate it and move the duplicate to the right. Set the fill of both to yellow.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a666373d-448d-4167-a21b-63f42862a044/creating-icons-in-adobe-xd-40-opt.jpg)
Double-click on the rectangle on the left, then select its top right angle point and drag it downwards. Do the same with the top left angle point of the rectangle on the right. The result should look like this:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4bf53838-2971-4d25-8ecf-8bbedd6b2f18/creating-icons-in-adobe-xd-41-opt.jpg)
Now, grab the Pen (P) and draw a rhombus on the top. It will become the top surface of our file cabinet.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/159bad01-63a3-40f7-bed3-1636afd24bfc/creating-icons-in-adobe-xd-42-opt.jpg)
Set the fill color to yellow, then double click on fill color to move the brightness handle a little to the right:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2e59331e-b301-4fde-8723-e74a0dc3907b/colorpicker-opt.jpg)
This is the result:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b414838c-7ae3-489c-a9ea-5ebb6fafae21/creating-icons-in-adobe-xd-44-opt.jpg)
Select the right rectangle and change its fill color as I showed you in the previous step.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1afc4b9d-d3d4-461e-9b77-6d1c8cf2dd89/creating-icons-in-adobe-xd-45-opt.jpg)
Select both rectangles and hit Cmd + D
to duplicate them. Drag the two duplicated rectangles to the left and resize them as shown below:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c71991c9-c5af-460d-9119-25a36823473a/46-create-icons-adobe-xd-opt.png)
Double-click on the rectangles and move their bottom left and bottom right points upwards.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dd2e78c-4c54-4ddb-b640-1eaad74eb254/creating-icons-in-adobe-xd-46-opt-233x250.jpg)
Resize them and create a rhombus on the top with the Pen (P).
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/04cc2078-b2ae-42f9-a138-1fa23d1f6a19/creating-icons-in-adobe-xd-48-opt.jpg)
Grab the Pen (P) again and draw a sheet coming out from the drawer. Fill it with white.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba91f437-22d8-4dea-963b-d65ed45922f8/creating-icons-in-adobe-xd-49-opt.jpg)
Now, click on the Line (L) Tool and draw a line for the drawer handle:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4497ee7-3c04-4e4e-be69-4dd2d7e9818e/creating-icons-in-adobe-xd-50-opt.jpg)
Set its border width to 6
and its color to gray.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2d7ccdd-66b7-4f29-bafa-0722cd3ce77f/creating-icons-in-adobe-xd-51-opt.jpg)
With the line selected, add a shadow as shown below.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b5128470-b363-4b4f-9ea9-3cc47ba9e45e/creating-icons-in-adobe-xd-52-opt.jpg)
Create a circle with the Ellipse (E) Tool, fill it with the green from our palette and position it in the background with Object → Arrange → Send to back.
Select the green circle, copy and paste it to the front, then select everything and go to Object → Mask with Shape.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4ff1a27-184e-4568-bac8-cf86912cd923/creating-icons-in-adobe-xd-53-opt.jpg)
Icon Nr. 4: Office Plant #
Let’s continue with our fourth artboard.
Grab the Ellipse (E) Tool and create two shapes like I did. Use the eyedropper to set the fill color of the circle to the blue and the ellipse to the red of our palette.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a25791dc-b16e-4eae-abe4-ed1206676359/creating-icons-in-adobe-xd-54-opt.jpg)
Hit Cmd + D
to duplicate the red shape and move it downwards:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a8b0254-e5a2-4840-b130-cb0a8780a441/creating-icons-in-adobe-xd-55-opt.jpg)
Select the Pen (P) and draw a little triangle on the right to fill the empty space between the two ellipses, then set its fill color with the same red. Uncheck border option.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b710f62e-3bee-4ac1-b8d4-0ade60e97ed7/creating-icons-in-adobe-xd-56-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7779018-5002-47d8-ac85-38b328bb3e5f/creating-icons-in-adobe-xd-57-opt.jpg)
Repeat the same on the left side.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a4df0f55-f042-49f6-95bf-b46035e4ea11/creating-icons-in-adobe-xd-58-opt.jpg)
Now, select all your red shapes and click on “Add” to unify them.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8856b352-4aa3-4bd9-8a0a-2eedbbb2fb90/creating-icons-in-adobe-xd-59-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b367e39-0e1d-42dc-8cd5-5887371735e7/creating-icons-in-adobe-xd-60-opt.jpg)
Grab the Ellipse (E) Tool again and draw another ellipse like the one in the image below.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f9e9728-2eaa-44bb-9e35-964c763a947d/creating-icons-in-adobe-xd-61-opt.jpg)
Select both shapes and center them using “Align Horizontally”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d1d76781-f918-4ae2-ba12-2bd91cf2adf0/creating-icons-in-adobe-xd-62-opt.jpg)
Select the ellipse we have just created and set its fill color to the same red as the bottom shape. Then double-click on “Fill” and set the red brightness handle a little to the right to make the red darker.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31ac43f9-8db4-4141-ac1f-4ed11861ae9b/colorpicker-red-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aa87465-3f46-4fc6-b912-c6ed5aad7f43/creating-icons-in-adobe-xd-64-opt.jpg)
Select the darker ellipse and hit Cmd + D
twice to clone the shape twice. Move the top shape downwards.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d2d484f-ebdc-4791-a35d-c15e620f0d96/creating-icons-in-adobe-xd-65-opt.jpg)
Select the two ellipses on the top and click on “Intersect”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47212ff3-8e97-43f3-9b9b-f0f197351d0b/creating-icons-in-adobe-xd-66-opt.jpg)
Then select the shape you obtained and fill it with a darker red like I showed you in the previous step.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32649762-5114-4d65-88e9-0d4af0aefb6a/67-create-icons-adobe-xd-opt.png)
With the rectangle tool, draw the bottom part of the plant pot.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff17b7ee-a74e-4d74-8102-c610f812c175/creating-icons-in-adobe-xd-68-opt.jpg)
Now, copy both the rectangle and the ellipse shapes and move them next to your artboard so we can create another shape to do a shadow effect.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b7e62fe-aea5-4764-b72d-5254365938ee/creating-icons-in-adobe-xd-69-opt.jpg)
Keeping both shapes selected, click on “Intersect”, like in the previous step. The result will look like this:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24857be6-b633-4d94-a399-bef5483bd13a/creating-icons-in-adobe-xd-70-opt.jpg)
Set a darker red as the fill color of the newly-created shape by double-clicking on its fill. Then move it to the flower pot:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/465019af-bf28-4b43-8ab3-9275a1366a8c/creating-icons-in-adobe-xd-71-opt.jpg)
Bring it behind the ellipse shape by clicking on Object → Arrange → Send Backward. This action is also possible using the context menu (via right click).
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/954f4d17-00ec-42e7-bada-d1318575daab/creating-icons-in-adobe-xd-72-opt.jpg)
On to the last steps. Create a green rectangle like the one I show you here:
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2b7f6d25-cf3d-4b93-b3b9-5d1c0c6b4019/creating-icons-in-adobe-xd-73-opt.jpg)
Take the Ellipse (E) Tool and draw a squashed, white ellipse.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e4dd9c54-01ef-4a72-9e4f-50d1750282d0/creating-icons-in-adobe-xd-74-opt.jpg)
Hit Cmd + D
to duplicate it and set rotation to 90°
.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/62c864ff-4e8d-4efb-86dc-44745a4421a3/creating-icons-in-adobe-xd-75-opt.jpg)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/34cf63a4-a7ac-4df3-b9bc-4936afc28892/creating-icons-in-adobe-xd-76-opt.jpg)
Unify the shapes by clicking “Add”, then duplicate them with Cmd + D
. Set rotation to 45°
.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0ac65ed-f000-4021-9ff0-f3621531f6fa/creating-icons-in-adobe-xd-77-opt.jpg)
Unify the shapes by clicking on “Add” and set its color to gray by double clicking on “Fill”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a05a16e9-5991-4de7-894c-eeb1fe151f8c/creating-icons-in-adobe-xd-78-opt.jpg)
Holding down Shift
and Alt
, drag a handle inwards to make the shape smaller.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7485bcbb-85f5-4608-b981-0e139a924a2d/creating-icons-in-adobe-xd-79-opt.jpg)
Now, draw a yellow circle in the center.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/12f751c6-bd7f-43e6-b74b-8d702bab9313/creating-icons-in-adobe-xd-80-opt.jpg)
To create the leaves, draw a little green circle on the left.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51a711e9-4bf2-4b2d-b2b6-abccbb3beb7d/creating-icons-in-adobe-xd-81-opt.jpg)
Double-click on it and drag the top and bottom handles apart from each other.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd3798dd-7f7b-4eed-bcc5-90e6001e1a34/creating-icons-in-adobe-xd-82-opt.jpg)
Then double-click on the top and bottom points of the leaf to create a sharp angle.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905fb6-8700-403e-9ba5-62f4f2b82b2e/creating-icons-in-adobe-xd-83-opt.jpg)
Rotate the shape by 307°
.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4f88777c-5ba5-403f-9df0-4f280b051df1/creating-icons-in-adobe-xd-84-opt.jpg)
Hit Cmd + D
to duplicate the shape and fill the duplicate with a darker green.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b29c4b6-0f7f-4599-880c-bf8059a05518/creating-icons-in-adobe-xd-85-opt.jpg)
Click on the left handle point of the leaf and delete it.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5687086-a50d-471f-94f0-a59018a01e34/creating-icons-in-adobe-xd-86-opt.jpg)
Duplicate the leaf and move the copy to the right of the stem.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9083375-cfb4-40db-893f-87457e37c088/creating-icons-in-adobe-xd-87-opt.jpg)
Select the blue circle and copy and paste it.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/33fb6b4b-9aaa-4e35-ab83-4c641fd9d972/creating-icons-in-adobe-xd-88-opt.jpg)
Select everything and click on Object → Mask with shape.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/059c8728-0b1a-42c4-95f0-673844f37741/creating-icons-in-adobe-xd-89-opt.jpg)
Ta-daa! Our icons are ready.
Export Your Icons #
After that, you will be able to export your icons to PNG and SVG. Click on File > Export. A popup window will let you choose the way to export your icons. You can choose to export for web, iPhone and Android. Additionally, you can decide in which format (PNG and SVG) and which dimensions (1x, 2x, 3x and more) to export them.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aee503f6-2192-4773-a5b4-b2892c7b873e/93a-create-icons-adobe-xd-opt.png)
Creating A Prototype #
This is the final step of this tutorial — and the best part of Adobe Experience. Click on the top label “Prototype”.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5dfe9fe7-358c-426f-ab33-ce203645b7d8/creating-icons-in-adobe-xd-90-opt.jpg)
Prototype is the section where you can organize your presentation of the work. You can organize it in slides, interact with them, and record the interaction. In our case, we just need to do few things to present our icons. Let’s see how to do that.
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fa5160d-d6f2-4968-aa26-891c01e845c2/93c-create-icons-adobe-xd-opt.png)
![Creating Icons in Adobe XD Tutorial](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f4a1c35b-a0dc-4d6a-8f87-8b968ddd22b3/93d-create-icons-adobe-xd-opt.png)
Now, paste the URL in the browser and can click on the icon to traverse through all icons.
![Drag to create other five squares.](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/349d80ff-511e-4634-8d24-8741b4524acc/color-palette-4.png)
Conclusion #
We now have created an icon set entirely in Adobe XD — something I usually do in Illustrator. I hope you enjoyed this tutorial and that it inspired you to take your first steps with this new tool.
You can download download my sample file and find more tutorials on the Adobe blog, too.
Further Reading #
- Useful Prototyping Tricks in Adobe XD
- Animated Microinteractions In Mobile Apps
- How Prototyping Made Us More Efficient
- How Prototyping Made Us More Efficient
![Smashing Editorial](https://www.smashingmagazine.com/images/logo/logo--red.png)
— Comments 20
Wonderful tutorial, looking forward to using XD once Adobe gets off their ... and releases the Windows version.
Thanks for the article. Would be great to understand what motivated you to try this, and having done it, how XD compares to other, more obvious tools for this type of work, such as Sketch and Illustrator?