​App Icon Style Guidelines​

​​

HARMAN is developing a set of guidelines for app icons to better fit diverse developer artwork to our OEM partners in-vehicle system look and feel, as well as to bring consistency and a cleaner look to the app catalog.

Uniformed shapes are visually more appealing and easier to digest. They help users focus on the artwork, as opposed to the shape. They fix alignment issues caused by random open space to better present surrounding information.

Uniform Shapes​


rounded-corners-freeform.png


rounded-corners-uniformed.png
​Old style - each icon had a unique silhouette. with transparency around the silhouette.
​New style - icons stretch to the edges of the image


Icon Image Attributes

Icon artwork can populate the entire asset space. When placing your artwork, use keylines as a guideline, not a hard rule.  Designers should be aware that OEMs will apply stylization to the icon, most common being rounded corners.  While your image should stretch to the corners, areas outside the rough keylines may get cut off when corners are rounded.


When creating your artwork, ensure it conforms to the following:

Final size: 512px x 512px

Format: 32-bit PNG

Color space: sRGB

Max file size: 1024KB

Shape: Full square – The Store app will dynamically handles masking. Radius will be equivalent to 20% of icon size.

Developers should provide icon assets like this: 

corner-radius-do.png                       

The final result.  Corner radius mask will (usually) be applied so it will look like this in our Store: ​​

                       ​​​​​​​corner-radius-dont.png