Icon

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

also known as <svg>, Symbol, Glyph

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

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 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
, Opens a new tab

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

  1. 12px
    Used only for Pins and Boards
  2. 16px
    Default icon size. Used often, whenever an icon is needed, i.e., icons in headers, close icons, etc.
  3. 20px
    Used only when pairing with 16pt (Size200) text
  4. 24px
    Used for navigation bar elements or when a larger icon is needed
  5. 32px
    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 iOS, use the icon-share icon to indicate the ability to share an element.
  2. Check
    Instead of a radio button on iOS, use the check icon.
  3. Back
    On iOS, use the chevron icon titled arrow-back to indicate backward movement.
A share icon.

ios-share

A check mark icon.

check

A chevron icon pointing left.

arrow-back

Naming

  • 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

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