Page 1

DRAFT-UPDATED 03/09

icon guidelines version 1.0, cupcake release 1 / 17


contents & introduction

1 1.1 1.2 1.3 1.4 1.5 1.6

icon types launcher menu status bar tab dialog list view

2 2.1

tips do’s and dont’s

3 3.1 3.2 3.3

icon appendix launcher icons menu icons status bar icons

android icon guideline version 1.0, cupcake release

introduction Creating a unified look and feel throughout a user interface adds value to the product. Streamlining the graphic style will also make the UI seem more professional to the user. With these icon guidelines, we show you how to create icons for various parts of your application’s user interface that fit the style that has been set. Following the guidelines will help you to create a polished and unified experience for the user.

2 / 24


1. icon types

3 / 17


1. icon types 1.1 launcher icon: structure

A launcher icon is the graphic that represents your application on an Android device’s homescreen. It is a simplified 3D icon with a fixed perspective. The required perspective is shown in figure 1. The base of a launcher icon can either face the top view or the front view. The majority of a launcher icon’s surface should be created using the color palette described on page 5. To add emphasis, use one or more bright accent colors to highlight specific characteristics. All launcher icons must be created with rounded corners to make them look friendly and simple—as in figure 2.

Figure 1, perspective angles 1. 92° 7. 64° 2. 92° 8. 97° 3. 173° 9. 75° 4. 171° 10. 93° 5. 49° 11. 169° 6. 171°

All dimensions specified on this page are based on a 250x250 px artboard size in a vector graphics editor like Adobe Illustrator, where the icon fits within the artboard boundaries. Final art must be scaled down and exported as a transparent 48x48 px PNG file using a raster image editor such as Adobe Photoshop.

Note: 90° would be a perfectly vertical line. 16 px 16 px

Templates for creating launcher icons in Adobe Illustrator and Photoshop are available in the Android icon template pack. Figure 2. android icon guideline version 1.0, cupcake release

4 / 24


1. icon types 1.1 launcher icon: details

light, effects, & shadows

color palette

step by step

Launcher icons are simplified 3D icons using light and shadows for definition. The image below defines the lighting and shadows.

1

3 4

67째

White r0|g0|b0

Black r 255 | g 255 | b 255

Used for highlights on edged.

Used as base color in shadows.

Light gradient 1r0 |g0 |b0 2 r 217 | g 217 | b 217

Medium gradient 1 r 190 | g 190 | b 190 2 r 115 | g 115 | b 115

Used on the front (lit) part of the icon.

Used on the side (shaded) part of the icon.

2

5

1. Edge highlight: white 2. Icon shadow: black | 20px blur 50% opacity | angle 67째 3. Front part: Use light gradient from color palette 4. Detail shadow: black |10px blur 75% opacity 5. Side part: Use medium gradient from color palette

Dark gradient 1 r 100 | g 100 | b 100 2 r 25 | g 25 | b 25

1. Create the basic shapes with a tool like Adobe Illustrator, using the angles described on page 4. The shapes and effects must fit within a 250x250 px artboard. 2. Add depth to shapes by extruding them, and create the rounded corners as described on page 4. 3. Add details and colors. Gradients should be treated as if there is a light source placed slightly to the left in front of the icon. 4. Create the shadows with the correct angle and blur effect. 5. Import the icon to a tool like Adobe Photoshop and scale to fit a image size of 48x48 px on a transparent background. 6. Export the icon at 48x48 as a PNG file with transparency enabled.

Used on details and parts in the shade of the icon.

A light source is placed slightly to the left in front of the icon, and therefore the shadow expands to the right and back. android icon guideline version 1.0, cupcake release

5 / 24


1. icon types 1.2 menu icon: structure

px

px

6 px

Figure 3.

2

6 px safeframe

2

Menu icons are graphical elements placed in the pop-up menu shown to users when they press the Menu button. They are drawn in a flat-front perspective. Elements in a menu icon must not be visualized in 3D or perspective. In order to maintain consistency, all menu icons must use the same primary palette and the same effects (see page 7). Menu icons should include rounded corners, but only when logically appropriate. For example, in figure 3 the logical place for rounded corners is the roof and not the rest of the building.

48 px

All dimensions specified on this page are based on a 48x48 px artboard size with a 6 px safeframe. The menu icon effect (i.e. the outer glow) described on page 7 can overlap the 6 px safeframe, but only when necessary. The base shape must always stay inside the safeframe. Final art must be exported as a transparent PNG file. Templates for creating menu icons in Adobe Photoshop are available in the Android icon template pack.

android icon guideline version 1.0, cupcake release

48 px

6 / 24


1. icon types 1.2 menu icon: details

color palette

light, effects, & shadows

step by step 1. Create the basic shapes using a tool like Adobe Illustrator.

Menu icons are flat and pictured face on. A slight deboss and some other effects, which are shown below, are used to create depth. White r0|g0|b0

Black r 255 | g 255 | b 255

Used for outer glow and bevel highlight.

Used for inner shadow and bevel shadow.

2

Fill gradient 1 r 163 | g 163 | b 163 2 r 120 | g 120 | b 120

1

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 48x48 px on a transparent background. Mind the safeframe. 3. Add the effects seen as described in light, effects & shadows. 4. Export the icon at 48x48 as a PNG file with transparency enabled.

3

Used as color fill. 4

1. Front part:

use fill gradient from primary color palette 2. Inner shadow: black | 20 % opacity angle 90째 | distance 2px size 2px 3. Outer glow: white | 55% opacity spread 10% | size 3px 4. Inner bevel: depth 1% | direction down size 0px | angle 90째 altitude 10째 highlight white 70% opacity shadow black 25% opacity android icon guideline version 1.0, cupcake release

7 / 24


1. icon types 1.3 status bar icon: structure

Status bar icons are used to represent notifications from your application in the status bar. Graphically, they are very similar to menu icons, but are smaller and higher in contrast.

Figure 4. 2 px safeframe (no overlap)

2 px

2 px 2 px

Rounded corners must always be applied to the base shape and the details of a status bar icon as shown on page 9. All dimensions specified on this page are based on a 25x25 px artboard size with a 2 px safeframe.

25 px

Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom. Final art must be exported as a transparent PNG file. Templates for creating status bar icons using Adobe Photoshop are available in the Android icon template pack.

2 px 2 px safeframe (no overlap) 25 px

android icon guideline version 1.0, cupcake release

8 / 24


1. icon types 1.3 status bar icon: details

light, effects, & shadows

color palette

Status bar icons are slightly debossed, high in contrast, and pictured face on to enhance clarity at small sizes.

Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.

2 1 4

step by step

White r0|g0|b0

Black r 255 | g 255 | b 255

Used for details within the icons and bevel highlight.

Used for bevel shadows.

Grey gradient 1 r 169 | g 169 | b 169 2 r 126 | g 126 | b 126

Fill gradient 1 r 105 | g 105 | b 105 2 r 10 | g 10 | b 10

Used for disabled details within the icon.

Used as color fill on the icons.

1. In a tool like Adobe Photoshop, create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free. 2. Add rounded corners as specified on page 8. 3. Add light, effects, and shadows as specified in the table at left. 4. Export the icon at 25x25 as a PNG file with transparency enabled.

3

1. Front part: 2. Inner bevel:

fill gradient depth 100% | direction down size 0px | angle 90째 | altitude 30째 highlight white 75% opacity shadow black 75% opacity 3. Detail: white 4. Disabled detail: grey gradient from palette + inner bevel: smooth | depth 1% | direction down | size 0px | angle 117째 | altitude 42째 | highlight white 70% | no shadow android icon guideline version 1.0, cupcake release

9 / 24


1. icon types 1.4 tab icon: structure Unselected

Selected

Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected. Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow.

32 px

32 px

Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons. Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape.

32 px

32 px

All dimensions specified on this page are based on a 32x32 px artboard size. We recommend using a 1 px padding around the bounding box inside the Photoshop template. Final art must be exported as a 32x32 px transparent PNG file. Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

android icon guideline version 1.0, cupcake release

10 / 24


1. icon types 1.4 unselected tab icon: details

lights, effects, & shadows These look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.

step by step 1. Create the basic shapes using a tool like Adobe Illustrator. 2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the selected state filter. 4. Export the icon at 32x32 as a PNG file with transparency enabled.

3 1

1. Front part:

2

gradient overlay | angle 90째 bottom color: r 223 | g 223 | b 223 top color: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75%

2. Inner shadow: black | 10 % opacity | angle 90째 distance 2px | size 2px 3. Inner bevel:

depth 1% | direction down | size 0px | angle 90째 | altitude 10째 highlight white 70% opacity shadow black 25% opacity

android icon guideline version 1.0, cupcake release

11 / 24


1. icon types 1.4 selected tab icon: details

lights, effects, & shadows

color palette

1. Create the basic shape using a tool like Adobe Illustrator.

The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow. Fill gradient 1 r 163 | g 163 | b 163 2 r 120 | g 120 | b 120 Used as color fill on unselected tab icons.

3 1

1. Front part:

2

step by step

2. Import the shape into a tool like Adobe Photoshop and scale to fit an 32x32 px artboard with a transparent background. 3. Add the effects seen in light, effects & shadows for the selected state filter. 4. Export the icon at 32x32 as a PNG file with transparency enabled.

Use fill gradient from color palette

2. Inner shadow: black | 20 % opacity | angle 90째 | distance 2px | size 2px 3. Inner bevel:

depth 1% | direction down | size 0px | angle 90째 | altitude 10째 highlight white 70% opacity shadow black 25% opacity

android icon guideline version 1.0, cupcake release

12 / 24


1. icon types 1.5 dialog icon: structure

Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background. Dialog icons have a 1 px safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe. All dimensions specified on this page are based on a 32x32 px artboard size in Adobe Photoshop. A 1 px padding around the bounding box inside the Photoshop template.

32 px

Final art must be exported as a transparent PNG file using Photoshop. Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

32 px

android icon guideline version 1.0, cupcake release

13 / 24


1. icon types 1.5 dialog icon: details

lights, shadows, & effects Dialog icons are flat and pictured face on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow.

step by step 1. Create the basic shapes using a tool like Adobe Illustrator. 2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the proper filter. 4. Export the icon at 32x32 as a PNG file with transparency enabled.

1

2

1. Front part:

gradient overlay | angle 90째 bottom: r 223 | g 223 | b 223 top: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75%

2. Inner shadow: black | 25 % opacity | angle -90째 | distance 1px | size 0px

android icon guideline version 1.0, cupcake release

14 / 24


1. icon types 1.6 list view icon: structure

The list view icons look a lot like the dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in a list view. Examples include the Android Market home screen and directions in Maps. This icon normally has a 1 px safeframe, but it is ok to use the safeframe area for the edge of the anti-alias of a round shape. Note: All dimensions specified are based on a 32x32 px artboard size in Photoshop. We recommend using a 1 px padding around the bounding box inside the Photoshop template. Be sure to remember to export final art as a transparent PNG file using Photoshop.

32 px

Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

32 px

android icon guideline version 1.0, cupcake release

15 / 24


1. icon types 1.6 list view icon: details

lights, shadows, & effects List icons are flat and pictured face on with an inner shadow. Built up by a light gradient and inner shadow they stand out well on a dark background.

step by step 1. Create the basic shapes using a tool like Adobe Illustrator. 2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the proper filter. 4. Export the icon at 32x32 as a PNG file with transparency enabled.

1

2

1. Inner shadow: black | 57 % opacity | angle 120째 | blend mode normal | distance 1px | size 1px 2. Background:

black | standard system color These icons are displayed in list views only.

Note: The dialog icon sits on 32x32 px artboard in Photoshop, without a safeframe.

android icon guideline version 1.0, cupcake release

16 / 24


2. tips

? 17 / 17


2. tips 2.1 do’s & dont’s

When creating new icons there are some factors to consider to make them fit within the guidelines of the platform. Do Make sure no abnormal perspective is used. The depth of an object should be realistic. Keep it simple! By overdoing an icon, it loses it purpose and readability. Only use colors when necessary. Mind that the base of a launcher icon should be grey and feel solid. Use the correct angles for the specific icon types. Don’t Use open elements like text alone as icons. Instead place those elements on a base shape. Use colors for your status bar notifications. Those are reserved for specific phone-only functions.

android icon guideline version 1.0, cupcake release

18 / 24


3. icon appendix

19 / 17


3. icon appendix 3.1 launcher icons * as of 03.09

Alarm Clock

Browser

Calculator

Calendar

Camcorder

Camera

Contacts

Dialer

Email

Generic application

Gallery

Gmail

Google Talk

IM

Maps

Market

Messaging

Music

MyFaves

Settings

Voice Dialer

YouTube

Voice Search

android icon guideline version 1.0, cupcake release

20 / 24


3. icon appendix 3.2 menu icons * as of 01.09

Info / details

Clear / Close / Cancel / Discard

My Location

Directions

Edit

Favorite

Shuffle

More

Map mode

Video

History

Route

Search

Switch

Traffic

Add

Back

Forward

Bookmark

Go to

Home

Party shuffle

Play

Zoom

Gallery

Share

Call

Camera

Done

Duration

Attachment

End conversation

Archive

Rename

Rotate

Upload

android icon guideline version 1.0, cupcake release

21 / 24


3. icon appendix 3.2 menu icons * as of 01.09

Add buddy / Invite

Block user

Clear

Clear playlist

Emoticons

End chat

Favorite

Flag

My account / Account list

Compose

Flip orientation

Go to

Import contacts from SIM

Home

Delete

All threads

New window

Help

Notifications

View labels

My places

Music library

Save

Save draft

Rotate

Repeat

Revert

Refresh

Reminder

Spam

Settings

Start conversation

Today

Month

Week

Stop

android icon guideline version 1.0, cupcake release

22 / 24


3. icon appendix 3.2 menu icons * as of 01.09

Mute

Upload video

Shuffle all

Security

Search

Star

Upload

Route

List

Slideshow

Speaker / Volume

Invites

Compass

Most popular

android icon guideline version 1.0, cupcake release

Set as

Scan for devices

23 / 24


3. icon appendix 3.3 status bar icons * as of 01.09

Voicemail

Music

SMS/MMS

EDGE

Calendar

Email

IM

Gmail

Alarm

Sync

Disk full

USB connected

Warning

Signal

GPRS

GPS on

Airplane mode

Speaker phone

Vibrate

Bluetooth

WiFi

3G

Call

Call forward

Call on hold

Missed call

Battery 100%

Installation complete

Silent mode

Sync error

Bluetooth connected

Wireless network available

Roaming

WiFi unavailable

Signal unavailable

android icon guideline version 1.0, cupcake release

Battery empty

24 / 24

Android  

Testing out this tool.

Read more
Read more
Similar to
Popular now
Just for you