How to Create an Email UI Icon Pack

In today’s tutorial we’re going to take a close look behind the process of creating an email themed icon pack, and see how easy it is to create each asset using nothing more than a couple of basic geometric shapes that we’re going to adjust here and there.

So, assuming you already have Illustrator up and running, let’s jump straight into it!

Tutorial Details: Create an Email UI Icon Pack

Program: Adobe Illustrator
Difficulty: Beginner
Topics Covered: Compositional Construction, Shape Alignment, Grid Positioning
Estimated Completion Time: 60 Minutes

Final Image: Email UI Icon Pack

1. Set Up a New Document

As with any new project, we’re going to kick things off by creating a New Document by heading over to File > New (or by using the Control-N keyboard shortcut) which we will adjust as follows:

Number of Artboards: 8
Spacing: 24 px
Columns: 4
Width: 48 px
Height: 48 px
Units: Pixels

And from the Advanced tab:

Color Mode: RGB
Raster Effects: Screen (72 ppi)

2. Set Up the Layers

As soon as we’ve finished setting up our project file, we need to take a couple of moments and structure it by opening up the Layers panel and then creating a total of two layers which we will rename as follows:

layer 1 > reference grids
layer 2 > icons

By doing so, we will separate our icons from the reference grids which we are going to be creating later on.

3. Create the Reference Grids

Once we’ve finished layering our document, we can move on to adding the basic reference grids, which will help protect our icons from being clipped by integrating a small protective padding.

Step 1

Grab the Rectangle Tool (M) and use it to create a 48 x 48 px square, which we will color using #F15A24 and then position to the center of the first Artboard using the Align pane’s Horizontal and Vertical Align Center options.

Step 2

Add the active drawing area using a smaller 40 x 40 px square (#FFFFFF) which will give our icons an all-around 4 px protective padding. Once you’re done, make sure you select and group the two shapes together using the Control-G keyboard shortcut.

Step 3

Fill in the remaining Artboards using seven copies (Control-C) of the one reference grid that we’ve just finished working on, which we will paste in place using the Control-F keyboard shortcut. Take your time and once you’re done, make sure you lock the current layer before moving on to the next step.

4. Create the Inbox Icon

As soon as we’ve finished setting up our reference grids, we can position ourselves onto the second layer (that would be the top one), and then zoom in onto our first Artboard, so that we can start working on the actual icons.

Step 1

Start by creating a 36 x 36 px square, which we will color using #E9E9FF and then center align to the underlying Artboard using the Align panel. As you can see, this will result in an all-around 2 px gap, which will be filled in by the outline later on.

Step 2

Give the shape that we’ve just created an outline using the Stroke method, by creating a copy of it (Control-C) which we will paste in front (Control-F) and then adjust by first changing its color to #6E83F9, making sure to set its Width to 4 px and its Corner to Round Join afterwards. Once you’re done, select and group the two shapes together using the Control-G keyboard shortcut.

Step 3

Add the front section using a 36 x 12 px rectangle, which we will color using #6E83F9 and then center align to the bottom edge of the shapes that we’ve just grouped.

Step 4

Adjust the shape that we’ve just created, by cutting out a 12 x 6 px rectangle (highlighted with red) from the center of its top edge using Pathfinder’s Minus Front Shape Mode.

Step 5

Finish off the icon, by individually selecting each of the cutout’s resulting corners using the Direct Selection Tool (A) and then setting their Radius to 2 px using the Live Corners input box. Once you’re done, don’t forget to select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.

5. Create the Drafts Icon

Assuming you’ve finished working on the first icon, position yourself onto the neighbouring Artboard, where we will focus on the next one.

Step 1

Start by creating the document’s main body using a 28 x 36 px rectangle, which we will color using #E9E9FF and then center align to the underlying active drawing area.

Step 2

Create the main shape for the cutout responsible for the folded corner using a 12 x 12 px square (highlighted with red), which we will align to the larger rectangle’s top-right corner.

Step 3

Using the Add Anchor Point Tool (+) add two new anchors to the path of the larger rectangle, using the overlapping square as your main guide.

Step 4

Adjust both the square and the larger rectangle by removing their top-right anchor points using the Delete Anchor Point Tool (–), by simply clicking on them, moving on to the next step once you’re done.

Step 5

Finish off the icon, by changing the color of the folded corner to #6E83F9, and then giving both it and the larger document a 4 px thick outline (#6E83F9) using the Stroke method. As always, once you’re done, don’t forget to select and group all of the different sections’ composing shapes, doing the same for the entire icon afterwards.

6. Create the Archive Icon

Position yourself onto the upcoming Artboard, and let’s start working on our third icon.

Step 1

Create the main shapes for the box’s main body using a 28 x 24 px rectangle (#E9E9FF) with a 4 px thick outline (#6E83F9), which we will group (Control-G), and then center align to the active drawing area’s bottom edge.

Step 2

Add the little handle cutout using an 8 px wide 4 px thick Stroke line (#6E83F9) with a Round Cap, which we will position as seen in the reference image.

Step 3

Create the box’s upper body using a 36 x 4 px rectangle (#6E83F9) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then position on top of its upper outline, so that their paths end up overlapping.

Step 4

Finish off the icon, by adding the little folder using a 20 x 8 px rectangle (#6E83F9) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then position on top of the previous section. Once you’re done, make sure you select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.

7. Create the Trash Icon

We are now down to our first row’s last icon, so assuming you’ve positioned yourself onto the next Artboard let’s jump straight into it.

Step 1

Create the trash can’s main body using a 24 x 26 px rectangle (#E9E9FF) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then center align to the active drawing area’s bottom edge.

Step 2

Add the vertical detail lines using three 14 px tall 4 px thick Strokes (#6E83F9) with a Round Cap, which we will horizontally distance at 2 px from one another, grouping (Control-G) and then center aligning them to the trash can’s main body.

Step 3

Create the lid’s bottom section using a 32 x 4 px rectangle (#6E83F9) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then position on top of the can’s main body so that their paths overlap as seen in the reference image.

Step 4

Finish off the icon, by adding the little handle using a 12 x 6 px rectangle with a 4 px thick Stroke and a Round Join, which we will position to the center of the active drawing area’s top edge. Once you’re done, don’t forget to select and group all of the icon’s composing shapes together using the Control-G keyboard shortcut.

8. Create the Sent Icon

Assuming you’ve already positioned yourself onto the second row of Artboards, let’s start working on our fifth icon.

Step 1

Create the paper plane’s main body using a 36 x 36 px square, which we will color using #E9E9FF and then position to the center of the underlying active drawing area.

Step 2

Adjust the shape that we’ve just created, by adding a new anchor point to the center of its right edge using the Add Anchor Point Tool (+), and then immediately removing its top and bottom ones using the Delete Anchor Point Tool (–).

Step 3

Continue adjusting the shape, by adding a new anchor to the center of its left edge, followed by a top and bottom one vertically stacked at 4 px from it.

Step 4

Select the center anchor point that we’ve just created, and then push it to the inside by a distance of 4 px using either the directional arrow keys or the Move tool (right click > Transform > Move > Horizontal > 4 px).

Step 5

Create the main shape for the inner folded section, using a 20 x 8 px rectangle (#6E83F9) which we will adjust by turning it into a right-pointing triangle as we did with the larger shape. Once you’re done, give the resulting shape a 2 px thick outline (#6E83F9), grouping (Control-G) and then positioning the two shapes as seen in the reference image.

Step 6

Quickly mask the shapes that we’ve just grouped, by creating a copy (Control-C) of the larger underlying shape, which we will paste in front (Control-F) and then with both it and the desired shapes selected simply right click > Make Clipping Mask.

Step 7

Finish off the icon, by quickly adding the 4 px thick outline to the larger shape using the Stroke method, making sure to select and group all of its composing shapes afterwards using the Control-G keyboard shortcut.

9. How to Create the Calendar Icon

As soon as you’ve finished working on the previous icon, make your way to the neighbouring Artboard and let’s focus on creating the next one.

Step 1

Start by creating the calendar’s lower body using a 36 x 24 px rectangle (#E9E9FF) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then center align to the active drawing area’s bottom edge.

Step 2

Add the upper body using a 36 x 8 px rectangle (#6E83F9) with a 4 px thick outline (#6E83F9), which we will group (Control-G) and then stack on top of the previous shapes so that their paths overlap.

Step 3

Finish off the icon by quickly adding the vertical line segments using two 4 px tall 4 px thick Strokes (#6E83F9) with a Round Cap, which we will position as seen in the reference image. Take your time, and once you’re done, make sure you select and group all of the icon’s composing shapes using the Control-G keyboard shortcut.

10. How to Create the Contacts Icon

Assuming you’ve finished working on the previous icon, position yourself onto the upcoming Artboard where we will gradually build the contacts one.

Step 1

Start by creating a 36 x 36 px circle, which we will color using #E9E9FF and then center align to the underlying active drawing area.

Step 2

Create the human silhouette’s head using a 12 x 12 px circle, which we will color using #6E83F9 and then position at a distance of 6 px from the previous shape’s top anchor point.

Step 3

Add the main shape for its body using a 32 x 28 px ellipse, which we will color using #6E83F9 and then position as seen in the reference image. Once you’re done, make sure you select and group (Control-G) the two shapes together before moving on to the next step.

Step 4

Mask the two shapes that we’ve just grouped, by creating a copy (Control-C) of the underlying circle, which we will paste in front (Control-F) and then with both it and the desired shapes selected simply right clicking > Make Clipping Mask.

Step 5

Finish off the icon, by adding the 4 px thick outline (#6E83F9) making sure to select and group all of its composing shapes together afterwards using the Control-G keyboard shortcut.

11. How to Create the Messages Icon

We are now down to our eighth and last icon, so assuming you’ve already positioned yourself onto the remaining Artboard let’s wrap things up.

Step 1

Start by creating the speech bubble’s main body using a 32 x 32 px circle, which we will color using #E9E9FF and then center align to the active drawing area’s top edge, positioning it at a distance of just 2 px.

Step 2

Open up the circle’s path by selecting its bottom anchor point using the Direct Selection Tool (A) and then using the Cut path at selected anchor points option, making sure to select the bottom-right and push it down by a distance of 4 px using the directional arrow keys.

Step 3

Quickly close the resulting path using the Control-J keyboard shortcut, moving on to the next step once you’re done.

Step 4

Give the resulting shape a 4 px thick outline (#6E83F9), making sure to select and group the two together afterwards using the Control-G keyboard shortcut.

Step 5

Finish off the icon and with it the project itself, by adding the little speech dots using three 4 x 4 px circles (#6E83F9) horizontally distanced at 2 px from one another, which we will group (Control-G) and then position to the center of the larger bubble. Once you’re done, don’t forget to select and group (Control-G) all of the icon’s composing shapes before finally hitting that save button.