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:

Read More

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.

Read More

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.

Read More

Icons consist of two layers: a foreground and a background. Each layer can animate and receive treatments independently from the other layer.

Foreground (scrolling parallax)

108 x 108 dp
72dp masked section
Transparency recommended (optional)



Background (subtler parallax)

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...

Read More

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.

Read More

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%

Read More

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