How to make icons for Android.

1. DRAFT-UPDATED 03/09
icon guidelines
version 1.0, cupcake release
1 / 17

2. contents & introduction
introduction
1 icon types
1.1 launcher
Creating a unified look and feel throughout a user interface adds value to the product.
1.2 menu
Streamlining the graphic style will also make the UI seem more professional to the user.
1.3 status bar
1.4 tab With these icon guidelines, we show you how to create icons for various parts of your
1.5 dialog 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.
1.6 list view
2 tips
2.1 do’s and dont’s
3 icon appendix
3.1 launcher icons
3.2 menu icons
3.3 status bar icons
android icon guideline version 1.0, cupcake release 2 / 24

3. 1. icon types
3 / 17

4. 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°
All dimensions specified on this page are
2. 92° 8. 97°
based on a 250x250 px artboard size in a 3. 173° 9. 75°
vector graphics editor like Adobe Illustrator, 4. 171° 10. 93°
where the icon fits within the artboard 5. 49° 11. 169°
boundaries. 6. 171°
Note: 90° would be a perfectly
Final art must be scaled down and
vertical line.
exported as a transparent 48x48 px PNG
file using a raster image editor such as 16 px
Adobe Photoshop. 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

5. 1. icon types
1.1 launcher icon: details
light, effects, & shadows color palette step by step
Launcher icons are simplified 3D icons using light 1. Create the basic shapes with a tool
and shadows for definition. The image below
like Adobe Illustrator, using the
defines the lighting and shadows.
angles described on page 4. The
shapes and effects must fit within a
White Black
250x250 px artboard.
r0|g0|b0 r 255 | g 255 | b 255
2. Add depth to shapes by extruding them,
Used for highlights Used as base color in
1
on edged. shadows. 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
Light gradient Medium gradient
of the icon.
1r0 |g0 |b0 1 r 190 | g 190 | b 190
2 r 217 | g 217 | b 217 2 r 115 | g 115 | b 115
4. Create the shadows with the correct
3
Used on the front (lit) Used on the side angle and blur effect.
67°
part of the icon. (shaded) part of the
4
5. Import the icon to a tool like Adobe
icon.
2
Photoshop and scale to fit a image
5
size of 48x48 px on a transparent
background.
1. Edge highlight: white
6. Export the icon at 48x48 as a PNG file
Dark gradient
2. Icon shadow: black | 20px blur
with transparency enabled.
1 r 100 | g 100 | b 100
50% opacity | angle 67°
2 r 25 | g 25 | b 25
3. Front part: Use light gradient from
color palette
Used on details and parts
4. Detail shadow: black |10px blur
in the shade of the icon.
75% opacity
5. Side part: Use medium gradient from
color palette
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

6. 1. icon types
1.2 menu icon: structure
Menu icons are graphical elements placed in
the pop-up menu shown to users when they 6 px safeframe
Figure 3.
press the Menu button. They are drawn in a
flat-front perspective. Elements in a menu icon 6 px
2
px
must not be visualized in 3D or perspective.
px
2
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 48 px
the building.
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
48 px
Photoshop are available in the Android icon
template pack.
android icon guideline version 1.0, cupcake release 6 / 24

7. 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
Menu icons are flat and pictured face on. A slight
deboss and some other effects, which are shown
Adobe Illustrator.
below, are used to create depth.
2. Import the shape to a tool like Adobe
White Black
Photoshop and scale to fit an image of
r0|g0|b0 r 255 | g 255 | b 255
48x48 px on a transparent background.
Mind the safeframe.
Used for outer glow Used for inner shadow
and bevel highlight. and bevel shadow.
3. Add the effects seen as described in
light, effects & shadows.
2
4. Export the icon at 48x48 as a PNG file
with transparency enabled.
Fill gradient
1 r 163 | g 163 | b 163
1
2 r 120 | g 120 | b 120
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

8. 1. icon types
1.3 status bar icon: structure
Figure 4.
Status bar icons are used to represent
2 px safeframe (no overlap)
notifications from your application in 2 px
the status bar. Graphically, they are very 2 px
similar to menu icons, but are smaller 2 px
and higher in contrast.
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.
2 px
Templates for creating status bar icons
using Adobe Photoshop are available in 2 px safeframe (no overlap)
the Android icon template pack.
25 px
android icon guideline version 1.0, cupcake release 8 / 24

9. 1. icon types
1.3 status bar icon: details
light, effects, & shadows color palette step by step
1. In a tool like Adobe Photoshop, create
Status bar icons are slightly debossed, high in Only status bar icons related to the phone
contrast, and pictured face on to enhance clarity function use full color; all other status bar icons
the base shape within a 25x25 px image
at small sizes. should remain monochromatic.
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.
White Black
2
r0|g0|b0 r 255 | g 255 | b 255 3. Add light, effects, and shadows as
specified in the table at left.
1 Used for details Used for bevel shadows.
within the icons
4. Export the icon at 25x25 as a PNG file
and bevel highlight.
4
with transparency enabled.
3
Grey gradient Fill gradient
1 r 169 | g 169 | b 169 1 r 105 | g 105 | b 105
2 r 126 | g 126 | b 126 2 r 10 | g 10 | b 10
Used for disabled Used as color fill on
1. Front part: fill gradient details within the icon. the icons.
2. Inner bevel: 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

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

11. 1. icon types
1.4 unselected tab icon: details
lights, effects, & shadows step by step
1. Create the basic shapes using a tool like
These look just like the selected tab icons,
but with a fainter inner shadow, and the Adobe Illustrator.
same front part gradient as the dialog icons.
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
2
1
1. Front part: 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

12. 1. icon types
1.4 selected tab icon: details
lights, effects, & shadows color palette step by step
1. Create the basic shape using a tool like
The selected tab icons have the same fill
gradient and effects as the menu icon, but Adobe Illustrator.
with no outer glow.
2. Import the shape into a tool like
Fill gradient
Adobe Photoshop and scale to fit an
1 r 163 | g 163 | b 163
32x32 px artboard with a transparent
2 r 120 | g 120 | b 120
background.
Used as color fill on
3. Add the effects seen in light, effects &
unselected tab icons.
shadows for the selected state filter.
4. Export the icon at 32x32 as a PNG file
3
with transparency enabled.
2
1
1. Front part: 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

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

14. 1. icon types
1.5 dialog icon: details
lights, shadows, & effects step by step
1. Create the basic shapes using a tool like
Dialog icons are flat and pictured face
on. In order to stand out against a dark Adobe Illustrator.
background, they are built up using a light
2. Import the shape to a tool like Adobe
gradient and inner shadow.
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
1
with transparency enabled.
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

15. 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 32 px
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.
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

16. 1. icon types
1.6 list view icon: details
lights, shadows, & effects step by step
1. Create the basic shapes using a tool like
List icons are flat and pictured face on with
an inner shadow. Built up by a light gradient Adobe Illustrator.
and inner shadow they stand out well on a
2. Import the shape to a tool like Adobe
dark background.
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
1
with transparency enabled.
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

17. 2. tips
?
17 / 17

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

19. 3. icon appendix
19 / 17

20. 3. icon appendix
3.1 launcher icons * as of 03.09
Alarm Clock Browser Calculator Calendar Camcorder Camera Contacts
Gallery Gmail Google Talk IM
Dialer Email Generic
application
Maps Market Messaging Music MyFaves Settings Voice Dialer
Voice Search
YouTube
android icon guideline version 1.0, cupcake release 20 / 24

21. 3. icon appendix
3.2 menu icons * as of 01.09
Info / details Clear / Close / My Location Directions Edit Favorite Shuffle More Map mode
Cancel / Discard
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

22. 3. icon appendix
3.2 menu icons * as of 01.09
Add buddy / Block user Clear Clear playlist Emoticons End chat Favorite Flag My account /
Invite Account list
Compose Flip orientation Go to Import contacts Home Delete All threads New window Help
from SIM
Notifications View labels My places Music library Save Save draft Rotate Repeat Revert
Refresh Reminder Spam Settings Start Today Month Week Stop
conversation
android icon guideline version 1.0, cupcake release 22 / 24

23. 3. icon appendix
3.2 menu icons * as of 01.09
Mute Upload video Shuffle all Security Search Star Upload Set as Scan for devices
Route List Slideshow Speaker / Invites Compass Most popular
Volume
android icon guideline version 1.0, cupcake release 23 / 24

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%
Signal Battery empty
WiFi unavailable
Roaming
Installation Silent mode Sync error Bluetooth Wireless network
unavailable
complete connected available
android icon guideline version 1.0, cupcake release 24 / 24