How to Create a Set of Productivity Icons in Adobe Illustrator

In today’s tutorial I’m going to show you how to create a set of flat productivity icons that might come in handy in future projects.

We'll be using Adobe Illustrator, and the process of recreating them will be based mostly on the Rectangle Tool used in combination with Pathfinder and a dash of the Direct Selection Tool here and there.

1. Setting Up Our Document

The first thing we need to set up before we start building the icons themselves is our document. Assuming you’re already inside Illustrator, create a new file (File> New) and use these settings:

• Number of Artboards: 1
• Width: 600 px
• Height: 500 px
• Units: Pixels

And from the Advanced tab (that you can toggle by clicking on the right facing arrow on its left):

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

Quick tip:If you’re wondering why we chose 300 for the Raster Effects, you should know that this setting affects the way Drop Shadow, Inner Glow and other similar effects look once they are printed (if for some reason you need to have your artwork on paper). On a digital medium (a screen) the quality of your artwork will remain the same no matter whether you go with 72 or 300 ppi.

2. Setting Up the Grid

Because we want everything to look as crisp as possible, we will have to change Illustrator's Grid settings to something that allows us to do just that. So go to Edit > Preferences > Guides & Grid and adjust the settings as follows:

• Gridline every: 1 px
• Subdivisions: 1

These little changes will allow for a maximum level of accuracy, but only if the Snap to Grid option is checked. To enable this, simply go to View > Snap to Grid.

Quick tip: when the document Preview Mode is set to Pixel Preview, the Snap to Grid will automatically change to Snap to Pixel, which is an even more precise method of creating pixel perfect artwork.

3. Structuring Our Document Using Layers

Once we’ve set up our document according to our needs, we should always try to layer our Artboard, as this will help us a lot when dealing with multiple parts, sections that might need adjusting later on.

That being said, go to the Layers panel and create five layers, naming them as follows:

1. background
2. documents
3. emails
4. writing tools
5. devices

With everything now structured, we will work our way through each layer and build our icons, making sure to lock all the other layers that aren’t in focus while doing so.

4. Adding the Background

Because most of the icons will use a slightly darker shade of white, we will have to differentiate them from our actual Artboard (which by default is also white). We will do so by creating a reddish (#F77C7C)600 x 500 px shape using the Rectangle Tool (M) which we will then center both vertically and horizontally using the Align panel.

Once you have the background in place, lock its layer, and move on up to the documents one.

5. Creating the First Document Icon

Step 1

Grab the Rounded Rectangle Tool and create a 60 x 80 px shape with a Corner Radius of4 px. Color it white (#FFFFFF) and then position it using the Transform panel:

• X: 167 px
• Y: 126 px

Step 2

Still with the help of the Rounded Rectangle Tool,create four 52 x 4 px objects that have a Corner Radius of 2 px. Color them using #ABABAB, and then distance them from one another at about 6 px, making sure to group (Control-G)and position them at a distance of 24 px from the top side of the object we created in step 1.

Step 3

Double-click on the grouped text lines we’ve just created to enter Isolation mode, and then create one 20 x 4 px shape with a 2 px Corner Radius that we will position above the lines, and another slightly wider 34 x 4 px one (with the same 2 px value for the Corner Radius), keeping the same distance of 6 px between them and the four centered lines.

Exit Isolationmode by pressing Esc, and then select both the document’s main shape and its lines and group them together (Control-G).

6. Creating the Second Document Icon

Step 1

Because all the remaining document icons are modified versions of our initial one, we will create a duplicate by dragging it to the right while holding down the Alt key. Once the copy is created, simply select both it and the original and use the Align panel to position it at about 68 px from the first one.

Step 2

As our second document icon has a folded right corner, we need to adjust the copy we’ve just created. First enter Pixel Preview mode and create a 36 x 36 px shape with a Corner Radius of 4 px. Color it using #E8E8E8 and then position it so that the document’s right corner’s tip points exactly towards its middle.

Step 3

Grab the Add Anchor Point Tool (located underneath the Pen Tool) and add two anchor points exactly where the top and right sides of the document meet the smaller rounded corner square.

Step 4

Once you’ve added the two extra anchor points, isolate the document’s main body (right click using the Direct Selection Tool > Isolate Selected Path) and then delete the top-right anchors forming the round corner. Immediately after deleting them press Control-J to unite the remaining ones, giving the document a sharp diagonal line.

Step 5

OK, so now we’ve adjusted the right corner, but how about that square left on top of it? Well, because I want you to be able to adjust how much of the fold goes inside the document, we will mask it using a Clipping Mask. Select the white document shape using the Direct Selection Tool copy (Control-C) and create a copy (Control-F) on top of it and the little square. Select both the duplicate and the square and right click > Make Clipping Mask.

If you find that you need to make the shape bigger or smaller, simply click on the lighter grey section using the Direct Selection Tool (A) and then move it according to your preference using the directional arrows on your keyboard.

Oh, and don’t forget to group all the elements of the second document icon using Control-G so that in case you accidentally move something around, it’s composing shapes won’t get thrown around.

7. Creating the Third Document Icon

Step 1

As you can see from the preview image, the third icon is basically the first one with two smaller sections stacked on top of each other. So, grab the first document, create a copy to the right by dragging while holding down Alt, and then position it at a distance of 68 px from the second one.

Step 2

Once you have the third icon positioned, select it and ungroup its elements(right click > Ungroup). Create a copy of the white section, and change its Widthto 52 px and its color to #F0F0F0, making sure to position it underneath (right click > Arrange > Send to Back), pushing it towards the top by 6 px (right click > Transform > Move and input 6 px in the Vertical box leaving the Horizontal set to 0 px).

Step 3

Add a small shadow by creating a 52 x 2 px black (#000000)rectangle, and position it just above the white document section. Once you have it in place, change its Blending Mode to Multiply, lowering its Opacityto about 10%.

Step 4

Add a second smaller page underneath the one we just created, by copying the white shape one more time. Adjust its Width to 44 px, change the color to #999999 and then make sure to send it to the back of the rest of our elements and move it 6 px towards the top.

Step 5

Add a second shadow to the previously created shape, by creating a 44 x 2 px black (#000000) rectangle, changing its Blending Mode toMultiply and making sure to lower its Opacity level to 14%. Lastly, select all the icon's elements and group them (Control-G).

8. Creating the Closed Envelope Email Icon

Step 1

Select the Rounded Rectangle Tool and create an 80 x 56 px shape with a Corner Radius of4 px. Color it using #E8E8E8 and then vertically align it to the first document icon, positioning it about 66 px from its bottom side.

Step 2

Using the Pen Tool (P) we will have to create the top section of the envelope by starting from the center and moving outwards to the right upper corner where we will set the first two anchor points. I recommend that you turn on Pixel Preview so you have maximum accuracy when creating the anchor points. The shape should extend towards the left and right by 1 px and to the top by 2 px.

Step 3

Once you’ve shaped the top section of the envelope, we need to make it more round around the corners. We will do so by selecting the shape and then going to Effect> Stylize > Round Corners and inputting 4 px into the Radius field. Once the corners are adjusted, make sure to select the object and Expand it (Object > Expand Appearance).

Step 4

If you go back to Pixel Preview mode, you might notice that once you’ve expanded the appearance of the shape, its anchor points have jumped off the pixel grid.

We need to correct this by zooming in and snapping them back using the Direct Selection Tool (A).

Step 5

Assuming you’ve aligned all the anchor points correctly, move the shape down by 2 px and then create a copy on the Clipboard (Control-C). Because we need to add a shadow underneath the top folded section of the envelope, I’ve found that it would be easier to first create the fold, copy it to the clipboard and then transform the fold into the actual shadow and paste the original on top from the clipboard.

Now that you understand what’s going to happen, change the top shape’s color to black (#000000) and then set its Blending Mode to Multiply, lowering its Opacity to 10%.

Step 6

Using the Direct Selection Tool (A), select the bottom anchor points and move them down by 2 px and the inner left and rights ones by 1 px towards the outside.

Step 7

Exit Isolationmode and paste (Control-F) a copy of the top section of the envelope from the Clipboard (the one I told you to duplicate in step 5) onto the shadow.

Step 8

Paste yet another copy of the top section, and then flip it horizontally (right click> Reflect > Horizontal) making sure to change its color to #808080, and align it to the bottom side of the main envelope shape.

Step 9

Because we need the bottom section to go under the shadow and the top lighter one, we have to select both it and the main envelope shape, and then right click > Arrange > Send to Back.

Step 10

Once we have the top, bottom and shadow sections of our envelope, we have to apply a mask so that the parts that go outside the icon’s base shape will be hidden. To do so, we will have to first copy (Control-C) and paste (Control-F) a copy of the base shape onto the three mentioned sections. Once the copy is in place, simply select it and the three parts that we need to mask and hit right click > Create Clipping Mask.

Quick tip: because the larger object is hiding most of the surface of the pieces we need to mask, we have to zoom in on the corners and make the selection using the parts that go outside the main shape’s area.

Step 11

Select all the elements of the email icon and group them together using Control-G.

9. Creating the Opened Envelope Email Icon

Step 1

As the second email icon is based on the one that we’ve just created, simply copy the original and create a duplicate at about 48 px to the right.

Step 2

Ungroup the objects (right click > Ungroup) and then enter Isolation mode (double click on either the top or bottom envelope folds) where we have to cut (Control-X) the top section, exit Isolation and then paste it on top of everything else (Control‑F).

Step 3

Select the top fold, and then reflect it horizontally so that the tip will now point upwards.

Step 4

Select the reflected object, and then move it towards the top by 26 px. To do so, simply right click > Transform > Move and in the pop up box enter -26 px for the Vertical input and0 for the Horizontal one.

Step 5

Change the object’s color to #E3E3E3 and then create a 76 x 62 white (#FFFFFF) rectangle with a Corner Radius of 4 px. Position the new shape at about 8 px from the tip of the top folded section.

Step 6

Since the letter and top fold need to be masked, we will have to copy the bottom section fold using the Direct Selection Tool (A), paste it on top of the other elements, reflect it horizontally,and then align it to the top section of the icon’s main body.

Step 7

Because we want the mask to hide a specific part of our letter and top fold, we have to adjust it by first deleting the top-center and top left and right anchor points. First double click on the shape to enter Isolation mode and then use the Direct Selection Tool (A) to remove the indicated anchors by selecting and then pressing Delete.

Step 8

Still in Isolationmode, grab the Pen Tool (P) and click on the top-right anchor points and start drawing a shape that goes all the way to the tip of the fold. Use Pixel Preview so that you can have a more accurate view of the trajectory, and hold down Shift while adding anchors so that the lines end up perfectly straight.

Step 9

Select the shape we’ve just created, the top fold and letter section, and then right click > Make Clipping Mask. Also you can get rid of the shadow underneath the letter object using the Direct Selection Tool (A) to delete it, as the shape is inside the same clipping mask as the bottom fold object.

Step 10

We will now have to repeat step 6 and then change the shape’s color to #C7C7C7. This copy of the object will serve as the inner pocket which our letter will go into.

Step 11

As the pocket needs to fit inside the surface of our letter, we will have to apply a Clipping Mask to it by creating a duplicate of the main shape of our envelope on top, and then with both of them selected, right click > Make Clipping Mask.

Step 12

Before we move the pocket to the back of the letter, we must first copy its bottom-centered and middle anchor points, which we will use to create the inner shadow for our pocket. 

First grab theDirect Selection Tool (A), click on the shape, and then once the anchor points are showed, select the ones that I pointed out, by clicking on the first one and then holding down Shift to select the rest. Once you have all of them selected, simply copy them to the Clipboard (Control-C).

Step 13

As soon as you’ve created a copy of the anchor points, you can select the letter and bring both it and the top pointing fold to the front of the pocket (right click > Arrange > Bring to Front).

Step 14

Double-click on the letter section to enter Isolation mode and then paste (Control-F) the anchor points that we copied in step 12. Flip the Fill with the shape’s Stroke (Shift-X) and then change its color to black (#000000) and its Blending Mode to Multiply. Then make sure to lower its Opacity level to 12% and set the Stroke Weight to 4 px.

Step 15

Select the shadow and then Expand it by going to Object> Expand, and check Fill andStroke.

Step 16

While still inside the isolated group, create one smaller 20 x 4 px and three wider 64 x 4 px shapes, all with a Corner Radius of 2 px, and then distance them from one another using the Align panel’s Horizontal Distribute Space (set on 6 px). Group the lines (Control-G) and then align them horizontallyto the letter’s shape, at a distance of 10 px from its top side.

Also, make sure to bring the pocket shadow to the front of the text lines (right click > Arrange > Bring to Front).

Step 17

Add a bottom shadow to the letter that will cover the lowest two lines of the text. Do so by creating a 76 x 37 px black (#000000) rectangle, which we will center horizontally to the letter shape, aligning it to its bottom side. Then change its Blending Mode to Multiply, lowering its Opacity to 8%.

Step 18

Add a small 28 x 2 px rectangle right above the letter section. Since this will act as a shadow, we need to change its Blending Mode to Multiply and lower its Opacity to 10%. Because we want the shadow to go over just the top pointing fold, we need to copy the fold and paste it on top, and then with both of them selected, right click > Make Clipping Mask.

Step 19

To finish up our little icon, we need to correct the bottom folded section, which needs to come on top of the pocket shadow. Simply select the fold, and then bring it to the front of the rest of our elements using Arrange > Bring to Front. Once you’ve done that, simply select all the icon’s elements and group them together using Control-G.

The next icon that we have to create is the one with all the writing instruments. We will take each element and build them one at a time.

10. Creating the Eraser

Step 1

Using the Rounded Rectangle Tool create a 16 x 32 px shape with a Corner Radius of 2 px, giving it a pinkish color (#FFB8C9). Bottom align the shape to the second email icon and distance the two at about 51 px.

Step 2

Duplicate the eraser’s main shape, and then use the Rectangle Tool (M) to create a shape that covers the top half of the element, and extract it from the eraser using Pathfinder’s Minus Front option. Change the resulting’s shape color to #C6B8FF and then group both it and the eraser’s main shape into a single object (Control-G).

11. Creating the Pen

Step 1

Using the Rounded Rectangle Tool create a 6 x 80 px shape with a Corner Radius of 2 px. Bottom align the object to the eraser at a distance of 8 px to the right.

Step 2

Create a slightly darker (#CCCCCC) 10 x 8 px rectangle, bottom-align it to the previously created shape, and after creating a duplicate of the pen’s base shape, select both it and the darker rectangle and use Pathfinder’s Intersect function to create the bottom side of the pen.

Step 3

Add a small 6 x 1 px segment on top of the shape we just created, and color it using #B3B3B3.

Step 4

Add a 10 x 24 px rectangle towards the top of the pen, making sure to color it using a lighter shade of grey (#F2F2F2).

Step 5

Add a 13 x 2 px rectangle (#E6E6E6) at about 2 px from the pen’s top side, aligning it to the right. Then create a 6 x 2 px black (#000000) rectangle, change its Blending Mode to Multiply and its Opacity to 10%, and position it just under the pen’s cap.

Step 6

Finish off the pen’s cap by adding a 2 x 22 px shape with a Corner Radius of 1 px, color it using #F2F2F2 and then align it to the left making sure that the round top section goes about 1 px outside the cap’s extension bridge. Once you’ve added this little detail, group all the elements of the pen using Control-G.

12. Creating the Pencil

Step 1

Create a 6 x 73 rounded rectangle (#E8CA8B) with a Corner Radius of 2 px. Align it to the bottom of the pen at a distance of 6 px from its right side.

Step 2

Adjust the pencil’s top side by selecting and deleting the top-middle anchor points so that you eliminate the round corners. Do this using the Direct Selection Tool (A) and once you’ve removed the anchors hit Control-J to unite the remaining one in order to fill the gaps and close the shape.

Step 3

Create a duplicate of the resulting shape (Control-C > Control-F) and then add a 12 x 67 px object on top of it, horizontally aligning it to the top side of our pencil. With both selected, use Minus Front to subtract the larger upper section and obtain the small eraser. Change the resulting shape’s color to #FFB8C9.

Step 4

Finish off the bottom section of the pencil by adding a 6 x 5 px grey (#E6E6E6) rectangle, and one smaller 6 x 1 px and darker (#CCCCCC) shape on top of it. Also, add two 1 x 1 px circles (#B3B3B3), position them at a distance of 2 px from one another, and then group them (Control-G) and both vertically and horizontally align them to the bigger grey object we just created.

Step 5

Grab the Rectangle Tool (M) and create a 2 x 61 px shape, color it using #FFDF99 and then horizontal align it to the top side of our pencil.

Step 6

Create the tip of the pencil by drawing a 6 x 9 px rectangle and positioning it on top of the main shape we have so far. Using the Add Anchor Point Tool, create an anchor point on the top side of the shape, exactly in the middle. Then, using the Delete Anchor Point Tool, remove the top left and right anchors so that the tip can take shape. 

Next, using the Ellipse Tool (L), create an 8 x 6 px circle, color it using #938585 and position it on top of the tip so that only a small section of it will intersect the surface. Create a copy of the tip on the circle, and then hide the rest of the circle using a Clipping Mask (both the tip and circle selected > Make Clipping Mask). Once you’ve done that, create three smaller 2 x 4 px shapes, and remove their top anchor point using the Direct Selection Tool (A). Position all three objects near one another, just under the pencil’s tip.

Step 7

Once you’ve added the tip, select all the elements of the pencil and group them together (Control-G).

13. Creating the Ruler

Step 1

So the last part of our little writing instruments icon is the ruler. To recreate it we will rely on our trusty Rounded Rectangle Tool, with which we will create a 22 x 81 px white (#FFFFFF) shape. Align it to the bottom of the pencil, and then position it at 8 px from its right side. Once you have it in place, lower its Opacity level to around 40%.

Step 2

Add the inner section by creating an 8 x 33 px rounded rectangle with a Corner Radius of 1 px and an Opacity level of 20%.

Step 3

Create a duplicate of the main ruler’s shape, and paste it on top of everything else. Then, using the Rectangle Tool (M), draw a 20 x 81 px object and Vertical align it to the right side of the duplicate we just created. 

Once you have everything positioned, simply select the duplicate and the rectangle and use Pathfinder’s Minus Front to create the side section that we need. Lower its Opacity to 20% and then create another copy which we will reflect vertically and align to the ruler’s right side.

Step 4

To complete the ruler, simply add about 11 tab positions (space indicators). Start with a larger 4 x 1 px rectangle, followed by a sequence of four smaller 3 x 1 px ones, and then another larger one and so on, until you have all 11 of them. Group all the tabs together (Control-G) and then lower their Opacity to 80%.

Don’t forget to select the eraser, pen, pencil and ruler and group them together (Control-G), as they form one single icon.

14. Creating the iPad Mini

We’re almost there now, as we have only three more icons to go! So make sure you’re on the devices layer, and let’s start building these cute little devices.

Step 1

With the help of the Rounded Rectangle Tool create a 62 x 92 px white (#FFFFFF) shape and give it a Corner Radius of 4 px. Align it horizontallyto the email icon, at a distance of 46 px.

On top of that, add another 54 x 72 rectangle which we will center both vertically and horizontally to the larger shape, and color it using #404040. Add one smaller 2 x 2 px circle (#404040) at the top, and another larger 4 x 4 px circle towards the bottom, coloring it in a slightly lighter shade (#DBDBDB).

Step 2

Start adding details to the screen by creating a zigzag shape with the help of the Pen Tool (P), giving the object a lighter tint (#595959). Click on it, and use the Direct Selection Tool (A) to select the anchor points forming the zigzagged line. Create a duplicate line after them, coloring it green (#76D9BF) and giving it a 2 px Stroke Weight. 

As the line has to go from one side of the screen to the other, you might need to create a duplicate of the larger grey rectangle and position it onto the green line in order to mask the parts going outside its area. Add a small white (#FFFFFF) 8 x 8 px circle, and an even smaller 4 x 4 px green one (#6DC7AF) on top to form the value indicator, and position it on top of the lower line value.

Step 3

Duplicate the darker rectangle representing the device’s screen, and paste the copy onto all of the other elements. Change its color to white (#FFFFFF), its Blending Mode to Overlay and its Opacity to 16%. 

With the Direct Selection Tool (A) grab the right lower corner and move it upwards by about54 px. You can either go into Pixel Preview and move the anchor by dragging it, or you can select it and then right click > Transform > Move > and enter 54 px in the Vertical input box, and 0 px for the Horizontal one.

15. Creating the iPad

Step 1

Since this icon is basically a slightly larger version of the iPad mini one, simply follow the same steps but give the elements slightly larger dimensions. For the white section, we need to create a 70 x 96 px shape with the same 4 px Corner Radius, while giving the inner screen section a size of 62 x 76 px. Position the same top and bottom circles onto the second icon, making sure to align them horizontally.

Step 2

For the login screen, create two 24 x 4 rectangles with a Corner Radius of 1 px. Color them using #404040 and then distance them at 4 px from one another. Center them horizontally to the iPad’s shape, making sure to group them afterwards and align them to the screen’s bottom side.

Step 3

Push the login form toward the top by right clicking > Transform > Move and entering -18 px in the Vertical input box.

Step 4

Create the login icon by drawing a 22 x 22 px circle which we will color using the same value as the login forms (#404040). Then horizontally align it to the screen, positioning it at 6 px from the login fields.

Step 5

For the human silhouette, we first need to add the head, which we will construct using an 8 x 10 px ellipse, which we will position towards the top of the previously created shape, at about 3 px from its top.

Then at just one pixel underneath, we will add a 20 x 20 px circle which we will mask partially using an 18 x 18 px smaller one.

Step 6

Finish up the device by adding a screen reflection using the same process as we used for the iPad mini. Copy the main screen shape, paste it on top of everything else, and then use the Direct Selection Tool (A) to move its right lower corner to the top by about 56 px. Change the shape's Blending Mode toOverlay, lowering its Opacity to 16%.

16. Creating the iMac

Step 1

Let’s start by creating the stand for the iMac’s display. Using the Rectangle Tool (M) create a 28 x 2 px shape, color it white (#FFFFFF), and then bottom align it to the iPad at a distance of 80 px.

Step 2

Adjust the shape’s top anchor points by moving them towards the inside by 2 px. Create the middle section of the stand by drawing a 24 x 12 px slightly darker (#E8E8E8) shape, which we will have to adjust as we did with the base. This time, however, we will move the anchors by just 1 px. 

Add a 26 x 2 px black (#000000) rectangle which will act as a shadow, and align it horizontally to the top side of the middle stand section. Because the side of the shadow goes outside the stand’s area, we need to copy (Control-C) and paste (Control-F) a copy of the stand onto it, and then select them both and create a clipping mask by right clicking > Make Clipping Mask.

Step 3

Grab the Rounded Rectangle Tool and create a 100 x 72 px white (#FFFFFF) rectangle with a Corner Radius of 4 px. This will act as our base screen shape. Create a duplicate of it, change its color to #595959, and then using the Direct Selection Tool (A) remove the bottom middle anchor points, pressing Control-J to unite the remaining ones. Adjust the height of the shape by selecting the bottom anchors and moving them towards the top by 8 px.

Add an even darker (#404040) 92 x 52 px shape, and center it both vertically and horizontally to the section we created previously. Add a small 4 x 4 px circle towards the bottom white section of the screen where the Apple logo would go.

Step 4

Duplicate the smaller darker screen section (Control-C), and paste it on top of everything else (Control-F). As this will act as our reflection, we need to change its color to white (#FFFFFF), set its Blending Mode to Overlay, and then lower the Opacity to 16%.

17. Adding the Final Touches

I don’t know if you’ve noticed, but the icons that we’ve created so far seem to be lacking something. If you take a closer look at the preview image you’ll know what I’m talking about. Wait for it… wait for it... Yup! Gradients!

Our icons need a gradient overlaid onto them to make them sparkle.

As the process of adding the gradient is exactly the same for each icon, I will only show you an example for the document icon, leaving you to finish off the rest of them.

Step 1

Make sure you’re on the right layer (in this case the documents layer), and using the Direct Selection Tool (A) select and copy the icon’s base shape. If the icon is composed of multiple elements (like the multiple document, iMac and instruments ones) you will have to select the most basic shapes that form the icon and paste them above the grouped elements themselves.

Once you have done that, simply apply a linear Gradient using #1B1464 for our left color and #C1272D for our right one, making sure to set the angle at 60°.

Step 2

Once you’ve created the gradient, simply set its Blending Mode to Overlay, lowering the Opacity to 52%. You can play around with the Opacity level—maybe you’ll find that a higher or lower value works better for you.

That's It!

I hope that you've manage to follow the tutorial and recreate these nice looking icons, but most importantly I really hope you've learned something new along the way. Until next time!