How to Create a Cool Icon Pack for Team Awesome in Adobe Illustrator

Final product image — What You'll Be Creating

Today’s tutorial is a little bit special since I’ll be showing you the process behind the icon pack that I had the honor to create for our awesome little team here at Envato Tuts+. So if you’re into icon design, or you just want to add to your bag of vector tricks and tips, then grab yourself a cup of coffee and buckle in, since this tutorial will show you all the steps that you need to consider when creating a new icon pack.

If you like these sorts of icons, you should check out Envato Market for icon design inspiration.

1. Set Up the Document

As always, the first thing you should do when creating anything, be it an icon pack or an illustration, is to make sure that your document is properly set up. So, assuming you already have Illustrator up and running, let’s do just that by going to File > New or by pressing the Control-N keyboard shortcut.

As you can see, you are greeted by a little popup windows that has a bunch of options, but we’re only interested in a few of them:

Number of Artboards: 1
Width: 800 px
Height: 600 px
Units: Pixels

And from the Advanced tab:

Color Mode: RGB
Raster Effects: High (300 ppi)
Align New Objects to Pixel Grid: checked

Quick tip: you can leave the Raster Effects settings to Screen (72 ppi) since this won’t affect the look and overall quality of your design, as long as you’re not going to print it out. If you do need to get it inked on paper, you might want to use a higher value, but only if your design uses Stylize Effects such as Drop Shadows, Inner/Outer Glow, etc., since these tend to look pixelated when printed using a lower ppi value.

For those who are wondering why I set mine to 300, well let’s just say that for me it has become a reflex.

2. Set Up the Layers

Once I have my document properly set up, the next step I usually take involves the careful process of creating and labelling my layers so that I can have everything neatly organized and at hand.

So, let’s do just that by opening up the Layers panel, and creating five layers which we will name as follows:

base grids
medal
notebook
graduation
imac

3. Adjust the Grid

Since Illustrator allows the use of Grids, you should know that it gives you the option to snap your design to its Pixel Grid. That means that your shapes will look super crisp as long as you use the Snap to Grid / Pixel Grid options, since each anchor point will be positioned at the middle intersection of four pixels, thus snapping to it.

Because there are different situations that require different grid settings, sometimes you might find yourself in the position to adjust the ones running on your version of Adobe Illustrator.

I personally have gone for the lowest and at the same time the most accurate settings, because I feel I have more control over my designs.

To change these settings, you must go to Edit > Preferences > Guides & Grid. From there, a little popup will appear, where we need to adjust the following:

Gridline every: 1 px
Subdivisions: 1

Once you’ve adjusted these settings, all you need to do in order to make everything pixel crisp is enable the Snap to Grid option located under the View menu.

Quick tip: you should know that the Snap to Grid option will transform into Snap to Pixel every time you enter Pixel Preview Mode, but that’s totally fine, as most of the time you will be going back and forward with this display mode.

If you’re used to moving things around with the help of the keyboard’s directional arrow keys, you might want to change the Keyboard Increment to 1 px to get it as precise as possible. You can do this by going to Edit > Preferences > General > Keyboard Increment.

If your version of AI has the value set to pt, just go to Unitsand change the General and Stroke units to Pixels and you’re good to go.

You can read more about the Grid and how to create pixel-perfect artwork here:

4. Add the Base Grids

When creating any icon, there are a couple of things that you should always take into consideration, since I’m pretty sure they’ll help make the creative process a lot easier.

4.1. Choosing a Size for Our Icons

Every time you start a new project, you should take a couple of minutes to focus on the size of your icons. This step is really important, since you will want to create and use a Base Grid by choosing one of the default icon sizes available today (16 x 16 px, 32 x 32 px, 48 x 48 px, 64 x 64 px, 72 x 72 px, 96 x 96 px, 128 x 128 px, 256 x 256 px, etc.) which will help you create a consistent and cohesive pack. Depending on your project’s needs, you might end up using larger sizes or smaller ones, or even a combination of the two.

Now, for our present example, I’ve decided to go with a fairly large size of 96 x 96 px, since this type of icon would be something that you would probably see on an online learning website, such as Envato Tuts+.

4.2. Creating the Base Grids

By definition, a Base Grid is a precisely delimited reference surface that is constructed and used in order to guide the designer through the process of creating the icon pack’s assets. Usually the shape of the Base Grid is a perfect square, since it allows for a better planning and structuring of the shapes and lines onto the surface, compared to a circle giving us full control over the pixel count.

On the other hand, the circle as a shape is more useful when used as a Reference Grid since it allows the creation of detailed and intricate grids and reference lines that you can take advantage of to create compositions that have a more “perfect-geometry” feel to them.

I personally prefer to limit my Grid shapes, and use only square shapes, since I can usually build compositions that have a more organic feel to them, but that’s just me. I’ve seen a lot of people that create incredible stuff using highly detailed Guides.

For our example, we’re going to keep things simple, and build four base grids, one for each icon.

First, make sure that you position yourself onto the base grids layer, and then using the Rectangle Tool (M) let’s create a 96 x 96 px square, which we will color using a relatively light shade of grey (#E6E6E6).

Now since I usually like to give my icons a little padding, we will create a smaller 92 x 92 px square, which we will color using #F2F2F2 and position over the previous one, making sure to align it to its center.

Once you have both the base grid and padding, group the two shapes using Control-G and create three more copies, which we will position to their right side at a distance of 60 px.

As soon as you have all the base grids in place, you can lock the layer so that you won’t accidentally move them, and then we can start working on the first icon.

5. Create the Medal Icon

First, make sure you’re on the right layer, and then zoom in so that you have a nice clear view of the first base grid.

Step 1

We will start by creating the round bottom section, which houses the little vector-powered symbol.

First, grab the Ellipse Tool (L) and draw a 60 x 60 px shape, which we will color using a dark orange tint #D8532A, and then position towards the bottom-centered side of the smaller 92 x 92 px square, leaving a gap of 4 px between the two.

creating the medal icons base orange shape

Since we want everything to be as precise and sharp as possible, I would recommend that you use the Pixel Preview mode (View> Pixel Preview or Alt-Control-Y), since it will allow you to see the underlying pixel grid, giving you full control over the positioning of your shapes.

example of using the Pixel Preview mode to align the shapes to the grid

Step 2

As soon as you have the shape in place, give it an outline using the Offset Path tool. First select the shape and then go to Object> Path > Offset Path.

creating the medal icons main shape outline using the offset path tool

Give it an offset of 4 px.

applying a 4 px outline to the medals coin

This will create a new, larger shape that will be positioned underneath the one that we’ve used to create it.

Step 3

Now, as you can see, the circle maintains the same color, which is something that we’re going to want to change since the outline needs to be clearly visible.

So, let’s select the shape and change its color to something darker (#232323).

changing the medal coins outline color to something darker

Step 4

As soon as we have the outline, we can start adding details to the medal’s coin, and we will do so by first creating the ring highlight.

First, create a copy of the orange circle (Control-C > Control-F) and then using the Ellipse Tool (L) draw a 56 x 56 px shape (in my example colored using a darker orange) which we will position over the larger one.

adding a smaller circle to create the ring like highlight

Step 5

Now, with both shapes selected, use Pathfinder’s Minus Front option in order to create the cutout.

creating the medals ring like highlight using the minus front option from pathfinder

Step 6

Select the resulting shape, and adjust it by changing its color to white (#ffffff) and setting its Blending Mode to Overlay while lowering the Opacity to just 30%.

adjusting the blending mode for the medal ring like highlight

Step 7

Add two diagonal highlights, by creating one wider and one narrower rectangle, which we will then rotate at a 45° angle and adjust using the same settings that we used for the ring-like highlight that we just created.

adding the first set of diagonal highlights to the medals coin base

Step 8

As you can clearly see, the diagonal highlights go outside the surface of the coin, which is something that we need to change.

We will do that by creating a 56 x 56 px circle, which we will carefully align to the larger medal base, and then with both the circle and the highlights selected we will right click > Make Clipping Mask.

If you're wondering why I used a smaller clipping mask, the answer is because I didn’t want the diagonal highlights to overlap the ring one, which as you can see from the above image wouldn’t have looked all that nice.

creating a clipping mask to hide the outfacing sections of the diagonal highlights

As you can see, this will automatically hide the sections of the highlights that were going outside of the medal’s coin base, which is exactly what we wanted.

medal coin with first pair of diagonal highlights added

Step 9

Next, we will be adding some depth to the medal by creating a series of smaller circles to which we will add a bunch of ring highlights and shadows.

First, let’s create a 52 x 52 px shape (#AD4222) to which we will add a ring-like shadow following the same process as before, only this time we will use Darken as a Blending Mode and keep the Opacitylevel all the way down to 10%.

adding the first set of details to the medal icon

Step 10

Continue adding details by creating a 44 x 44 px circle (#D8532A) to which we will be adding a ring-like highlight as we did with the larger section of the medal’s coin.

adding the second ring like highlight to the medal coin

Step 11

Add two diagonal highlights, making sure to mask them so that they won’t overlap the circular one that we created in the previous step.

adding the second pair of diagonal highlights to the medal coin

Step 12

Create a 28 x 28 px circle (#D8532A) and position it over the second pair of diagonal highlights, making sure to center it to the rest of the coin’s shapes. Then add another ring-like highlight and a pair of diagonal ones for some more depth.

As you can see, I’ve positioned each of the diagonal highlight pairs differently so that they give the viewer the illusion of light bouncing off the coin’s surface.

adding the second set of details to the medal coin

Step 13

Start working on the inner vector symbol, by creating a 32 x 32 px circle (#AD4222) which we will transform by flipping its fill with its stroke (Shift-X), and applying a2 px Stroke Weight which we will align towards the outside. Once you’ve adjusted the shape, expand it by going to Object > Expand > Fill & Stroke.

Then start adding the remaining details such as the anchor points and bottom handles, using the Rounded Rectangle Tool in combination with the Rectangle and Ellipse Tool.

Take your time, and once you’re done move on to the next step.

adding the vector symbol to the medal icon

Step 14

Finish off the medal’s inner illustration, by adding the lightning strike. To do that, create two 8 x 12 px rectangles and adjust them by removing the first one’s top left anchor point and the second one’s bottom right one by selecting them using the Direct Selection Tool and then pressing Delete.

Position the two resulting shapes so that they overlap towards the center, forming a 4 px square where they intersect.

adding the lightning strike to the medal icon

Step 15

Finish off this section of the icon by creating two star-shaped highlights, which we will position towards the top right corner of the medal’s coin. We will use slightly different settings compared to the previous highlights, since we will go with Hard Light as a Blending Mode while keeping the Opacity level to a higher value of 50%.

Step 16

Once you’ve finished creating the bottom section of the medal, we can move on to building the ribbon that normally keeps it in place.

Start by creating a 38 x 47 px rounded rectangle (#364A5B) with a 19 px Corner Radius, which we will adjust by selecting and removing its top centered anchor using the Direct Selection Tool (A).

Once we’ve adjusted the shape, we need to make sure that its path is closed by pressing Control-J (unite), and then we can add a 4 px outline (#232323) and position it towards the top side of the medal’s coin so that its bottom section goes underneath it (right click > Arrange > Send to Back).

adding the ribbons base shapes to the medal icon

Step 17

Start adding details to the ribbon band by creating a couple of vertical and horizontal lines (#232323).

Step 18

Once you’ve added the decorative lines, start adding some highlights and a shadow and you should be all done with this icon. That means you can group all its composing shapes together using the Control-G keyboard shortcut, and then we can move on to the next one.