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 toEdit > Preferences > Guides & Gridand 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 theSnap to Gridoption is checked. To enable this, simply go toView > Snap to Grid.

Quick tip: when the documentPreview Modeis set toPixel Preview, theSnap to Gridwill automatically change toSnap 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 of
4 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 2pxvalue for the Corner Radius),
keeping the same distance of 6 px between
them and the four centered lines.

Exit Isolation
mode 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 Width
to 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 Opacity
to 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 6px 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 to
Multiply 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 of
4 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 2px 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 Isolation
mode 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 and
0 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) toremove the indicated anchors by selecting and then pressing Delete.

Step 8

Still in Isolation
mode, 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 the
Direct 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 and
Stroke.

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 horizontally to 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 Multiplyand 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 anddarker (#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 8px 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 an8 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 ithorizontally to 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 2px 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
8px 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 about
54 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 of62 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 pxcircle 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) tomove its
right lower corner to the top by about 56
px. Change the shape's Blending Mode to
Overlay,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!