·

How to Create an Email UI Icon Pack

This page may contain links from our sponsors. Here’s how we make money.

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

How to Create an 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)
Creating a new document in Illustrator

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.

Creating the layers

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.

Adding Guides for Reference

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.

Drawing the guides and border

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.

Copying to all of the art boards

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.

Aligning to the art board

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.

Rounded stroke

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.

Adding color to the bottom of the icon

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.

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.

Live corners

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.

Aligning to the active art board

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.

Adding a rectangle

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.

Adding Anchors

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.

Deleting an anchor point

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.

Creating the fold effect

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.

Beginning the archive icon

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.

Adding the handle

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.

Creating the box

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.

Working with shapes to create the icon

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.

Beginning the trash icon

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.

Round cap

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.

Creating the lid's bottom section

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.

Creating the lid's handle

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.

Creating the sent icon

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 ().

Working with anchor points

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.

Creating a triangle shape

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).

Horizontal move

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.

Positioning shapes

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.

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.

Stroke

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.

Beginning the calendar icon

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.

Creating the top of the calendar icon

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.

Adding round caps

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.

Creating the contacts icon

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.

Creating the head

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.

Shape for the body

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.

Adjusting the position of the shape

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.

Adding an outline

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.

Creating a message icon

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.

Using the direct selection tool

Step 3

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

Closing the path

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.

Creating a thick outline

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.

Adding three dots

Great Job!

As always, I really hope you had fun working on the project and most importantly managed to learn something new and useful during the process.

That being said, if you have any questions please feel free to post them within the comments section and I’ll get back to you as soon as I can!

Finished icon set
Get the Free Resources Bundle