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 44 x 44px 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 Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:
Accessible design on iOS
Accessible development on iOS
Design tokens
Use these tokens for applying size and color styles to Icon.
Anatomy
Dimensions
Icon's container 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 44 x 44px touch target.
Variants
Size
Generally 16px and 24px icons should be used in mobile interfaces. When icons are interactive, they should use the IconButton component with its built-in 44 x 44px touch target.
Size specs
Size use cases
- 12px
Used only for Pins and Boards - 16px
Default icon size. Used often, whenever an icon is needed, i.e., icons in headers, close icons, etc. - 20px
Used only when pairing with 16pt (Size200) text - 24px
Used for navigation bar elements or when a larger icon is needed - 32px
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 iOS, use the icon-share icon to indicate the ability to share an element. - Check
Instead of a radio button on iOS, use the check icon. - Back
On iOS, use the chevron icon titled arrow-back to indicate backward movement.
ios-share
check
arrow-back
Naming
- 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
- 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