Create a Set of Apple Watch Icons in Adobe Illustrator

by Yulia Sokolova

• 46
• 145
• 11
• Share

What You'll Be Creating

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 andSnapping 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 pxrectangle 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 Uniteboth 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 ofPathfinder 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 theMinus 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 ofEffect > 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 pxellipse, 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 Frontfunction 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 Convertbutton 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 andselect 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 Pathfinderto form a smooth, rounded cloud.

Step 7

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

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 Frontfunction 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 theStroke Weight to 4 pt and make the caps and corner of the line rounded in theStroke 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 ofPathfinder 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 Cornersfeature. 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 Weightand 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 Rotatevalue 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 Rotatethem 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 toMultiply 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 inObject > 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. PressControl-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 thecircles 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!