Usage
The following guidelines describe how icons can receive unique visual treatments, animations, and behaviors.
Providing icons
Launcher icons are provided to the Google Play store, with the following requirements: The OEM requirements include:
Launcher icons are provided to the Google Play store, with the following requirements:
- Icon drawables in a PNG or vector format
- Background and foreground layers without mask or background shadows
- All layers must exceed the base icon shape by 50%
The OEM requirements include:
- One shape for masking any icons that are displayed on an OEM’s platform
- An outer shadow (optional)
Keyline shapes
Keyline shapes
Keyline shapes are used across all app icons to maintain consistent visual proportions.
Keyline shapes are used across all app icons to maintain consistent visual proportions.
Specs
Layers
Icons consist of two layers: a foreground and a background. Each layer can animate and receive treatments independently from the other layer.
Icons consist of two layers: a foreground and a background. Each layer can animate and receive treatments independently from the other layer.
Shadows
When designing new icons, lighting and shadow effects should be consistent with other icons on the platform. Contact shadows are placed on elements to make...
When designing new icons, lighting and shadow effects should be consistent with other icons on the platform. Contact shadows are placed on elements to make them stand out from the background.
Illustrator mode: Normal
Opacity: 20%
X Offset: 0dp
Y Offset: 4dp
Blur: 4dp
Color: Refer to tint, shade and shadow values
Edge tint and shade
To provide a sense of depth, treatments are applied to the top and bottom edges of elements.
To provide a sense of depth, treatments are applied to the top and bottom edges of elements.
- Tinted edges highlight the top edge of elements (the left, right, and bottom edges are not tinted)
- Shaded edges display dark bottom edges on elements (the left, right, and top edges are not shaded)
Finishing layer
A finishing layer is placed above the foreground layer. Illustrator gradient tool Opacity Location Slider 1 10% 0% Slider 2 0% 100%
A finishing layer is placed above the foreground layer.
Specs
- Angle: 45º
- Midpoint: 32%
- Color: Refer to tint, shade and shadow values
Illustrator gradient tool |
Opacity | Location |
---|---|---|
Slider 1 | 10% | 0% |
Slider 2 | 0% | 100% |
OEM masks
Without affecting icon layout, OEMs can apply their own custom masks to icons using a 72 x 72 dp masked area. The convex shapes include both a circular mask and a square mask.