How to Make a Check Icon

How to Make a Check Icon

How to Make a Check Icon

How to Make a Check Icon

How to Make a Check Icon
How to Make a Check Icon
How to Make a Check Icon How to Make a Check Icon How to Make a Check Icon How to Make a Check Icon How to Make a Check Icon

How to Make a Check Icon

Final product image
What You’ll Be Creating

Always wanted to learn how to create a check icon, but never knew exactly where to start? Well, if that’s the case then you’re in luck, since in this tutorial I’m going to walk you through the entire process from start to finish, and I’ll show you how to do so using Adobe Illustrator.

So if you’re new to icon design and feel like learning more about how to make icons, then this should prove to be a great starting point.

Also, if you want to expand your icon library, you can always do so by heading over to GraphicRiver, where you’ll find a great selection of vector icons.

You can view this video and many more on our Envato Tuts+ YouTube Channel.


How to Make a Check Icon Using Adobe Illustrator

Assuming you already have Illustrator running in the background, bring it up and let’s get started!

Step 1

As with every new project, we’re going to start
by setting up a new document. Head over to File > New or use the Control-N
keyboard shortcut, which will bring up the following window.

Here, we’ll want to make sure that our Profile is set to Web, and then we’re going to set both the Width and Height of our Artboard to 64 px.

setting up a new document

Step 2

As soon as we hit OK, we can start working on
our little icon by opening up the Layers
panel and then creating a secondary layer, naming them both so that we can
separate our shapes from our reference grid.

setting up the layers

Step 3

Position yourself on the bottom layer, and
let’s create the main shape for our reference surface using a 64 x 64 px square, which we will color
using a dark orange (#F15A24), making sure to center align it to the underlying Artboard
afterwards.

creating the main reference surface

Step 4

Add the active drawing area using a smaller 56 x 56 px square, which we will color
using white (#FFFFFF) and then position in the center of the previous shape, making sure
to select and group both of them together using the Control-G keyboard shortcut.

While basic, this reference grid will give us an
all-around 4 px protective padding,
which should prevent our icon from being clipped when used by other people.

adding the active drawing area

Step 5

As soon as we’ve finished setting up the grid, we
can lock the current layer and move on up to the second one, where we
will start working on the actual icon.

locking the layer

Step 6

Grab the Ellipse Tool (L) and let’s create the background
using a 56 x 56 px circle, which we
will color green (#3BE23B) and then center align to the underlying Artboard.

creating the background

Step 7

Next, we need to
create a set of custom guides, which will help us figure out the proportion and
angle of our check mark.

To do this, grab
the Rectangle Tool (M) and create
an 8 x 8 px square, followed by
another one that has double the Width
and Height.

Once we have both shapes in place, quickly group them using the Control-G keyboard shortcut, making
sure to center align them to the underlying Artboard afterwards.

creating the main shapes for the guides

Step 8

Since we can’t
create guides from grouped shapes, we’ll first have to separate them, which
will then allow us to right click and use the Make Guides option that would otherwise be hidden.

Once we’ve converted our shapes to guides, it would be a good idea to
lock them, so that we won’t move them by accident.

locking the guides

Step 9

At this point, we
can flip our fill color with a white Stroke, and then open up the Stroke panel and set its Weight to 8 px and both its Cap
and Corner to Round.

All we have to do now is draw the little check mark symbol starting from
the top-left corner of the smaller square, going down diagonally to where the
two guides meet, and then all the way up to the larger one’s top-right corner.

drawing the check symbol

Step 10

Once we’re done, we can hide the guides and
then select and group all of the icon’s composing shapes together using the Control-G keyboard shortcut.

finishing off the background icon

Step 11

If you need to create a version of the icon
without the background, you can easily do so by first setting the color of the
check mark to green (#3BE23B), and then removing the larger circle.

creating the second icon variation

Step 12

All you have to do then is open up the Transform
panel, and uncheck the Scale Strokes
& Effects
option, so that you can double the size of the symbol while
maintaining the same 4 px padding.

finishing off the second icon variation

Great Job!

As always, I hope you had fun watching this video and most importantly managed to learn something new and useful during the process!

Further Develop Your Icon Building Skills!

Just finished going through this quick tutorial, and feel like learning more? Well, if that’s the case, you’re in luck, since I took the time to put together this little list that should keep you going for the following days!