in Icon design

Icons for Apple Watch – The Definitive Guide

The Apple Watch is coming and with an estimated 2,000,000 pre-orders, so are the users. We have been wearing the watch and have prepared this in depth guide to how to make your icons look great on the tiny but crisp retina display.

Since the Apple Watch is a smaller screen, there are some new requirements for UI design on the device. In this article we will take a look at the technical and design requirements for creating icons for the Apple Watch.

The 42 mm Apple Watch

Free Apple Watch icon templates

To help you getting started with Apple Watch icons we have created Adobe Illustrator files that you use for your own designs but also help you understand some of the concepts in this post.

You can download the Illustrator templates from Github (Repository or zip-file). We will add formats for Photoshop and Sketch soon.


On top of that we have create a free set of 25 icons for the Apple Watch.


 The icons can be downloaded in two sizes for the two sizes the Apple Watch comes in: 38mm and 42mm. They are licensed under Creative Commons Attribution 3.0 Unported.

Let’s jump right in

There are two types of icons used on the Apple Watch: App icons, which are the icons used to identify, locate, and launch an application; and Menu Icons (Menu Images) which are icons that appear in context menus within an app. All of the app icons will be the same design presented in different sizes for different display scenarios. Menu Icons will all be unique and are used to communicate actions a user can perform from within a given app.

Design icons for no text labels

Unlike the iPhone and iPad, users identify apps on the Apple Watch home screen by their icon only – there is no accompanying text. This means that the app home screen icon will need to be unique enough to distinguish it from other apps and be highly recognizable. Your app’s icon will be the face the world sees and by which your app is recognized.

homescreen The home screen icons are circular and without text labels.

Showing icons without labels hurts usability and text labels help overcome ambiguity. Imagine having more than one to-do list app where it’s very common to use a check mark? Menu Icons are accompanied by a text label, but where app icons are full color, Menu Icons appear only in a single color.

Round Icons, Square Pixels

Icons on the Apple Watch are round but the pixel grid is still square so, for the most part, you will design icons the same way you always have. According to Apple’s documentation, icon assets should be square and the system will apply a circular mask to the asset. You will have to keep in mind that a round mask will be applied to the finished icon so the entire icon will need to be confined to the bounds of the icon circle.

Choose your shapes wisely

Shapes that are more-or-less symmetrical in every direction, such as triangles, squares, polygons, and circles, will rest more comfortably than elongated rectangles inside the circle of the icon. For the accompanying free download available in this article, I used a rectangular grid for the details of the icons and a radial form for the flow of the icons. The free templates at the top of this article include guidelines that demonstrate how to do this with your icon designs.


Just as with designing square icons, the content area of an icon should be a few pixels smaller than the canvas area in order to leave a little visual breathing room around the icon content. In other words, the content area should be slightly smaller (minimum 2px) than the overall canvas area. That said, the blue areas depicted are not sacrosanct. If your design needs to bleed into that area it is perfectly fine to do so, but the core of your design should be confined to the content area unless there is a good reason to exceed it.


Optimizing for the 38mm and 42mm Watch Sizes

App icons are displayed in four sizes with some slight differences between the 38 mm and 42mm watch sizes. These four sizes appear in four different modes: Home screen, Long look, Short look and Notification center. We will go through each of these states in the following sections. The Apple Watch comes in two sizes and this fact affects the icon size requirements.


Since the Apple Watch has a retina display, Apple recommends saving icon images in @2Xsize (non-interlaced PNG files).

Asset Apple Watch (38mm) Apple Watch (42mm)
Home Screen 80 pixels 80 pixels
Notification Center 48 pixels 55 pixels
Long-Look 80 pixels 88 pixels
Short-look 172 pixels 196 pixels

1. Home Screen Icon

The Home Screen icon, the main app icon that appears on the Apple Watch Home Screen, does not have any accompanying text or labels, so the full burden of communicating your apps identity and purpose rests on your icon. Your icon should be unique, highly memorable, and instantly recognizable. You should strive for simplicity and remove any details that are not necessary to communicate your app’s identity and purpose. Michael Flarup has written a great blog post on this subject.


According to Apple’s Human Interface Guidelines (HIG), if your WatchKit app mirrors the functionality of your iOS app, the icon should remain essentially the same as the iOS icon. However, if the WatchKit app is a complement to the iOS app, the icon should differ accordingly. The Home Screen icon is the same size on the 38 mm and 42 mm watch, which means you can use a single asset for both watches. Just remember to create the images as 2x versions as the Apple Watch only uses 2x images (Thanks, @stroughtonsmith for the clarification).

Home Screen Icon Image Sizes

Watch Size @2x
38mm 80 pixels
42mm 80 pixels

2. Short-look Notification Icon

Apps on the Apple Watch have two types of notifications: short-look and long-look. Short-look notifications are simple notifications meant to be viewed at a glance and hint to the content of the notification to allow the user to decide whether they want to take further action. Long-look notifications contain the full content of the notification, a dismiss button, and up to four custom actions buttons. shot-look Short-look notifications include the app name, app icon, and a brief description of the notification. The icon that appears on the short-look notification is 172 pixel in diameter on the 38mm watch and 196 pixels in diameter on the 42mm watch respectively.

Short-look Notifications Icon Image Sizes

Watch Size @2x
38 mm 172 pixels
42 mm 196 pixels

3. Long-look Notification Icon

Long-look notifications have the same layout in every app: A header with the app icon and app name at the top and a dismiss button at the bottom. The body of the long-look notification can contain text and up to four custom action buttons. The long-look notification icon is 80 pixels in diameter on the 38mm watch and 88 pixels in diameter on the 42mm watch.

Long-look Notifications Icon Image Sizes

Watch Size @2x
38mm 80 pixels
42mm 88 pixels

4. Notification Center Icon

The app icon is also displayed in the Notification Center on the Apple Watch. Notification Center icons are displayed at 48 pixels in diameter on the 38mm watch and 55 pixels in diameter on the 42mm watch.

Notification Center Icon Image Sizes

Watch Size @2x
38mm 48 pixels
42mm 55 pixels

In addition to the four icons in the table above, each Apple Watch app requires an iOS app icon for the companion iPhone app.

Asset @2x @3x
App icon 58 pixels 87 pixels

Tips and tricks for the app icons

  • Icon images should be saved in non-interlaced PNG format.
  • The bit depth for icons is 24 bits – 8 bits each for red, green, and blue. Icon images should not include an alpha channel.
  • It is not necessary to use web-safe colors.
  • Apple Watch only uses @2x images so all App Icon sizes above are for @2x images.
  • X-code uses points instead of pixels, so image sizes are 2x the point size. Example: the 38mm Notification center icon is 24×24 points so the icon is 48×48 pixels (Thanks Corey Marion of Iconfactory)

Pro Tip: Apple Watch App Submission

When a developer submits an Apple Watch app to iTunes Connect they will also need a square, 1024 x 1024 version of the app icon for the App Store previews. For more information, see Apple’s developer guidelines

Content Menu Icons

Moving on to the Context Menu Icons, which are also called Menu Images. Context Menu icons are single color, glyph icons. You can access a context menus via Force Touch inside of an application. A context menu can contain up to 4 action icons accompanied by a text label. context-menu The table below shows the canvas size and corresponding content size. Menu images are round with a smaller square content area.

Watch Size Canvas Size Content Size
38mm watch 70 pixels 46 pixels
42mm watch 80 pixels 54 pixels

sizes Menu Images on the Apple Watch are displayed as a circle with a text label below each action icon. The illustration above shows the Menu Image sizes for the 38mm and 42mm watches respectively. When designing your Menu Icons, be sure to keep the icons inside the content area square as shown above. In addition to adhering to the content square, it’s also a good idea to use some kind of radial grid for your icons to insure visual consistency across all icons.

Apple’s Human Interface Guidelines suggest three different line weights depending on the complexity of the icon. The base line weight for the 38 mm watch is 4 pixels for complex container shapes. 5 pixels is recommended for complex line-based glyphs, and 8 pixels for simpler glyphs. Each line weight is 1 pixel heavier on the 42mm watch so 5, 6, and 9 pixels respectively.

Keep in mind that there is no rule that says your Apple Watch Menu Icons have to be line-style icons. In fact, the native menu icons are glyph (solid) icons. The choice of which design style (or both) to use is yours as a designer. For the purposes of this article I have elected to do all line icons in the free set but I could just have easily chosen a solid style. Whatever you choose, be consistent in your application of styles. If you use icon style to have semantic meaning (such as UI control state) do it consistently so as not to confuse users. (Thanks Jamie Hourd at for suggesting this edit).

sizes 2 The table below details Apple’s recommended line weights for different design scenarios with different values for the 38 mm and 42 mm watches.

Watch Size 38 mm Watch 42 mm Watch
Complex Container Shapes 4 pixels 5 pixels
Complex Line-based Glyphs 5 pixels 6 pixels
Simple Line-based Glyphs 8 pixels 9 pixels

Get started today

To help you get started you can take a look at the free icons and templates that are linked to from the beginning of this blog post. Also check out WatchAware for Apple Watch app inspiration.

Special thanks to Laura Reen, Steve T-S (@stroughtonsmith), and Corey Marion for their valuable feedback and corrections to this article.

Leave a Reply for Érik Escobedo Cancel Reply

Write a Comment



  1. Hard to tell from the egregious and inexcusable lack of detail in his comment but I think “Common Sense” is referring to the sizes that you are listing. All you need to provide are the sizes in Apple’s HIG. You do not need to provide a separate @2x version. Apple is referring to them as @2x in the HIG because xCode uses points. For example the 38mm Notification center icon is 24×24 points so the icon is 48×48 pixels. I hope this is helpful.

    • Thanks, Cory. We had a few people point out my mistake and I’ve incorporated the corrections. The was confused by the 55px value in particular and the HIG is a bit unclear about whether the first table is 1x or 2x. 55 does not evenly divide so I – obviously incorrectly – concluded that was 1x. I will, in the future, verify all sizes by asking an expert when the info isn’t readily available or clear.

      Anyway, thanks again for the courteous help. Feedback, even criticism is always welcome and we’ll always do our best to fix any mistakes.


  2. I have not read extensively on the Apple Watch UI, but has anyone in the GUI world pointed out the similarity between the Apple Watch and the Nest … uh .. in terms of the human factors of the interaction?

    • Hey George. Thanks for joining the discussion. I haven’t heard anyone make the comparison until now but all of us in the GUI-related design communities are racing to keep up. It’s such a new technology that not much is known yet and not a lot has been said about the UI. I will take a look, though. I assume you’re referring to the Nest thermostat?

  3. Scott, thanks for the post. It’s very helpful. I’m sure we will learn more in the weeks ahead, and it would be terrific if you keep the post updated as this new technology moves forward. I cringed at the tone of the critical person, and I would have no problem with that particular thread being tossed.

    Thank you again.

  4. Hi Scott, thanks for the article, it’s a good reference. I’m presently developing a large set of Apple Watch icons to complement my existing set of iOS 8 icons, so have been avidly following its release. From my own research there are two aspects of your article which I think need to be considered more thoroughly…

    1) While Apple do state in their guidelines recommended stroke weights they don’t specify or even suggest that icons should only be composed of strokes (like the thin icon style of iOS 7 and 8). In fact, if you study the native menu icons on the Apple Watch they use fills instead of strokes. The exceptions are icons which naturally lend themselves to strokes anyway, like the shuffle arrows for example. Compare the trash can on an iPhone and that on the Apple Watch to see what I mean, on an iPhone it uses 2px strokes, on the Apple Watch it’s a solid fill.

    Despite this many designers, including yourself, seem to have assumed because the guidelines mention recommended minimum stroke sizes that the icons should follow the iOS 7/8 style of stroke icons. As designers we need to look a little deeper and use the native Apple Watch icons as a reference as well. It will be interesting to see how things develop and whether the use of strokes becomes a self-fulfilling prophecy despite Apple’s own native menu icon style.

    2) Designers also need to be thoughtful about how closely they follow the size guides. Again, using the Apple Watch native icons as a reference, measuring them reveals that some of them exceed the recommended 54px, for example the mute icon is 63px in width. Designers need to use their judgment and visual experience to know when the guides can be pushed. A thin tall icon or wide flat icon can exceed the guidance. In theory an icon can use the full 80px canvas on the 42mm watch (I’m not recommending this though) as the circle it sits on is actually 120px diameter. I don’t believe this is reflected correctly in your guide which seems to suggest the menu circle is 80px which isn’t the case.

    I’d love to do a blog post on Iconfinder to discuss these and many more aspects of Apple Watch design in much more detail!


    • Hi Jamie,

      Awesome feedback. You’re clearly done quite a bit of research and I appreciate the addition to the conversation.

      If my article gave the impression that I was implying icons for the Apple Watch can /only/ be strokes then I should be more clear in the future. That’s not the case at all. No article can be exhaustive on a subject and we had very little info to work with, especially not having the watch in-hand to do live tests with. This article should be considered a living document and will change (as it already has) as new information becomes available.

      >> Despite this many designers, including yourself, seem to have assumed because the guidelines mention recommended minimum stroke sizes that the icons should follow the iOS 7/8 style of stroke icons.

      Mmm. That simply isn’t the case. One must keep in mind that the attention-span of the average blog reader is very short and working with limited space, one must focus on the high points. My assumption, perhaps incorrectly, was that designers can do exactly as you’ve done and look at the native icons for guidance. The free set I designed for the article was (a) designed according to the suggestions in the article, and (b) designed to a particular style choice. I don’t in any way suggest this is the only option for Apple Watch Menu icons.

      You say:

      >> In theory an icon can use the full 80px canvas on the 42mm watch (I’m not recommending this though) as the circle it sits on is actually 120px diameter. I don’t believe this is reflected correctly in your guide which seems to suggest the menu circle is 80px which isn’t the case.

      But then immediately recommend against the very thing you suggest. I took the shorter route and simply suggested against it. Keep in mind that this article is a starting point, not an exhaustive rule book. I expect that designers will find their own creative ways to push the limits for what can be done creatively on the Apple Watch UI, but having some guidelines to start with is helpful.

      My aim with this piece was to pull together as much available information as I could into a single source. Articles like this take time (about 3 weeks from start-to-finish) and I had to write with no device to work with and scant information. By the time an article like this is published it is already partially obsolete. In between my first and second drafts the HIG from Apple changes on several details. Thus is the nature of peddling in information. These aren’t complaints, just explanations why the article might not be perfect.

      Again, thanks for your contributions. I don’t agree with all of your points but readers should hear as much information as possible whether you agree with my guide or not.

      Kind Regards,

      • I should also add that I disagree with your suggestion to ignore the HIG sizing suggestions. Just because one can force something into a space doesn’t mean that one should. Every choice involves trade-offs and often involve risk. What are the potential side effects of not following Apple’s guidelines? Could the mask size for icons change in the future without warning and cause icons that once looked great to be oddly cropped? I work as a software developer by day. The scenario I’ve just posed is precisely why developers will opt to follow the API guidelines. Un-official features often change without notice and can break an app that worked perfectly. I see icons as being the same. Not following the documentation has risks that aren’t necessarily worth the few pixels you might pick up. And if your icon doesn’t work in 80 pixels, it won’t work in 90, 100, or 120 either.

        • Sorry Scott, hadn’t seen this comment. All I can talk is from personal experience. I’d prefer to give my customers the best icons I can and that most closely match the Apple Watch native style (which as I said Apple themselves exceed the 54px size). If there was ever a change or issue that caused cropping further down the line I’d provide a free update to remedy it.


      • Hi Scott, my apologies regarding the first item in terms of strokes vs fills. I’ve seen a lot of designers producing purely stroke versions of Apple Watch icons as were yours and had made (the incorrect) leap that you were suggesting that was the style Apple was specifying.

        On the second point about size maybe I should clarify. I was saying I don’t recommend using the full 80px canvas space available, as then the icons would not look correct next to the native icons. But I AM recommending exceeding the guidance of 54px where it makes sense. I guess what I am saying is you can’t be rigid about the canvas size and that it may be useful to point out the icons will not be cropped if they exceed 54px. This really comes down to experience and judgement as designers. The native mute icon was an example where it made sense to exceed the 54px.


        • Hi Jamie,

          No need to apologize. No offense taken at all. Just passionate, lively discussion. Honestly, I think the comment threads are as informative as the article a lot of the time. No one person can absorb all of the information, especially this early on with a new device. I’m sure we all still have lots to learn. Hopefully those of us who have been able to put in some time can help disperse the knowledge.

          With regards to the second point, I should also clarify. I didn’t mean to imply or even state that I discourage exceeding what Apple refers to as the “content area” of the icon. I love Google’s Material Design Icons guidelines. They spell out, as perhaps I should (have) that in general it’s best to stay within the bounds when possible, but sometimes it is necessary to go into the “blue area” by a few pixels for the sake of design integrity. That’s not a problem at all, I don’t think.

          Again, thanks for the in-depth feedback. It’s very valuable to what we’re trying to do in terms of being a resource beyond just buying/selling icons.

          Kind Regards,

  5. Likewise Scott, it’s great to be able to talk passionately about it with someone who feels the same way and doesn’t glaze over as soon as I mention icon guidelines 🙂


  6. Hi
    Can anyone tell me that if i am using a WKInterfaceImage of size 45 width – 45 height, what should be the diffrent png sizes for 2x ,38 mm 2x & 42 mm 2x in images.xcassats

    • Hi Sandeep,

      I’m sorry, I don’t know the answer to your question. Let me ask around to see if any of our friends who are iOS developers know the answer. Sorry for the slow response. I was hoping someone else would know the answer. I’ll get back to you shortly.


    • Hi Sandeep. I sincerely apologize for my slow response but I had to check with an iOS developer to make sure I answer you accurately. I’m not an iOS developer so I have to go by what others tell me in this regard. The answer below is from one of the members of Iconfinder who is an icon designer and iOS developer:

      So here is how it works: WKInterfaceImage – is used to manage images within application. For example on attached image used in 26px (52 – @2x) for 38mm and 32px (64 – @2x) for 42mm, there is no exact formula for scaling from 38mm to 42mm. The developer can make different images on both watches (even attach different pictures on the same place) with different sizes. For that 52 (as on shot) area he can attach even 100px, and it will be scaled to this area. The questions is – if you want perfect accuracy in the images, you should use exact sizes for each watch.

  7. Hi Dear i am writnig for you about Icons for Apple Watch. This is a great inspiring article..Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. 🙂 thanks SOPHIE WEINER ,

  8. There is a failure with the calculation example.

    “For instance, the Notification Center icons which are 48 pixels and 55 pixels on the 38mm and 42mm watches respectively, should be 96 pixels in diameter for the 38mm watch and 110 pixels in diameter for the 42 mm watch.”

    The Notification Center need 24pt and 27.5 pt. For Retina displays it’s 48pt and 55pt. The sizes are already doubled and finally doubled twice 😀

  9. I do not know whether it’s just me or if everyone else experiencing problems with your blog.
    It appears as though some of the text within your content are running off the screen. Can someone else
    please comment and let me know if this is happening
    to them as well? This may be a problem with my web browser
    because I’ve had this happen before. Appreciate it

  10. Excellent weblog here! Also your website lots up fast! What host are
    you the usage of? Can I get your affiliate hyperlink in your host?
    I desire my web site loaded up as quickly as yours lol

  11. I am trying to manually pair my my watch with my updated iPhone and I am being told to find the ‘I’ icon. Would you please tell me where that is located as I am an able to find it. I would appreciate your help.