Icon

Icons are the symbolic representation of an action or information, providing visual context and improving usability.

also known as <svg>, Symbol, Glyph

Four example icons in a row. Icons include share, check, back, and menu.

Icon assets

Download svg assets from our Android icon GitHub repo

.

Usage guidelines

When to use
  • Use as symbolic communication for elements that do not have room for text. In this case, ensure the icon choice is easily recognizable and makes sense to international users.
  • To help with quick scanning by adding rhythm and hierarchy to the design
When not to use
  • For decorative purposes or visual embellishment, like how you would use an illustration. Contact us if this is needed.
  • As a visual reinforcement for associated text without adding new meaning
  • To communicate status or health. Use Status instead.
  • As an interactive element (e.g., hover, focus, click/tap). Use IconButton instead.

Best practices

  • If your icons are interactive, use the IconButton component and ensure that they utilize at least 48 x 48dp touch targets
  • When designing in iOS and Android, use platform-specific icons as they are most recognizable to that platform’s users
  • When possible, include a visible text label
  • Icons should always be a solid color and should inherit the color of the surrounding text if applicable

For general Icon best practices, refer to the web Icon documentation.

Accessibility

People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on Android


Accessible development on Android
, Opens a new tab

Design tokens

Use these tokens for applying size and color styles to Icon.


Anatomy

Dimensions

Icon's container (.svg viewbox) dimensions are the same for all icons regardless of the size of the vector asset inside of the container.


Touch target

If an icon is interactive, use the built-in 48dp touch target.


Variants

Size

Generally 16dp and 24dp icons should be used in mobile interfaces. When icons are interactive, they should use the IconButton component with its built-in 48 x 48dp touch targets.

Size specs

Size use cases

  1. 12dp
    Used only for Pins and Boards
  2. 16dp
    Default icon size. Used often, any time an icon is needed, i.e. icons in headers, close icons, etc.
  3. 20dp
    Used only when pairing with 16dp (Size200) text
  4. 24dp
    Used for action bar navigation elements or when a larger icon is needed
  5. 32dp
    Used sparingly to draw attention to an icon that might otherwise be missed
The Pinterest homepage with a 16 pixel TV icon.

16px Icon example

The Pinterest homepage footer with several 24 pixel icons.

24px Icon example

Color

Icon colors are semantic—they have a specific meaning and aren't arbitrary. There is no disabled color for icons, as that is handled by the button state that an icon is in.

Light mode


Dark mode


Platform-specific icons

  1. Share
    On Android, use the android-share icon to indicate the ability to share an element.
  2. Check
    On Android, use the standard radio button instead of an icon.
  3. Back
    On Android, use the directional-arrow-left icon to indicate backward movement.
Android's share icon.

android-share

A radio button instead of a check icon.

radio button (not an icon)

A arrow pointing left.

directional-arrow-left

Naming

  • All Android icons in the Gestalt system start with the prefix ic_ and end with the suffix _gestalt
  • Names should be kebab-case: all lowercase, with multiple words separated by a dash
  • Start with the primary function first—instead of circle-arrow, use arrow-circle

Writing

For writing best practices, refer to the content standards.

Do
  • Use a descriptive label to describe the icon
  • Be succinct. Exclude unnecessary words
  • Be informative and accurate
  • Write in the active voice
  • Avoid technical jargon
Don't
  • Use the words "image" or "icon" in the description label; instead, use words that indicate the icon's purpose