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.
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.
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).
AssetApple Watch (38mm)Apple Watch (42mm)Home Screen80 pixels80 pixelsNotification Center48 pixels55 pixelsLong-Look80 pixels88 pixelsShort-look172 pixels196 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@2x38mm80 pixels42mm80 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.
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@2x38 mm172 pixels42 mm196 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@2x38mm80 pixels42mm88 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@2x38mm48 pixels42mm55 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@3xApp icon58 pixels87 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.
The table below shows the canvas size and corresponding content size. Menu images are round with a smaller square content area.
Watch SizeCanvas SizeContent Size38mm watch70 pixels46 pixels42mm watch80 pixels54 pixels
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 PixelLove.com for suggesting this edit).
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 Size38 mm Watch42 mm WatchComplex Container Shapes4 pixels5 pixelsComplex Line-based Glyphs5 pixels6 pixelsSimple Line-based Glyphs8 pixels9 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.
