APP SHORTCUTSICON DESIGN GUIDELINES

Ver. 2.0

CONTENTS
2INTRODUCTION
3SHORTCUT ICON OVERVIEW
4STANDARD SHORTCUT ICONSSystem icon size
Position in live area circle
File format
Do’s & Don’ts

9
SINGLE AVATARSLive area circle & avatar area
Total area
File format

12
GROUP AVATARSLive area circle
Avatar area
File format

INTRODUCTION
App shortcuts give users quick, easy access to up to four of your app’s actions.
Each action can also be added to the home screen.
Shortcut actions are displayed depending upon the location of your app’s icon.
For example, app icons near the left edge of the screen will display actions
wherever there is available space.
These guidelines will help you create app shortcuts using standard icons,single avatars, and group avatars.

SHORTCUTOV E RVIEW

3ICONApp shortcut icons are circular. They contain a standard system
icon, or at least one avatar. Icon content must remain inside ofthe trim area (the total area of the graphic).

1 / LIVE AREA

2 / TOTAL AREA

1 / Live area
All icon content should remain in the 44dp live area, with asolid background color fill of Material Grey 100 (or #F5F5F5).
Shadows should not be included.
44 dp

48 dp

2 / Total area
2dp of padding must surround the live area, making the total
icon size 48dp.

2 dp

44 dp

48 dp

S TA N DA R D I C O N S
System icon size
Position in live area circle
File format
Do’s & Don’ts

Please use standard Material system icons here:
design.google.com/icons

STA NDARDSHORTCUT

5ICONS

Standard shortcut icons have a Material system icon centeredwithin the live area.

1 / SYSTEM ICON SIZE

2 / POSITION IN LIVE AREA CIRCLE

1 / System icon size
The system icon should have equal width and height (24x24dp)
and should have be the same color as app’s primary color or app

Xicon. The color of the icon should have enough contrast against
the circular background.
24 dp
2 / Position in live area circle
The 24dp icon should be centered vertically and horizontallyX

within the live area circle.

File format
Standard icons should be provided in SVG, which allows icons
to be scaled automatically. You may also use vector drawables,tinted bitmaps, or layer lists.
Do not use non-vector drawables, as they have specific dimensions
that do not scale in this context.

24 dp

XX

STA NDARDSHORTCUT

6ICONS(CONT’D)Standard shortcut icons have a Material system icon centeredwithin the live area.

DODo
The color of the icon should have enough contrast against
the Material Grey 100 (or #F5F5F5) background.

Don’t
Don’t use colors with insufficient contrast against thegrey background.

DON’T

S I N G L E AVATA R SLive area circle & avatar area
Total area
File format

8SI NGLE AVATARSSingle avatars contain one image. They must be createdat XXXHPDI.

1 / LIVE AREA CIRCLE & AVATAR AREA

2 / TOTAL AREA

1 / Live area circle & avatar area
The avatar should fill the entire live area circle and should remainin the 44dp live area. Shadows should not be included.

2 / Total area
48 dp

44 dp

2dp of padding must surround the live area, making the total
icon size 48dp.

2 dp

File format
Provide PNG files at all densities.
44 dp

48 dp

G R O U P AVATA R S
Live area circle
Avatar area
File format

10G R OUP AVATAR SGroup avatars contain 2-4 images on a circular background.
They must be created at XXXHPDI.

1 / LIVE AREA CIRCLE

2 / AVATAR AREA

1 / Live area circle
The live area circle should be 44x44 dp and have a color fillof Material Grey 100 (#F5F5F5).

X

2 / Avatar area
44 dp

Avatars must fit within the 30x30 dp space and be centered,30 dp

vertically and horizontally, within the live area.
2dp of padding must surround the 44dp live area for a total

Xarea of 48dp.

File format
Provide PNG files at all densities.

2 dp

44 dp

X30 dpX