how to design an app icon in illustrator

In this tutorial you'll create a fun to-do list or organizer application icon with a three‑dimensional effect, ready for desktop or market use. Combine radial gradients, blends, a sense of lighting, and the tiniest bit of perspective for a simply built, but eye catching, icon. This tutorial uses Adobe Illustrator CC 2014, though many of the techniques are applicable to other versions of the program.

1. Create the Icon's Base

Step 1

Start out by drawing a square using theRectangle Tool (M). In theGradientpanel, apply aRadial Gradient of tan (#e3c184) to slightly darker tan (#c9a068).

Step 2

Use theDirect Selection Tool (A) to pull the square'sLive Corners inward, rounding the square out slightly.

Then, using theLine Segment Tool (/), draw a vertical line with a1–2 pt stroke of tan, and itsBlend Mode set toScreen in theTransparency panel. Draw a second, darker tan line, slightly overlapping the first, and set theBlend Mode toMultiply.Group (Control-G) the two lines together.

Copy(Control-C) andPaste (Control-V) the grouped lines a total of five times and spread them evenly across your rounded square.

2. Create Your Notepad

Step 1

Draw a rounded rectangle andRotate it15° with theRotate Tool (R). Apply aRadial Gradient to it of white (#ffffff) to light beige (#f3dcca).

Step 2

Copy andPaste the notebook object twice. Set the copied shape's fill color to dark tan (#a8783f).Align one of the copies with the notebook shape created previously and place the other copied shape to the lower right of the rest of the icon.

Reduce theOpacity of the rightmost copied shape to0% in theTransparency panel.Select both copied shapes and use theBlend Tool (W) to create a blend of50 steps (or whatever amount gives your shapes a smooth blend).

Place the blend group beneath the notepad shape in theLayerspanel.

Create a smooth blend to give the illusion of a long shadow

Step 3

Copy andPaste the notebook page drawn previously. Overlap the upper left corner of the shape slightly. Select both objects and use theShape Builder Tool (Shift-M) to select the non-intersecting portion of the overlapped shapes.Deselect andDelete this extraneous shape. Set the bottom shape's fill color to beige (#dbb588) to create dimension within the icon.

Step 4

For the spiral of the notebook, draw a small rounded rectangle (either with theRectangle Tool or theRounded Rectangle Tool) with aRadial Gradient of gray (#b6ada6) to dark warm gray (#6f5c4f). Use theGradient Tool (G) to move the radius of the gradient to the top of the shape.

Copy andPaste three instances of the spiral shape, line them up, andRotate the group15°. Place the shapes near the top of the notebook. Draw dark tan circles with theEllipse Tool (L) for the holes in the notebook's pages. Place them below the spiral shapes in theLayers panel.

Use little rounded rectangles to create the spirals of the notebook

Step 5

For the turned-up notebook page corner,Copy andPaste the main notebook page. Use thePen Tool (P) to draw a small triangle overlapping the bottom right corner of the rounded rectangle.

Use theShape Builder Tool to separate the three shapes.Delete the rightmost, extraneous shape.

Rotate the rounded corner shape so it lines up with the edge of the page's bottom right corner. Apply aLinear Gradient that goes from light beige to white (the same as the page itself).

Place the newly turned up page underneath the spiral and hole group and above the rest of the notebook design in theLayers panel. Adjust the gradient of the shape below the turned-up page to be slightly darker.

Creating a simple turned-up page for your notebook design

3. Creating the Pencil Element

Draw a vertical rectangle in teal (#00a79d). Draw two triangles, either with thePen Tool or thePolygon Tool, that face each other and overlap the vertical rectangle. As you did previously, use theShape Builder Tool to delete the triangles from the rectangle. You'll be left with the pointed object seen below.

Step 2

Draw overlapping sections on the lower third of the pencil object in three shades of tan. Make sure that it goes from light to medium to dark, as that will be our ultimate lighting choice. For the scalloped edge, I drew an overlapping scalloped shape with thePen Tool and used theShape Builder Tool, once again, to delete it from the other shapes.

Delete a scalloped shape from the tip of your pencil

Step 3

Attach a short rectangle on to the end of the pencil to form the eraser. In theProperties panel, you can change the radius of the top two corners of the shape. Apply aLinear Gradient to the eraser shape in three shades of red: medium (#fd393e), light (#ff706a), and dark (#fd393e).

Draw three gray rectangles to form the metal eraser connector. Apply theRadial Gradient used previously on the notebook's spiral to each. Use theGradient Tool to adjust the radius of each gradient so it's toward the upper left of the pencil.

Draw the pencil components using circles and rectangles

Step 4

Draw rectangles that define the planes of the pencil on the teal portion of the object. Make sure they align with the scallops drawn previously. I added light teal (#14c9b8) and dark teal (#057f73) to keep the lighting consistent.

Draw a circle overlapping the pointed end of the pencil and use the same gray gradient from the notebook's spiral. Delete the non-intersecting portion of the pencil's graphite tip from the wood portion with theShape Builder Tool.

Keep the lighting consistent in each of your icon elements

Step 5

Group together your pencil components, place your pencil on the icon base (rotate or scale as needed), and go toEffect > Stylize > Drop Shadow. Apply the following attributes:

Mode:Multiply
Opacity: 45%
X Offset:7 px
Y Offset: 7 px
Blur: 7 px
Color: Brown (#3f1706)

Apply a drop shadow to your pencil element

4. Complete the Icon Design

Step 1

The check mark is the easiest element of the icon design. Draw a narrow rectangle andRotate it45°.Copy andPaste the rectangle andRotate it 90°. Overlap the two shapes and use theShape Builder Tool to delete the bottom two shapes.Merge the remaining objects to create the check mark.

Apply aRadial Gradient of light lime green (#e5f034) to lime green (#bdd734).Copy andPaste the check mark and place the copied object beneath the original, slightly offset down and to the right. Set the fill color of the copied object to spring green (#9dcd34).

Group the two shapes together and create a blended shadow in the same manner as we did for the notebook earlier in this tutorial.

Step 2

Make sure your shadows follow the same direction.Group together your icon design.Copy andPastethe base rounded square created at the start of this tutorial andAlign it with the original.Select the copied square and your icon design andMake a Clipping Mask (Control-7).

Paste a second instance of the rounded square and set the fill color to dark tan. Place it behind your icon group in theLayers panel, moving it down and to the right slightly (see below).

Great Job, You're Done!

With that, we're done! Add a simple background to your icon for display, or keep the background transparent for desktop or application use. What other items can you create from basic shapes for such an icon? Share your results in the comment section below.