Advertisement
  1. Design & Illustration
  2. Icon Design
Design

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
Final product image
What You'll Be Creating

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

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new document

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
setting up a custom grid

Quick tip: you can learn more about grids by reading this in-depth piece on How Illustrator’s Grid System Works.

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
setting up the layers

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.

creating the reference grids main shape

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.

creative the active drawing areas main shape

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.

adding the remaining reference grids

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.

creating and positioning the main shape for the back buttons main body

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.

adding the outline to the back buttons main body

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.

creating and positioning the main shape for the body of the back buttons arrow

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.

finishing off the back button

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

creating and positioning the main shapes for the forward button

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

creating and positioning the main shapes for the up button

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

creating and positioning the main shapes for the down button

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.

creating and positioning the main shape for the refresh buttons main body

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.

opening up the path of the refresh buttons main body

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.

creating and positioning the main shape for the refresh buttons arrow head

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

adjusting the shape of the refresh buttons arrow head

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.

finishing off the refresh button

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.

creating and positioning the main shapes for the search icons lens

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.

adding the handle section to the search icons lens

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.

finishing off the search 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.

adding the plus sign to the zoom in buttons lens

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.

creating the zoom out button

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.

creating and positioning the main shape for the toggle on visibility button

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.

adjusting the shape of the toggle on visibility button

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.

adding the outline to the toggle on visibility button

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.

adding the pupil section to the toggle on visibility button

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.

finishing off the toggle on visibility button

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.

creating the toggle off visibility button

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.

creating and positioning the main shapes for the upload buttons box section

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

adding the side segments to the upload buttons box section

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.

finishing off the upload button

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

creating the download button

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.

creating and positioning the main shapes for the information prompt buttons main body

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.

adding the little dot to the information prompt buttons main body

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.

finishing off the information prompt button

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.

creating and positioning the main shapes for the share buttons main sections

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.

finishing off the sharing button

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.

creating and positioning the main shapes for the toggle off buttons main body

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.

finishing off the toggle off button

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

creating the toggle on button

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.

creating the main circle for the menu buttons center section

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.

adding the bar segment to the menu buttons center section

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.

finishing off the burger menu button

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.

creating and positioning the main shapes for the settings buttons bar segments

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.

finishing off the settings button

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.

creating and positioning the main shape for the like buttons upper body

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.

uniting the composing shapes of the like buttons upper body into a single larger shape

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.

adjusting the shape of the like buttons upper body

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.

adjusting the shape of the like buttons lower body

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.

finishing off the like button

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.

creating the dislike button

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!

finished project preview
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.