Android icons

Android O icons represent your app on a device's Home and All Apps screens.


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.

Square
Height: 44dp
Width: 44dp
Corner radius: 4dp
Circle
Diameter: 52dp
Vertical rectangle
Height: 52dp
Width: 36dp
Corner radius: 4dp
Horizontal rectangle
Height: 36dp
Width: 52dp
Corner radius: 4dp

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.

1. OEM Mask
2. Finishing layer
3. Foreground (App icon); 108 x 108 dp; 72dp masked section; Transparency optional
4. Background (Icon shadow); 108 x 108 dp; 72dp masked section; Must be Opaque

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

A contact shadow is a soft shadow surrounding an element.

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)
Tinted edge

Height: 1dp
Opacity: 20%
Color: White (#FFFFFF)
Shaded edge

Height: 1dp
Opacity: 20%
Color: See tint, shade, and shadow values

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%
Finishing layer above foreground layer

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.

OEM mask shapes
Final icon shapes

Up next