# How to Create 10 Common Icons and Their Variations in Adobe Illustrator

This post is part of a series called 10 Years of Envato Tuts+!.
10 Mistakes New Artists Make and How You Can Avoid Them

Today is a special one, since we’re celebrating ten years of awesomeness, and how better to do that than by giving you a special tutorial where you’ll learn how to create a set of ten must-have UI icons, using the most basic shapes and tools that Illustrator has to offer.

If you're looking for more icons, in different styles, head over to GraphicRiver.

That being said, get a quick sip of that fresh baked coffee, and let’s get to work.

## 1. How to Set Up a New Project File

Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:

• Number of Artboards: 20
• Spacing: 20 px
• Width: 64 px
• Height: 64 px
• Units: Pixels

• Color Mode: RGB
• Raster Effects: Screen (72ppi)
• Preview Mode: Default

## 2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little grid so that we can have full control over our shapes.

### Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

• Gridline every: 1 px
• Subdivisions: 1

### Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid and Snap to Pixel option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode (if you’re using an older version of the software).

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my How to Create Pixel-Perfect Artwork tutorial, which will help you widen your technical skills in no time.

## 3. How to Set Up the Layers

With the new document created, it would be a good idea to structure our project using a few layers in order to separate the reference grids from the actual icons. If you're familiar with my previous tutorials, you’ll notice that with this one we’re taking a slightly different approach, since we’re basing the project on Artboards instead of Layers due to the high icon count.

That being said, bring up the Layers panel, and create a total of two layers, which we will rename as follows:

• layer 1: reference grids
• layer 2: icons

## 4. How to Create the Reference Grids

The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 64 x 64 px, which is on the medium part of the scale.

### Step 1

Make sure you’re on the right layer (that would be the first one), and then grab the Rectangle Tool (M) and create a 64 x 64 px orange (#F15A24) square which we will center align to the first Artboard and use to define the overall size of our icons.

### Step 2

Add a smaller 56 x 56 px one (#FFFFFF) which we will position on top of the previous shape, since it will act as our active drawing area, thus giving us an all-around 4 px padding to work with.

### Step 3

Select and group the two squares together using the Control-G keyboard shortcut, and then create the remaining grids using 19 copies (Control-C > Control-F) which we will position onto each of the empty Artboards. Take your time, and once you’re done, make sure you lock the current layer before moving on to the next section.

## 5. How to Create the Navigation Icons

Assuming you’ve successfully managed to create the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first icon group, which will help us navigate better.

### Step 1

Start working on the back icon by creating its main body using a 48 x 48 px circle, which we will color using #DCEEFF and then center align to the first Artboard.

### 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 #629CF9 and then flipping its Fill with its Stroke (Shift-X). Set the resulting outline’s Weight to 8 px, selecting and grouping all of the current section’s composing shapes together afterwards using the Control-G keyboard shortcut.

### Step 3

Start working on the little left-facing arrow by creating its main body using a 24 px wide 8 px thick Stroke line (#629CF9) with a Round Cap, which we will center align to the larger underlying Artboard.

### Step 4

Finish off the icon by drawing the arrow’s head using an 8 px thick Stroke (#629CF9) with a Round Cap and Join. Take your time, and once you’re done, select and group the two together (Control-G), doing the same for all the icon’s composing shapes before moving on to the next one.

### Step 5

Create the forward icon using a copy (Control-C) of the one that we’ve just finished working on, which we will paste (Control-F) onto the second Artboard and then adjust by vertically reflecting it (right click > Transform > Reflect > Vertical).

### Step 6

Create the scroll up icon using a copy (Control-C) of the previous icon, which we will paste (Control-F) onto the next Artboard and then adjust by rotating it -90º using the Rotate tool (right click > Transform > Rotate > -90º).

### Step 7

Add the scroll down icon using a copy (Control-C) of the one that we’ve just created, which we will paste (Control-F) onto the fourth Artboard and then adjust by horizontally reflecting it (right click > Transform > Reflect > Horizontal).

### Step 8

Start working on the refresh icon by creating its main body using a 36 x 36 px circle with an 8 px thick Stroke (#629CF9), which we will center align to the active drawing area’s bottom edge.

### Step 9

Open up the circle by removing its top-left quarter section, making sure to set the resulting path’s Cap to Round from within the Stroke panel.

### Step 10

Create the arrow head using an 18 x 24 px rectangle, which we will color using #DCEEFF, and then position as seen in the reference image.

### Step 11

Turn the rectangle into a left-facing arrow by adding a new anchor point to the center of its left edge using the Add Anchor Point Tool (+), and then removing the outer-left ones by clicking on them using the Delete Anchor Point Tool (-).

### Step 12

Finish off the arrow, and with it the icon itself, by giving the resulting shape an 8 px thick outline (#629CF9) with a Round Join, selecting and grouping (Control-G) the two together, and doing the same for the entire icon afterwards.

## 6. How to Create the Search and Magnification Icons

Assuming you’ve finished working on the first icon group, move on to the next Artboard and let’s start working on our next group.

### Step 1

Create the search icon’s lens section using a 40 x 40 px circle (#DCEEFF) with an 8 px thick outline (#629CF9), which we will group (Control-G) and then align to the active drawing area’s top-left corner.

### Step 2

Take a couple of moments and draw the handle section using an 8 px thick Stroke (#629CF9) with a Round Cap, using the reference image as your main guide.

### Step 3

Finish off the icon by shortening the length of its handle by selecting its top anchor point using the Direct Selection Tool (A) and then dragging it downwards diagonally while holding down the Shift key to keep a straight line. Take your time, and once you’re done, select and group (Control-G) all its composing shapes before moving on to the next icon.

### Step 4

Create the zoom in icon using a copy (Control-C) of the one that we’ve just finished working on, which we will paste (Control-F) onto the next Artboard, adding the plus sign to the center of its lens section using two 16 px long 8 px thick Stroke lines (#629CF9) with a Round Cap. Take your time, and once you’re done, select and group (Control-G) all its composing shapes before moving on to the next one.

### Step 5

Add the zoom out icon using a copy (Control-C) of the one that we’ve just created, which we will paste (Control-F) onto the next Artboard and then adjust by double clicking on the plus sign to isolate it. Then ungroup (right click > Ungroup) and remove its vertical Stroke line.

## 7. How to Create the Visibility Icons

We are now down to our third icon group, so make sure you’ve positioned yourself onto the next Artboard (that would be the ninth one) and let’s get started.

### Step 1

Create the toggle on visibility icon’s main body using a 48 x 32 px ellipse, which we will color using #DCEEFF and then center align to the underlying Artboard.

### Step 2

Adjust the shape that we’ve just created by pinching its left and right anchor points using the Anchor Point Tool (Shift-C) in order to turn the ellipse in a more eye-like shape.

### Step 3

Give the resulting shape an 8 px thick outline (#629CF9) with a Round Join, selecting and grouping the two together afterwards using the Control-G keyboard shortcut.

### Step 4

Add the pupil section using a 16 x 16 px circle, which we will color using #629CF9 and then center align to the two shapes that we’ve just grouped.

### Step 5

Finish off the icon by adding a little reflection using an 8 x 8 px circle, which we will color using #DCEEFF and then align to the pupil’s top-right corner, grouping (Control-G) the two together afterwards. Take your time, and once you’re done, select and group (Control-G) all of its composing shapes before moving on to the next one.

### Step 6

Create the toggle off visibility icon using a copy (Control-C) of the one that we’ve just finished working on, which we will paste onto the tenth Artboard and then adjust by drawing the diagonal line using an 8 px thick Stroke (#629CF9), selecting and grouping (Control-G) all of them together afterwards.

## 8. How to Create the File Sharing Icons

Let’s be honest, no true UI icon pack is complete without a set of file sharing icons, so let’s make sure we add a set of our own.

### Step 1

Start working on the upload icon by creating the main shapes for its box section using a 48 x 12 px rectangle (#DCEEFF) with an 8 px thick outline (#629CF9), which we will group (Control-G) and then center align to the active drawing area’s bottom edge.

### Step 2

Add the little extending segments using two 8 px tall 8 px thick Stroke lines (#629CF9) with a Round Cap, which we will position onto the sides of previously created shapes, selecting them and then creating a larger group (Control-G).

### Step 3

Add the up-facing arrow using a copy (Control-C) of the one that we already created for the navigation icons, which we will paste (Control-F) onto the current Artboard and then center align to the active drawing area’s top edge. Once you have the arrow in place, select and group all of the icon’s composing shapes together using the Control-G keyboard shortcut.

### Step 4

Create the download icon using a copy (Control-C) of the one that we’ve just finished working on, which we will paste onto the next Artboard and then adjust by horizontally reflecting its little arrow (right click > Transform > Reflect > Horizontal).

## 9. How to Create the Information Prompt Icon

If you’re like me, you’re probably one of those people that don’t really like the next item, since interfaces should be easy to use, but deep down know that sometimes it’s a necessary evil.

### Step 1

Create the icon’s main body using a 48 x 48 px circle (#DCEEFF) with an 8 px thick outline (#629CF9), which we will group (Control-G) and then center align to the 13th Artboard.

### Step 2

Create the exclamation mark’s little dot using an 8 x 8 px circle, which we will color using #629CF9 and then center align to the larger shapes, positioning it at a distance of 4 px from its outline’s bottom edge.

### Step 3

Finish off the mark, and with it the icon itself, by adding the line segment using a 12 px tall 8 px thick Stroke (#629CF9), which we will position above the dot, at a distance of just 4 px. Select and group (Control-G) the two shapes together, doing the same for the entire icon, before moving on to the next one.

## 10. How to Create the Share Icon

Sharing is one of those things that makes the Internet a great place to live out your digital existence, so I’m going to share with you a simple approach on how to create your very own shareable icon.

### Step 1

Create the icon’s main sections using three 16 x 16 px circles (#DCEEFF) with an 8 px thick outline (#629CF9), which we will individually group (Control-G) and then position as seen in the reference image.

### Step 2

Draw the line segment connecting all three sections using an 8 px thick outline (#629CF9) with a Round Cap and Join. Take your time, and once you’re done, send the resulting path underneath by right clicking > Arrange > Send to Back, selecting and grouping all of the icon’s composing shapes together using the Control-G keyboard shortcut.

## 11. How to Create the State Toggle Icons

We love turning things on and off, so why not spend a couple of moments and see how we can create our very own state indicator toggles.

### Step 1

Start working on the toggle off icon by creating its main body using a 48 x 32 px rounded rectangle (#DCEEFF) with a 16 px Corner Radius and an 8 px thick outline (#629CF9), which we will group (Control-G) and then center align to the next Artboard.

### Step 2

Add the state indicator using a 16 x 16 px circle, which we will color using #629CF9, and then center align to the larger shapes, positioning it at a distance of 4 px from the outline’s left edge. Once you’re done, select and group (Control-G) all three shapes together, before moving on to the next icon.

### Step 3

Create the toggle on state using a copy (Control-C) of the one that we’ve just finished working on, which we will paste onto the next Artboard (Control-F), and then adjust by vertically reflecting it (right click > Transform > Reflect > Vertical).

## 12. How to Create the Hamburger Menu Icon

The next item on our list is one of those icons that instantly became a game changer once it was used and fully understood, since it was instantly adopted as a universal symbol.

### Step 1

Start working on the menu’s center section by creating an 8 x 8 px circle, which we will color using #629CF9 and then center align to the active drawing area’s left edge.

### Step 2

Add the bar segment using a 36 px wide 8 px thick Stroke line (#629CF9) with a Round Cap, which we will center align to the active drawing area’s right side. Take your time, and once you have the path in place, select both it and the circle and group them together using the Control-G keyboard shortcut.

### Step 3

Finish off the icon by adding the top and bottom sections using two copies (Control-C > Control-F twice) of the shapes that we’ve just grouped, which we will position at a distance of 8 px from the original. Once you’re done, select and group (Control-G) all its composing sections before moving on to the next icon.

## 13. How to Create the Settings Icon

Be it either sprockets or sliders, we can all agree that the settings icon is a must-have item in any UI pack, since adjustments are one of those things that we always like to make, if you know what I mean.

### Step 1

Start out by creating the icon’s slider segments using three 48 px wide 8 px thick Stroke lines (#629CF9) with a Round Cap, which we will vertically stack at a distance of 16 px from one another, center aligning them to the empty underlying Artboard afterwards.

### Step 2

Finish off the icon by adding the adjustment knobs using three 12 x 12 px circles (#DCEEFF) with an 8 px thick outline (#629CF9), which we will individually group (Control-G) and then position on the sliders as seen in the reference image. 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.

## 14. How to Create the Like Icons

We are now down to our last icon group, and how better to end the pack than by adding the little heart states.

### Step 1

Start working on the upper section of the like button by creating a 28 x 28 px circle, which we will color using #DCEEFF, and then position 8 px from the active drawing area’s top edge and 4 px from its left one.

### Step 2

Create another 28 x 28 px circle (#DCEEFF), which we will position onto the opposite side of the active drawing area, making sure to maintain the same gaps. Once you have both shapes in place, select and unite them into a single larger object using Pathfinder’s Unite Shape Mode.

### Step 3

Turn on Pixel Preview mode (Alt-Shift-Y), and adjust the resulting shape by selecting and removing its bottom half and then snapping the top-center anchor point back to the Pixel Grid.

### Step 4

Grab the Pen Tool (P) and draw the heart’s lower body, making sure to smoothen out its side anchor points using the Convert selected anchor points to smooth. Take your time and adjust the shape by selecting and repositioning some of its handles’ end points as seen in the reference image, turning off Pixel Preview mode (Alt-Control-Y) before moving on to the next step once you’re done.

### Step 5

Finish off the icon by giving the resulting shape an 8 px thick outline (#629CF9) with a Round Join, making sure to select and group (Control-G) the two before moving on to the next one.

### Step 6

Create the final icon using a copy of the one that we’ve just finished working on, which we will position on the last Artboard and then turn into a dislike button by adding the diagonal crossbar using an 8 px thick Stroke (#629CF9) with a Round Cap. Once you’re done, select and group (Control-G) all its composing shapes before saving the project.

## Great Job! Our Little UI Pack Is All Finished!

As always, I hope you’ve enjoyed this step-by-step tutorial and most importantly learned something fresh and useful along the way!

One subscription.