Create a Set of Apple Watch Icons in Adobe Illustrator

In this
tutorial we’ll create a set of flat icons
for Apple Watch that can be found on the original Apple Watch Home Screen menu by
default. We’ll be using basic shapes and Warp Effects as well as some more
complicated methods of making a trendy user interface design. Let’s get started!

1. Apple Watch Icon Guidelines

Apple Watch
icons are designed in a trendy flat style very similar to the iOS icons, which
can be found in the latest iOS on iPhone, iPad or other Apple devices. Yet
there is a noticeable specific feature: the icons are round. In this tutorial
we’ll be using a round grid to create a single base for every icon. You can download a very nice icon template in vector to make it easier to work with.

If you are
interested in more in-depth theory on icon creation for Apple Watch, I would
strongly recommend that you run through the official Apple Watch Human Interface
Guidelines and Specifications. 

Also check these very useful
and descriptive articles “Creating Icons for the Apple Watch” and “Icons for Apple Watch – The Definitive Guide“, where people share their free
templates and knowledge on creating custom icons.

Now its
time to move on and create the Apple Watch icons! If you want your icons to
be more pixel-perfect and true to life, like the original Apple Watch icons, you
can find a sample image of the Apple Watch Home Screen in Google Images. File > Place it onto your Artboard and use it as a template, drawing your icons on top of
it, preserving the desired sizes and proportions. Otherwise, just follow this
tutorial as an inspirational guide, not as a strict instruction on creating exact copies of the original icons.

2. Create
the Time, Mail and Music App Icons

Step 1

Start by
opening one of the icon templates (for this tutorial we’ll be using the 80 x 80 px icon template for 38 mm watch). Go to View > Hide Grid to make the grid
invisible if it distracts you, but be sure that you have the Smart Guides and
Snapping enabled (you can find them in the same menu) to make it easier to work
with.

Step 2

Let’s start creating our first icon for the Time app by placing a 4 x 4 px
even circle in the centre of the template. Double-click the Ellipse Tool (L) to call the pop-up
options window, and then head to the Align
panel to align the circle horizontally and vertically on the Artboard. Fill the
circle with orange (#FF9506).

Step 3

Use the Rectangle Tool (M) to create a 2 x 40
px second hand of
our clock, filled with the same orange color, and place it along the central
Guide line, as shown in the screenshot.

You can align the
hand to the Key Object, by clicking
the circle while holding down the Alt key.

Step 4

Let’s copy
the second hand, make it shorter and rotate it to –60 degrees, placing it along the Guide, as shown below.

Now we’ll form the body of the minute hand.
Make a black 4 x 30 px rectangle and use the
Live Corners feature to make both
ends rounded by pulling the small circle markers with the Direct Selection Tool (A) to their maximum (2 px corner radius in our case).

Step 5

Place the hand on the proper place along the guide line (you can
make it a bit smaller, so that it fits the inner circle of the icon base).

Step 6

Create another rectangle of 4 x 20 px size for the hour hand. Make it rounded, rotate
to 60 degrees and place it on the
opposite side from the minute hand.

Step 7

Finally, create an 80 x 80 px white ellipse with the Ellipse Tool (L) for the icon base and place it beneath all
other objects. Great! Our first icon is ready; let’s move to the next one.

Step 8

Now we’ll create the Mail icon. Start
forming the envelope by making a 50 x 33
px rectangle of any color.

Add a
triangle with 2 pt Stroke either
using a Polygon Tool with 3 Sides value or with the Pen Tool (P). Object > Expand the
triangle to turn it into curves.

Step 9

Add another triangle on the upper side of
the envelope base, make its lower corner rounded, and expand the shape. You can erase the top
and bottom parts of the rectangles with the Eraser Tool (Shift-E), as we won’t need them.

Delete the
top part of the lower triangle with the Eraser
Tool (Shift-E) and Unite both
parts of the triangles in Pathfinder. Finally,
make a copy of the basic envelope shape (Control-C
> Control-F), select both the rectangle and the top shape, and use the
Intersect function of Pathfinder to cut off the parts outside the envelope.

Step 10

Select the rectangle and the stripes again
and apply the Minus Front function
of Pathfinder to cut out the lines.
Switch the color of the envelope to white and add a circle base for our icon,
filling it with linear gradient from darker blue (#2066F0) on top to lighter
blue (#1DD4FD) in the bottom.

Step 11

Our next icon is for the Music app, which
consists of the only element: a music note sign. Start forming the note with a 27 x 11 px rectangle. Select the anchor points on the left side of
the shape with the Direct Selection Tool
(A) and drag them down to make the shape skewed.

Step 12

Use the Rectangle Tool (M) to create two
more shapes and start forming the “leg” of the note.

Step 13

Select three anchor points of the lower
square with the Direct Selection Tool
(A) and make them rounded. Then Unite
the shapes in Pathfinder and make
the corner between the shapes rounded as well, using the Live Corners feature.

Step 14

Add the second part of the note and make
the overall shape more smooth and rounded. Finish up with the icon by making
the base, filled with linear gradient from orange (#FA5D3B) to pink (#FF2968).

3. Render the World Clock, Stopwatch, Timer
and Alarm Icons

Step 1

Now we’re moving to a set of icons connected with time, and all created in a single style. Start by forming a 48 x 48 px even circle, and a smaller
circle inside. Use the Minus Front
function of Pathfinder to create a
ring.

Step 2

Create a smaller, elliptical ring inside
the first shape and add two crossed lines, aligned to the centre.

Add a horizontal line in the upper part of
the shape and bend it with the help of Effect
> Warp > Arc. Set the Horizontal
Bend value to –35%.

Step 3

Add another
bent line in the bottom part of our globe and finish up with this icon by
expanding the globe shape and forming a gradient base with dark-orange bottom
(#ff7632) and light-orange top (#ff9408). Add a smaller circle of darker
orange color (#e45221) and hide it behind the globe shape, giving it more contrast.

Step 4

For our
next icon—the Stopwatch—we’ll use the base from the World Clock icon that
we’ve created previously. Form the center of the stopwatch by making a 8 x 8 px ellipse, aligned with a 2 x 25 px rectangle for the watch’s second-hand.

Step 5

Use the Rectangle Tool (M) to add minor details
to the top of our stopwatch. Make the button of the stopwatch more rounded,
using the Live Corners and setting the corner radius to 1.4 px.

Step 6

Let’s move
on to the Timer icon—it has the same base as the Stopwatch icon. Form a 2.5 x 13 px stripe in the center top part
of the ring with the Rectangle Tool (M).
Then grab the Polygon Tool,
setting the Sides quantity to 3, or use the Pen Tool (P) to form a triangle. Place it as show on a screenshot
below, as if it’s a slice of a pie.

Step 7

Select both
the basic white ring and the triangle shape and use the Minus Front function to cut out the left part of the ring. Add a
small 6 x 6 px circle in the center of
our icon.

Step 8

Finally,
rotate the circle so that its upper anchor point is about 45 degrees to the left. Drag the anchor point with the Direct Selection Tool (A), extending
the shape. Convert selected anchor point
to corner either with the help of the Convert
button in the upper control panel or by clicking it with the Anchor Point Tool (Shift-C), thus
turning our shape into the hand of a watch.

Step 9

Our last
icon in this set is the Alarm. It has the same base with the white ring as
previous orange icons. The hands of the clock are formed with two narrow
stripes made with the Rectangle Tool (M).

Step 10

Let’s form
the upper part of the alarm clock by making an even circle with the Ellipse Tool (L) and dividing it into
two equal parts by clicking the side anchor points with the Scissors Tool (C). Place the halves on
top of the alarm, and add two small “legs” in the bottom to finish up the icon.

4. Create
the Maps, Weather and Camera App Icons

Step 1

The Maps
icon is rather simple and contains not so many elements. Start by forming its
center with a 40 x 40 px circle of a
blue (#087eff) color. Form a compass arrow from a 17 x 25 px triangle, heading up.

Step 2

Add a beige
(#e5decb) icon base. Go to Object >
Path > Add Anchor Points and select
the anchor point in the middle on the bottom side and pull it up a bit, forming
the arrowhead.

Step 3

Place a wide
vertical stripe, made with a 26 x 83.5 px
rectangle, across the icon, and unite it with another wide stripe, placing it
perpendicular. Hide the crossed shape behind the blue circle with the arrow.
Select both the base of the icon and the crossed stripes and use the Divide function of Pathfinder to split the shape into three parts.

Step 4

Fill the
parts of the icon base with green (#78c73d) and light-pink (#fbc7d2) colors.

Step 5

Let’s move
to the Weather icon. Fill the basic sky shape with linear gradient from darker
blue (#2066f0) on top to lighter blue (#1dd4fd) in the bottom. Add a yellow
(linear gradient from #ffc505 to #fee403) circle for the sun in the left part
of the icon. Start forming the clouds with two circles: a 25.5 x 25.5 px circle in the center of the template and a 21 x 21 px circle closer to the right
part of the icon.

Step 6

Create a 43 x 16 px rectangle and make its corners
rounded with 8 px corner radius.
Align the rectangle with the circles and Unite
all three shapes in Pathfinder to
form a smooth, rounded cloud.

Step 7

Fill the
cloud with white color and make it semi-transparent, lowering the Opacity to 90%.

Step 8

Let’s move
on to the Camera icon. Make a grey basic circle, filled with linear gradient
from dark grey (#8e9196) in the bottom to lighter grey (#dadcdd) on top, and
start forming the camera silhouette from a dark-grey (#3c3c3c) rounded
rectangle. 

Add a smaller 30 x 17 px
rectangle on top and make its upper left corner rounded with 7 px corner radius. Unite the shapes and make the corner
between the shapes rounded as well.

Step 9

Add a
narrow stripe in the upper part of the camera and use the Minus Front function to cut it out.

Form the
shutter icon from a 9 x 4 px
rectangle, and place it in the center of our template. Use the Pen Tool (P) to add an arrow pointing down at the shutter. Set the Stroke Weight to 4 pt and make the caps and corner of the line rounded in the Stroke panel.

Step 10

Add the
final details to our camera: form a bright-yellow (#fac81b) indicator of a 6 x 6 px size. Further, create a big circle with 4 pt Stroke Weight. Place the circle in the bottom right corner of the
camera, as shown in the screenshot.

Step 11

Object > Expand the big circle, turning it into the ring.
Select both the ring and the camera and apply Minus Front to cut out the ring, forming the object-glass. Then
select all the dark-grey parts of our camera and turn them into a single
compound shape by pressing Control-8.

Finally,
use the Shape Builder Tool (Shift-M)
or the Intersect function of Pathfinder to cut off the unneeded
parts of the camera outside the base of our icon.

5. Make the
Phone, Messages and Remote App Icons

Step 1

Let’s make
a handset for the Phone icon. Create an 8 x 40
px rectangle and use an Arc Warp Effect
with 27% Vertical Bend value to bend the rectangle to the left side. Add two
17 x 20 px rectangles in the top and bottom parts of the handset and make their
corners rounded, making the shapes smooth. Unite
all parts of the handset in Pathfinder.

Step 2

Smoothen the left side of the handset by deleting the
unneeded anchor points with the Delete Anchor
Point Tool (-) and round the inner corners with the Live Corners feature.
Finally, rotate the phone to 45 degrees and place it above the icon base,
filled with linear gradient from lighter green (#86fb71) to darker green (#0fd51c).

Step 3

Let’s form
the Message icon on the same green base that we’ve used previously. Make a 40 x 40 px white circle and extend it to
the sides a bit, making the shape squashed to 48 x 40 px. Add a tiny triangle in the bottom of the white shape,
forming a speech bubble. Make the lower corner of the triangle slightly
rounded. Use the Arc Warp Effect
with -36% Vertical Bend value to
make the triangle slightly arched.

Here’s how
the completed icon looks.

Step 4

Our next
icon is the Remote app icon, which is also very simple and consists of a
single element. First of all, form a gradient base (from dark blue #2066f0 in
the bottom to lighter blue #1dd4fd) on top. Add white stroke with 5.3 pt Stroke Weight and Align it to Inside. Place a 30 x 30 px
white triangle in the center of our icon.

Step 5

Finally,
make the corners of the triangle rounded with a 2.5 Corner Radius. Great! The icon is ready, so let’s move on.

6. Create
the Workout, Settings and Photos App Icons

Step 1

The Workout
icon depicts a stylized silhouette of a running man. Create a bright icon base,
filled with linear gradient from yellowish-green (#c2ec38) on top to green in
the bottom (#a3fc3f).

Take the Pen Tool (P) and create separate lines
for the bent arms, legs and torso with 3
pt Stroke Weight and rounded caps and corners. Increase
the thickness of the Stroke Weight of the torso line to 6 pt and add a 9 x 9 px circle for the head.

Step 2

Object > Expand the lines and fill the shapes with black
color.

Step 3

The
Settings icon consists of a cog. Form the cog base from a 48 x 48 px circle with a cut-out center, making a ring. Add three lines
with 3 pt Stroke Weight, connected
in the center of the icon template.

Step 4

Now we need
to add the ripples to our cog. Form a 5 x 9
px rectangle and make its upper part a bit narrower. Make its upper corners
rounded with 1.6 Corner Radius.
Place the ripples on the top and bottom parts of the cog base. 

Let’s use the Rotate Tool (R) to add more elements. Select
both ripples, double-click the Rotate
Tool (R) to call the pop-up options window, and set the Rotate value to 360/18.
This way, Adobe Illustrator will automatically calculate the proper value for
18 shapes. Press the Copy button.

Step 5

Press Control-D multiple
times to repeat our last action, adding more elements. To finish up with this
icon, select all ripples, switch the fill color to white and Rotate them all together by –10 degrees.

Step 6

Our next
icon is a stylized flower for the Photos app. Start by forming the petal from a
20 x 30 px rectangle and make its
corners rounded with 10 px Corner
Radius. Duplicate the petal and place its copy in the bottom part of the icon
template, as shown in the screenshot below. Select both petals and use the Rotate Tool (R) to make eight more copies of the petals, by
applying the 360/8 Angle value and
pressing the Copy button.

Step 7

Press Control-D several times to form the eight-petal flower. Switch the petals to Multiply
Blending Mode and lower the Opacity to 80%. Let’s apply the
appropriate color to each petal, starting from the top middle one and moving
clock-wise: orange (#fa9700), yellow (#f0e22c), green (#b5d558), turquoise (#6ec19d),
blue (#71b5e1), violet (#8f60c3), pink (#d782a4) and red (#ff2c2c).

Put the
flower on the white icon base.

7. Render
the Stocks, Activity, Passbook and Calendar Icons

Step 1

The Stocks
icon consists of a minimalist diagram. Start forming the diagram by making a
bright-blue (#02a6f5) vertical line of 3
pt size with the Line Tool (\).
Place it in the middle of our template, on a dark (#3f3f3f) icon base. 

Add a
small blue circle above the middle of the template and apply a dark-grey (#3f3f3f)
1 pt Stroke to it in order to separate it visually from the line. Add four more lines on the both sides of the icon, with a lighter-grey (#555555) 3 pt Stroke. 

Object > Expand the
lines and cut off the unneeded parts outside the icon base, either with the Shape Builder Tool (Shift-M) or with
the help of the Pathfinder.

Step 2

Finish up
with the icon by adding a zigzagged line with 1.5 pt Stroke for the graphic using the Pen Tool (P). Expand the line and make it fit the icon base.

Step 3

The
Activity icon is more complicated and interesting to make. It consists
of three colorful gradient circles. To form such a circle, first of all we need to
make a Blend Group.

Make two
equal 6 x 7 px rectangles of pink (#ff2b91)
and red (#f1281e) colors. Select the rectangles and go to Object > Blend > Make. You can edit the settings in Object > Blend > Blend Options,
applying Smooth Color to make a nice
seamless blend. Drag the created blend group to the Brushes panel and create a new Art
Brush with default settings.

Step 4

Create a
dark-grey (#393839) circle base for our icon and place another circle on top of
it, applying our brush as a Stroke.
Adjust the size of the circle, so that it fits the outer edge of the icon
template. Set the Stroke Weight to 1
pt and Object > Expand Appearance
to turn the brush stroke into a shape.
Rotate or flip the shape with the Reflect
Tool (O) horizontally, if needed, so that we have the pink side of the
circle on the left and the red on the right. 

Create a small pink (#ff2b91)
circle and place it in the top central area of the colored ring, so that it
fits the height of the shape, hiding the connection of the two colors.

Step 5

Now we need
to add dimension to the ring by forming a subtle shadow. As you may notice, the
ring became divided into several parts after we expanded it. This is exactly
what we need! Select the top red piece of the ring, copy it and Paste in Front
(Control-C > Control-F). Fill the copy with linear gradient from
dark red (#a11b17) to white, and switch to
Multiply Blending Mode, thus making the white tip of the gradient
invisible.

Step 6

Use the
same technique to create two more colorful rings inside the first shape. Create
the art brushes from a yellow (#d8ff06) and green (#86e402) blending group and
from a turquoise (#06ffaa) and blue (#06e3f9) blend. Finish up with the icon by
adding circles and applying gentle shadows.

Step 7

The next is the Passbook icon, which consists of four tiny pictograms: a
credit card, a plane, a movie camera and a coffee cup. These pictograms are
minimalistic and made of basic shapes with the help of Pathfinder and Live
Corners feature. Below you can see a step-by-step screenshot, showing how to
combine the shapes for each pictogram.

Step 8

The base of
the icon consists of four stripes of different colors: red (#ff4e46), blue (#439eca),
green (#3dca36) and orange (#ffa02b), each of 20
px height. Create a default 80 x 80 px
circle base for our icon and delete the unneeded pieces of the stripes with the
help of the Shape Builder Tool (Shift-M)
by selecting all objects and clicking the unwanted parts while holding down the
Alt key.

Step 9

Form an
even 3.5 x 3.5 px circle, crossing the
top side of the orange stripe, and copy it to the right by holding both Alt and
Shift and dragging the shape. Press Control-D
several times to make more copies of the circle. Then select all the copies and
turn them into a Compound Path by
pressing Control-8. Select the circles and the orange stripe and
apply the Minus Front function to cut
out the holes, making the stripe perforated.

Finally, place
the pictograms that we created earlier and align them to the center of our
icon.

Step 10

The last icon of our set is the Calendar icon. It consists of text, made with Helvetica Neue font and a simple white icon base. 

Great Job! The Apple Watch Home Screen Icons are Finished!

This was a long yet exciting quest! We’ve created a total of 20 Home Screen app icons, using basic shapes, warp effects and some tricks and effects. I hope you’ve enjoyed following this guide and found some useful techniques. Good luck with your designs!