..

Graphic Design: Create a Set of Folder Icons

Beginner level Adobe Illustrator Adobe Illustrator

How to Set Up a New Document

Since I’m hoping you already have Illustrator running in the background, bring it up and let’s start by setting up a New Document by going to File > New (or by using the Control-N keyboard shortcut) which we will adjust as follows:

  • Number of Artboards: 12
  • Spacing: 32 px
  • Columns: 4
  • Width: 64 px
  • Height: 64 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72 ppi)

We’re going to be creating the icons using a Pixel Perfect Workflow, so I highly recommend you take a moment and read this in depth tutorial which will get you up to speed in no time!

011.png

How to Set Up the Layers

Once we’ve set up our new document, we need to set up a couple of layers so that we can separate our icons from our reference grids. To do this, simply open up the Layers panel, and then create a total of two layers which we will rename as follows:

layer 1 > reference grids

layer 2 > icons

02.png

How to Create the Reference Grids

As soon as we’ve finished layering our document, we can start working on the reference grids which will help us create our icons by focusing on consistency and size.

Step 1

Grab the Rectangle Tool (M) and use it to create a 64 x 64 px square which we will color using #F15A24, and then position to the center of the first Artboard using the Align panel’s Horizontal and Vertical Align Center options.

03.png

Step 2

Create another smaller 56 x 56 px square (#FFFFFF), which will act as the active drawing area, thus giving us an all-around 4 px protective padding. Once you’re done, select and group the two shapes together using the Control-G keyboard shortcut.

04.png

Step 3

Add the remaining reference grids using a copy (Control-C) of the one that we’ve just finished working on, which we will paste (Control-F) onto the empty neighbouring Artboards. Take your time and once you’re done, make sure you lock the current layer before moving on to the next step.

051.png

How to Create the Blank Folder

Assuming you’ve finished creating the reference grids, we can move on to the next layer (that would be the second one), where we will create the blank folder used by each of our twelve icons.

Step 1

Start by positioning yourself onto the first Artboard, and then creating the main shape for the folder’s body using a 56 x 40 px rectangle which we will color using #FFCD50, and then center align to the active drawing area, positioning it at a distance of 4 px from its bottom edge.

06.png

Step 2

Add the smaller upper section using a 20 x 8 px rectangle (#FFCD50), which we will position on top of the previous shape, making sure to align it to its left edge.

07.png

Step 3

Create the back section using a 36 x 4 px rectangle which we will color using #FFA852, and then position onto the upper section of the larger body, making sure to align it to its right edge.

08.png

Step 4

Finish off the folder by adding the subtle highlights using two 2 px tall rectangles (#FFE164), which we will position as seen in the reference image making sure they follow the entire length of the edges that they’re emphasizing. Once you’re done, don’t forget to select and group all of its composing shapes together using the Control-G keyboard shortcut.

09.png

Step 5

Populate the remaining Artboards using a copy (Control-C > Control-F) of the folder that we’ve just finished working on, moving on to the next step once you’re done.

10.png

How to Create the Music Folder Icon

As soon as we’ve created the blank folders, we can start adding the different category symbols to them, so make sure you position yourself onto the first Artboard again, and let’s jump straight into it.

Step 1

Start working on the musical note by creating the main shape for the left note head using a 6 x 4 px ellipse which we will color using #E58C3C, and then position onto the underlying folder, at a distance of 19 px from its left edge and 11 px from its bottom one.

11.png

Quick tip: as some of you might have noticed the gap values used to position the note head are odd numbers, but that’s only because we’re going to be adding a 2 px thick outline to the shape, which will add 1 px to them thus making them odd numeric values.

Step 2

Give the shape that we’ve just created an outline by creating a copy (Control-C) of it, which we will paste in front (Control-F) and then adjust by flipping its Fill with its Stroke (Shift-X) and then setting its Weight to 2 px. Once you’re done, make sure you select and group the two together using the Control-G keyboard shortcut.

12.png

Step 3

Add the stem using a 12 px tall 2 px thick Stroke line (#E58C3C), which we will position onto the ellipse’s right anchor point as seen in the reference image, making sure to select and group (Control-G) them together before moving on to the next step.

13.png

Step 4

Create the right stem using a copy (Control-C > Control-F) of the one that we’ve just finished working on, which we will push to the right side by a distance of 12 px and then to the top by another 2 px using the Move tool (right click > Transform > Move > Horizontal > 12 px > Vertical > -2 px).

14.png

Step 5

Add the beam using a 12 x 4 px rectangle (#E58C3C) with a 2 px thick outline (#E58C3C) with a Round Join, which we will group (Control-G) and then position as seen in the reference image.

15.png

Step 6

Finish off the current icon, by double clicking on the beam to isolate it (or by right clicking > Isolate Selected Group) and then selecting its right anchor points using the Direct Selection Tool (A) and pushing them to the top by a distance of 2 px using the directional arrow keys. Once you’re done, press the Escape key to exit Isolation mode, and then select and group (Control-G) all of the symbol’s composing shapes together, doing the same for the entire icon afterwards.

16.png

How to Create the Video Folder Icon

Once you’ve finished working on the first icon, you can jump onto the next Artboard where we will start working on our second one.

Step 1

Start by creating a 16 x 18 px rectangle which we will color using #E58C3C and then position at a distance of 21 px from the folder’s left edge, and 11 px from its bottom one.

17.png

Step 2

Turn the shape that we’ve just created into a triangle by first adding a new anchor point to the center of its right edge by simply clicking on it using the Add Anchor Point Tool (+).

18.png

Step 3

Continue adjusting the shape by removing its corner-right anchor points by simply clicking on them using the Delete Anchor Point Tool (-), which will result in a nice right-pointing triangle.

19.png

Step 4

Finish off the icon by giving the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, making sure to group (Control-G) the two together, doing the same for the entire icon afterwards.

20.png

How to Create the Photos Folder Icon

As always, make sure you position yourself onto the next Artboard (that would be the third one), and let’s start working on our next icon.

Step 1

Create the main shape for the larger triangle using an 18 x 14 px rectangle which we will color using #E58C3C and then position at a distance of 15 px from the underlying folder’s left edge and 11 px from its bottom one.

21.png

Step 2

Turn the shape into a triangle, by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+), removing its side ones using the Delete Anchor Point Tool (-). Give the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, making sure to select and group the two together using the Control-G keyboard shortcut.

22.png

Step 3

Add the smaller triangle using a 12 x 8 px rectangle (#E58C3C) which we will adjust as we did with the previous one, making sure to give the resulting shape a 2 px thick outline (#E58C3C) with a Round Join. Once you’re done, select and group (Control-G) the two shapes together, positioning them as seen in the reference image.

23.png

Step 4

Finish off the current icon, by adding the sun using a 4 x 4 px circle (#E58C3C) with a 2 px thick outline (#E58C3C), grouping (Control-G) and then positioning the two shapes above the smaller triangle. Once you’re done, don’t forget to select and group all of the icon’s composing shapes using the Control-G keyboard shortcut.

24.png

How to Create the Contacts Folder Icon

We’re now down to our first row's last icon, so without wasting any more time let’s jump straight into it!

Step 1

Start by creating the main shape for the lower body using an 18 x 6 px rectangle which we will color using #E58C3C and then center align to the underlying folder, positioning it at a distance of 11 px from its bottom edge.

25.png

Step 2

Adjust the shape that we’ve just created by opening up the Transform panel and setting the Radius of its top corners to 4 px from within the Rectangle Properties.

26.png

Step 3

Give the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, making sure to select and group the two together afterwards using the Control-G keyboard shortcut.

27.png

Step 4

Finish off the icon by adding the head using an 8 x 8 px circle with a 2 px thick outline (#E58C3C), grouping (Control-G) and then center aligning the two to the larger body, positioning them at a distance of 2 px from its top edge. Once you’re done, make sure you select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.

28.png

How to Create the Bookmark Folder Icon

Assuming you’ve finished working on the previous icon, move on to the second row and zoom in on its first Artboard where we will start creating our next asset.

Step 1

Using the Rectangle Tool (M), create a 12 x 18 px rectangle which we will color using #E58C3C, and then center align to the larger folder, positioning it at a distance of 11 px from its bottom edge.

29.png

Step 2

Adjust the shape that we’ve just created by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+), and then selecting and pushing it to the inside by a distance of 6 px using the Move tool (right click > Transform > Move > Vertical > -6 px).

30.png

Step 3

Finish off the current icon by giving the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, selecting and grouping (Control-G) the two together doing the same for the entire icon afterwards.

31.png

How to Create the Secured Folder Icon

Move on to the neighbouring Artboard, and then zoom in on it so that we can start working on the next item.

Step 1

Create the main shape for the keyhole’s lower body using a 10 x 12 px rectangle which we will color using #E58C3C, and then center align to the larger underlying folder, positioning it at a distance of 11 px from its bottom edge.

32.png

Step 2

Adjust the shape that we’ve just created by individually selecting its top anchor points using the Direct Selection Tool (A), and then pushing them to the inside by a distance of 4 px using the directional arrow keys.

33.png

Step 3

Give the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, selecting and grouping the two together afterwards using the Control-G keyboard shortcut.

34.png

Step 4

Finish off the icon by adding the upper section of the keyhole using a 10 x 10 px circle (#E58C3C) with a 2 px thick outline (#E58C3C), which we will group (Control-G) and then position on top of the previous shapes as seen in the reference image. Once you’re done, select and group (Control-G) the two sections together doing the same for the entire icon afterwards.

35.png

How to Create the Uploads Folder Icon

Assuming you’ve already positioned yourself onto the next Artboard, let’s take a couple of moments and create the uploads folder icon.

Step 1

Start by creating the arrow’s lower section using a 4 x 6 px rectangle (#E58C3C) with a 2 px thick outline (#E58C3C) with a Round Join, which we will group (Control-G) and then center align to the underlying folder, positioning them at a distance of 10 px from its bottom edge.

36.png

Step 2

Create the main shape for the arrowhead using an 18 x 12 px rectangle which we will color using #E58C3C, and then center align to the previous shapes, positioning it onto their upper edge as seen in the reference image.

37.png

Step 3

Finish off the icon by turning the rectangle that we’ve just created into a upward pointing triangle, by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+) and then removing its corner ones using the Delete Anchor Point Tool (-). Give the resulting shape a 2 px thick outline (#E58C3C) with a Round Join, selecting and grouping (Control-G) the two together, doing the same for the entire icon afterwards.

38.png

How to Create the Downloads Folder Icon

Once you’ve finished working on the uploads icon, we can create the downloads one which as we will see is quite an easy task since it’s a simple symbol variation applied to the blank folder.

Step 1

Start by creating a copy (Control-C) of the upward facing arrow, which we will then paste (Control-F) onto the current Artboard.

39.png

Step 2

Finish off the current icon by horizontally flipping the arrow using the Reflect tool (right click > Transform > Reflect > Horizontal), making sure to select and group all of its composing shapes afterwards using the Control-G keyboard shortcut.

40.png

How to Create the Add New Folder Icon

We are now down to our last icon row, so assuming you’ve already positioned yourself onto its first Artboard let’s start working on the new folder icon.

Step 1

Create the vertical section of the plus sign using a 4 x 18 px rectangle (#E58C3C) with a 2 px thick outline (#E58C3C) with a Round Join, which we will group (Control-G) and then position to the center of the underlying folder.

41.png

Step 2

Finish off the icon by adding the horizontal section using an 18 x 4 px rectangle (#E58C3C) with a 2 px thick outline (#E58C3C) with a Round Join, grouping (Control-G) and then positioning the two to the center of the previous section. Once you’re done, don’t forget to select and group (Control-G) the plus sign’s composing shapes together, doing the same for the entire icon afterwards.

42.png

How to Create the Delete Current Folder Icon

The next item off our list is the delete current folder icon, which is another simple variation based on the previous icon.

Step 1

Start by creating a copy (Control-C) of the plus sign, which we will then paste (Control-F) onto the current Artboard.

43.png

Step 2

Finish off the icon by first ungrouping the sign’s composing sections (right click > Ungroup), and then selecting and removing its vertical section using the Delete key. Once you’re done, don’t forget to select and group (Control-G) all of the current icon’s composing shapes before moving on to the next one.

44.png

How to Create the Missing Folder Icon

Assuming you’ve already positioned yourself onto the next Artboard, zoom in on it so that we can have a better view of the shapes that we’re going to be creating.

Step 1

Start by creating a copy (Control-C) of the add new folder icon’s plus sign, which we will paste (Control-F) onto the current Artboard.

45.png

Step 2

Turn the plus sign into an x, by selecting it and then rotating it using 45º angle (right click > Transform > Rotate > 45º).

46.png

Step 3

Finish off the icon, by snapping the rotated shapes’ anchor points back into place and then extending them towards the outside by a distance of 1 px. Take your time, and once you’re done make sure you select and group (Control-G) all of its composing shapes before moving on to the last one.

471.png

How to Create the Search Current Folder Icon

We are now down to our twelve and last icon, so make sure you position yourself onto the remaining Artboard and let’s wrap things up!

Step 1

Start by creating the main shape for the magnifying glass’s upper body using a 14 x 14 px circle with a 4 px thick Stroke (#E58C3C), which we will position at a distance of 12 px from the underlying folder’s left edge, and 12 px from its bottom one.

48.png

Step 2

Finish off the icon and with it the project itself, by adding the handle which we will draw using a 4 px wide 4 px tall Stroke line (#E58C3C) making sure their paths overlap as seen in the reference image. Once you’re done, select and group (Control-G) the two together, doing the same for the entire icon before finally hitting that save button.

491.png

Great Job!

As always I hope you had fun working on this project, even though it was a longer one than usual, and most importantly managed to learn something new and useful along the way.

That being said, if you have any questions feel free to post them within the comments section and I’ll get back to you as soon as I can!

502.png

What do you think of this tutorial?

Discussion

Welcome back to another Illustrator tutorial, in which we’re going to learn how to create our very own folder icon set using nothing more than the basic shapes and tools that you probably already work with on a daily basis. That being said, quickly grab a fresh cup of coffee and hop back into your seat since things are about to get interesting!

Tut Details

Beginner level 55m 422 views

Share