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.You can view this video and many more on our Envato Tuts+ YouTube Channel.

Also, if you want to expand your icon library, you can always do so by heading over to Envato Elements where you'll find a great selection of vector icons. Or find some free SVG icons on Reshot.

If you use Canva for creative projects, you can now access premium graphics and generate new icons without leaving Canva! With the new Envato plugin available to subscribers, you can now create icons in seconds thanks to AI generative technology. Learn more and try it out today!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!