App icon component
An app icon is a small image that represent an app in a symbolic or realistic manner.
Types of icons
Symbolic icon
An app icon can be an image used as a conventional representation of an object or a function.
The image should fit in a 12x12px square in the center of the 24×24 icon.
Realistic icon
An icon can also be skeuomorphic. In this case, they won’t have to fit in a 12x12px square but can use the whole surface of the icon.
Style
Color
One or two distinctive colors can be used to design an app icon. If there are related apps, similar hue can be used.
Size
Icons shall be provided in 14x14px PNG and in a scalable vector file for all larger sizes than 14×14. They shall also be recognizable at 14px @1x
Format
Icons are shown as a small square with a corner radius of 25%. SVG scalable format.
Line and border
Icons shall be designed using 2px wide lines. No borders, in the icon, shall be used.
Outline
Icons shall have a 20% visible black outline.