Download svg assets from our Android icon GitHub repo.
- 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.
- 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.
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:
Use these tokens for applying size and color styles to Icon.
Icon's container (.svg viewbox) dimensions are the same for all icons regardless of the size of the vector asset inside of the container.
If an icon is interactive, use the built-in 48dp touch target.
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 use cases
Used only for Pins and Boards
Default icon size. Used often, any time an icon is needed, i.e. icons in headers, close icons, etc.
Used only when pairing with 16dp (Size200) text
Used for action bar navigation elements or when a larger icon is needed
Used sparingly to draw attention to an icon that might otherwise be missed
16px Icon example
24px Icon example
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.
On Android, use the
android-shareicon to indicate the ability to share an element.
On Android, use the standard radio button instead of an icon.
On Android, use the
directional-arrow-lefticon to indicate backward movement.
radio button (not an icon)
- All Android icons in the Gestalt system start with the prefix
ic_and end with the suffix
- Follow the web icon naming convention when possible
- Names should be kebab-case: all lowercase, with multiple words separated by a dash
- Start with the primary function first—instead of
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