App icon component

An app icon is a small image that represent an app in a symbolic or realistic manner.   

Example of app icons

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.