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

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

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

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

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

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

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