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.

As described in [Providing
Density-Specific Icon Sets](https://developer.android.com/guide/practices/ui_guidelines/icon_design#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 Table 1 for a listing of the recommended finished icon sizes for each
density. Also, see [Tips for Designers](https://developer.android.com/guide/practices/ui_guidelines/icon_design#design-tips)
for suggestions on how to work with multiple sets of icons.

**Table 1.** Summary of finished dialog
icon dimensions for each of the three generalized screen densities.

|                  | `ldpi` (120 dpi) (Low density screen) | `mdpi` (160 dpi) (Medium density screen) | `hdpi` (240 dpi) (High density screen) | `xhdpi` (320 dpi) (Extra-high density screen) |
| Dialog Icon Size |              24 x 24 px               |                32 x 32 px                |               48 x 48 px               |                  64 x 64 px                   |
|------------------|---------------------------------------|------------------------------------------|----------------------------------------|-----------------------------------------------|

**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](https://developer.android.com/guide/practices/ui_guidelines/icon_design#templatespack).

## All Android Versions

The following guidelines describe how to design dialog icons for all versions
of the Android platform.

### Structure

- Dialog icons have a 1 pixel 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 pixel artboard size in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the Photoshop template.

|--------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| ![A view of dialog icon structure.](https://developer.android.com/static/images/icon_design/dialog_icon.png) | **Figure 1.**Safeframe and fill gradient for dialog icons. Icon size is 32x32. |

### Light, effects, and shadows

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.

|--------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ![A view of light, effects, and shadows for dialog icons.](https://developer.android.com/static/images/icon_design/dialog_light.png) | **Figure 2.**Light, effects, and shadows for dialog icons. |------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------| | *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                                                                               | |

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