Icons help users understand information intuitively. When designing an icon, use metaphors that are universally understood.
App icons are displayed in the app list. Your app icon should communicate your brand identity and your app's features.
Place your icons in a round container
Design your app icons in a container to ensure consistency with other apps in the app list. We recommend using a round container measuring 170x170 pixels. Icons in other sizes are automatically resized when applied to the screen.
Converting to round containers
If an icon is not created with a round container, it is reshaped. Depending on the dimensions of the icon, it is cropped or reduced in size and placed in a gray container.
Use the container grid
The watch provides a grid to help you balance the size and position of an icon within the container. You can use the grid to give your icon a consistent look and feel with other apps. Before designing an icon, determine the area where you will place it based on the grid. Refer to Resources for the grid inside the container.
Use solid colors for the container
The container serves as a background so users can easily distinguish icons. Use bold colors and avoid gradation or complicated patterns. For icons, white works well as it stands out against most background colors.
Make icons front-facing
Icons convey meaning best when they have a simple and clear design. When depicting a shape in your icon, use front-facing shapes that are easier to see from a distance. For line-type icons, avoid making the lines too thin. Flat shapes work better than 3-dimensional shapes, and too much detail hinders readability.
Give your icons a simple color
We recommend using the same color as the background if you need to fill your icon with a color for added detail. Adding a new color may obscure the shape as it reduces color contrast in a small icon.
Icons are used for various purposes including lists, More options, pop-ups, and buttons. You don’t necessarily have to use the container if it’s not an app icon. Design your icons in an appropriate style according to where they appear and the purpose they will be used. See UI Components for usage by type.