Icon Design Guidelines >

Status Bar Icons

Status bar icons are used to represent notifications from your application in the status bar.

As described in Providing Density-Specific Icon Sets, you should create separate icon sets for low-, medium-, and high-density screens. This ensures that your icons will display properly across the range of devices on which your application can be installed. See Tips for Designers for suggestions on how to work with multiple sets of icons.

Final art must be exported as a transparent PNG file. Do not include a background color.

Templates for creating icons in Adobe Photoshop are available in the Icon Templates Pack.

Warning: The style and dimensions of status bar icons have changed drastically in Android 2.3 compared to previous versions. To provide support for all Android versions, developers should:
1. Place status bar icons for Android 2.3 and higher in the drawable-hdpi-v9, drawable-mdpi-v9, and drawable-ldpi-v9 directories.
2. Place status bar icons for previous versions in drawable-hdpi, drawable-mdpi, and drawable-ldpi directories.

Android 2.3 and Later

The following guidelines describe how to design status bar icons for Android 2.3 (API Level 9) and later.

Size and positioning

Status bar icons should use simple shapes and forms and those must be scaled and positioned inside the final asset.

Figure 1 illustrates various ways of positioning the icon inside the asset. You should size the icons smaller than the actual bounds of the asset. Status bar icons may vary in width, but only minimally.

In order to indicate the recommended size for the icon, each example in Figure 1 includes two different guide rectangles:

  • The red box is the bounding box for the full asset.
  • The blue box is the recommended bounding box for the actual icon. The icon box is sized smaller vertically than the full asset box to allow for varying icon shapes while maintaining a consistent visual weight.
  1. Status bar icon dimensions for high-density (hdpi) screens:
    1. Full Asset: 24w x 38h px (preferred, width may vary)
    2. Icon: 24w x 24h px (preferred, width may vary)
  1. Status bar icon dimensions for medium-density (mdpi) screens:
    1. Full Asset: 16w x 25 px (preferred, width may vary)
    2. Icon: 16w x 16w px (preferred, width may vary)
  1. Status bar icon dimensions for low-density (ldpi) screens:
    1. Full Asset: 12w x 19h px (preferred, width may vary)
    2. Icon: 12w x 12h px (preferred, width may vary)

Figure 1. Status bar icon sizing and positioning inside the bounds of the icon asset.

Style, colors, and effects

Status bar icons are flat, matte, and pictured face-on.

A view of effects for status bar icons.

Figure 2. Style and effects for status icons.

Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.

1.Fill gradient:90°, from #828282 to #919191

2.Inner shadow:#FFFFFF, 10% opacity
angle 90°
distance 1px
size 0px

3.Inner content:Inner content should subtract from the outer shape and consist purely of transparent pixels.

Do's and don'ts

Below are some "do and don't" examples to consider when creating status bar icons for your application.

Example icons

Shown below are standard high-density status bar icons that are used in the Android platform.

Warning: Because these resources can change between platform versions, you should not reference these icons using the Android platform resource IDs (i.e. status bar icons under android.R.drawable). If you want to use any icons or other internal drawable resources, you should store a local copy of those icons or drawables in your application resources, then reference the local copy from your application code. In that way, you can maintain control over the appearance of your icons, even if the system's copy changes. Note that the grid below is not intended to be complete.

Android 2.2 and Earlier

The following guidelines describe how to design status bar icons for Android 2.2 (API Level 8) and earlier.

Structure

  • Rounded corners must always be applied to the base shape and to the details of a status bar icon shown Figure 3.
  • All dimensions specified are based on a 25x25 pixel artboard size with a 2 pixel safeframe.
  • 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 Icon Templates Pack.
A view of status bar icon structure.

Figure 3. Safeframe and corner-rounding for status bar icons. Icon size is 25x25.

Light, effects, and shadows

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

Figure 4. Light, effects, and shadows for status bar icons.

1.Front part:Use fill gradient from primary color palette
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

Color palette

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

White
r 255 | g 255 | b 255
Used for details within the icons and bevel highlight.
Grey gradient
1:  r 169 | g 169 | b 169
2:  r 126 | g 126 | b 126
Used for disabled details within the icon.
Fill gradient
1:  1 r 105 | g 105 | b 105
2:  r 10 | g 10 | b 10
Used as color fill.
Black
r 0 | g 0 | b 0
Used for bevel shadow.

Step by step

  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 in Figure 3.
  3. Add light, effects, and shadows as specified in Figure 4.
  4. Export the icon at 25x25 as a PNG file with transparency enabled.
↑ Go to top

← Back to Icon Design Guidelines