Icon assets
Download svg assets from our Android icon GitHub repo
Usage guidelines
- 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
- 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
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
- 12dp
Used only for Pins and Boards - 16dp
Default icon size. Used often, any time an icon is needed, i.e. icons in headers, close icons, etc. - 20dp
Used only when pairing with 16dp (Size200) text - 24dp
Used for action bar navigation elements or when a larger icon is needed - 32dp
Used sparingly to draw attention to an icon that might otherwise be missed
16px Icon example
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
- Share
On Android, use theandroid-shareicon to indicate the ability to share an element. - Check
On Android, use the standard radio button instead of an icon. - Back
On Android, use thedirectional-arrow-lefticon to indicate backward movement.
android-share
radio button (not an icon)
directional-arrow-left
Naming
- All Android icons in the Gestalt system start with the prefix
ic_and end with the suffix_gestalt - Follow the web icon naming conventionwhen possible; Opens a new tab
- Names should be kebab-case: all lowercase, with multiple words separated by a dash
- Start with the primary function first—instead of
circle-arrow, usearrow-circle
Writing
For writing best practices, refer to the content standards.
- 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
- Use the words "image" or "icon" in the description label; instead, use words that indicate the icon's purpose