icons
Icons for medium screen density (mdpi) can be used as default icons. Suppose we have an icon of 48x48 pixels in mdpi. Then the image will be scaled for a different density as follows:
- 36x36 (0.75x) for low-density (ldpi)
- 48x48 (1.0x baseline) for medium-density (mdpi)
- 72x72 (1.5x) for high-density (hdpi)
- 96x96 (2.0x) for extra-high-density (xhdpi)
- 144x144 (3.0x) for extra-extra-high-density (xxhdpi)
- 192x192 (4.0x) for extra-extra-extra-high-density (xxxhdpi)
action icons
Action icons can be used in a toolbar/action bar, in a dialog box, or as a tab icon.
Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp, i.e 12dp free space from each side.
You can include margins into icon. For example, size of icon 32x32 pixels but actual content in square 24x24, i.e. 4 pixels free space from each side.
Sizes of icons in pixels:
- 24x24 area in 32x32 (mdpi)
- 36x36 area in 48x48 (hdpi)
- 48x48 area in 64x64 (xhdpi)
- 72x72 area in 96x96 (xxhdpi)
- 96x96 area in 128x128 (xxxhdpi)
You can change opacity of icon to denote state. For (black) icons on light backgrounds:
- 87% opacity for active+focused state
- 54% opacity for active-unfocused state
- 38% opacity for inactive state
For (white) icons on black backgrounds:
- 100% opacity for active+focused state
- 70% opacity for active-unfocused state
- 50% opacity for inactive state
small contextual icons
Small icons are used to surface actions and/or provide status for specific items. For example, in the Gmail app, each message has a star icon that marks the message as important.
Sizes of icons in pixels:
- 16x16 (mdpi)
- 24x24 (hdpi)
- 32x32 (xhdpi)
- 48x48 (xxhdpi)
- 64x64 (xxxhdpi)
status bar icons
Status bar icons are used to represent application notifications in the status bar. They should be flat (no gradients), white and face-on perspective.
- 22x22 area in 24x24 (mdpi)
- 33x33 area in 36x36 (hdpi)
- 44x44 area in 48x48 (xhdpi)
- 66x66 area in 72x72 (xxhdpi)
- 88x88 area in 96x96 (xxxhdpi)