Icon

View source on GitHub

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

See the Iconography and SVG guidelines to explore the full icon library.

also known as <svg>, Symbol, Glyph

Figma:

Web:

iOS:

Android:

A11y:

<Flex gap={{ column: 0, row: 1 }}>
              <Icon icon="pin" accessibilityLabel="Pin" color="default" />
            <Text align="center" color="default" weight="bold">
              Pinterest
            </Text>
          </Flex>

<Flex gap={{ column: 0, row: 1 }}>
              <Icon icon="pin" accessibilityLabel="Pin" color="default" />
            <Text align="center" color="default" weight="bold">
              Pinterest
            </Text>
          </Flex>

Props

Component props
Name	Type	Default
`accessibilityLabel` Required	`string`	-
	Label for screen readers to announce Icon. See the Accessibility guidelines for details on proper usage.
`color`	`"default" \| "subtle" \| "success" \| "error" \| "warning" \| "info" \| "recommendation" \| "inverse" \| "shopping" \| "brandPrimary" \| "light" \| "dark"`	`"subtle"`
	These are all the colors available to apply to the Icon. However, the literal options ("blue" , "darkGray" , "eggplant" , "gray" , "green" , "lightGray" , "maroon" , "midnight" , "navy" , "olive" , "orange" , "orchid" , "pine" , "purple" , "red" , "watermelon" and "white") will be deprecated soon. Avoid using them in any new implementations. See the color variant to learn more.
`dangerouslySetSvgPath`	`{\| __path: string \|}`	-
	Defines a new icon different from the built-in Gestalt icons. See the custom icon variant to learn more.
`icon`	"ad" \| "ad-group" \| "add" \| "add-circle" \| "add-layout" \| "add-pin" \| "ads-stats" \| "ads-overview" \| "alert" \| "align-bottom-center" \| "align-bottom-left" \| "align-bottom-right" \| "align-bottom" \| "align-middle" \| "align-top-center" \| "align-top-left" \| "align-top-right" \| "align-top" \| "android-share" \| "angled-pin" \| "apps" \| "arrow-back" \| "arrow-circle-down" \| "arrow-circle-forward" \| "arrow-circle-up" \| "arrow-down" \| "arrow-end" \| "arrow-forward" \| "arrow-start" \| "arrow-up" \| "arrow-up-right" \| "bell" \| "calendar" \| "camera" \| "camera-roll" \| "cancel" \| "canonical-pin" \| "captions" \| "color-picker" \| "check" \| "check-circle" \| "circle-outline" \| "clear" \| "clock" \| "code" \| "cog" \| "compass" \| "compose" \| "crop" \| "dash" \| "conversion-tag" \| "credit-card" \| "directional-arrow-left" \| "directional-arrow-right" \| "download" \| "drag-drop" \| "duplicate" \| "edit" \| "ellipsis" \| "ellipsis-circle-outline" \| "envelope" \| "eye" \| "eye-hide" \| "facebook" \| "face-happy" \| "face-sad" \| "face-smiley" \| "file-unknown" \| "fill-opaque" \| "fill-transparent" \| "filter" \| "flag" \| "flash" \| "flashlight" \| "flipHorizontal" \| "flipVertical" \| "folder" \| "gif" \| "globe" \| "globe-checked" \| "gmail" \| "google-plus" \| "graph-bar" \| "handle" \| "hand-pointing" \| "heart" \| "heart-outline" \| "heart-broken" \| "history" \| "home" \| "idea-pin" \| "impressum" \| "info-circle" \| "key" \| "knoop" \| "lightbulb" \| "lightning-bolt-circle" \| "link" \| "location" \| "lock" \| "logo-large" \| "logo-small" \| "logout" \| "margins-large" \| "margins-medium" \| "margins-small" \| "maximize" \| "megaphone" \| "menu" \| "minimize" \| "move" \| "mute" \| "music-off" \| "music-on" \| "overlay-text" \| "pause" \| "people" \| "person" \| "person-add" \| "phone" \| "pin" \| "pincode" \| "pin-hide" \| "pinterest" \| "play" \| "protect" \| "refresh" \| "question-mark" \| "remove" \| "reorder-images" \| "replace" \| "report" \| "rotate" \| "scale" \| "search" \| "security" \| "shopping-bag" \| "smiley" \| "smiley-outline" \| "send" \| "share" \| "sound" \| "sort-ascending" \| "sort-descending" \| "sparkle" \| "speech" \| "speech-ellipsis" \| "star" \| "star-half" \| "switch-account" \| "tag" \| "terms" \| "text-align-left" \| "text-align-center" \| "text-align-right" \| "text-all-caps" \| "text-extra-small" \| "text-large" \| "text-line-height" \| "text-medium" \| "text-sentence-case" \| "text-size" \| "text-small" \| "text-spacing" \| "trash-can" \| "twitter" \| "video-camera" \| "view-type-default" \| "view-type-dense" \| "view-type-list" \| "visit" \| "workflow-status-all" \| "workflow-status-canceled" \| "workflow-status-halted" \| "workflow-status-in-progress" \| "workflow-status-ok" \| "workflow-status-problem" \| "workflow-status-unstarted" \| "workflow-status-warning"	-
	SVG icon from the Gestalt icon library to use within Icon.. See the iconography and SVG guidelines to explore the Gestalt icon library.
`inline`	`boolean`	`false`
	Properly positions Icon relative to an inline element, such as Text using the inline property.
`size`	`number \| string`	`16`
	Use a number for pixel sizes or a string for percentage based sizes. See the size variant to learn more.

Usage guidelines

When to use

As symbolic communication for elements that do not have room for text, like the number of pins in a carousel. In this case, ensure the icon choice is easily recognizable and makes sense to international users.
To convey a critical meaning that cannot be communicated with words, like a downward chevron in a Button to indicate it reveals a menu.
To help with quick scanning by adding rhythm and hierarchy to the design.

When not to use

For purposes that are decorative or for visual embellishment, such as how illustrations are typically used. 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., utilizing hover, focus, click/tap). Use IconButton instead.

Best practices

Use icons intentionally, ensuring the Icon choice is easily recognizable and makes sense in the context.

Don't

Repurpose icons. Using icons for their intended meaning supports good comprehension.

Pair text and icons when possible to provide better clarity.

Don't

Don't create interactive Icons using TapArea. Use IconButton instead.

Accessibility

Ready

Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments.

ARIA attributes

If the icon appears without text, the Icon requires accessibilityLabel, a text description for screen readers to announce and communicate the represented Icon, as shown in the first example.

Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: “pins".

If an icon has a visible label that describes what the icon represents, accessibilityLabel can be an empty string, as shown in the second example.

<Flex gap={{ column: 0, row: 1 }}>
  <Icon icon="eye" accessibilityLabel="Number of views" color="default" />
  <Text weight="bold" size="300">4</Text>
</Flex>

<Flex gap={{ column: 0, row: 1 }}>
  <Icon icon="eye" accessibilityLabel="Number of views" color="default" />
  <Text weight="bold" size="300">4</Text>
</Flex>

<Flex gap={{ column: 0, row: 1 }}>
  <Icon icon="tag" accessibilityLabel="" color="default" />
  <Text align="center" weight="bold">
    Shopping spotlight
  </Text>
</Flex>

<Flex gap={{ column: 0, row: 1 }}>
  <Icon icon="tag" accessibilityLabel="" color="default" />
  <Text align="center" weight="bold">
    Shopping spotlight
  </Text>
</Flex>

Legibility and touch area

Ensure that icons use a contrast ratio of 4.5:1 between icon color and background color.

Localization

Be sure to localize accessibilityLabel.

Variants

Colors

Icons can be created using the following color options. brandPrimary should only be used to represent the Pinterest logo, as it is not accessible. See the design tokens for more info.

color="default"

color="subtle"

color="success"

color="error"

color="warning"

color="info"

color="recommendation"

color="inverse"

color="shopping"

color="brandPrimary"

color="light"

color="dark"

Size

These are the guidelines for icon sizes (in px):

12
Used sparingly in tight spaces. When possible, use a text label next to the icon, as it can be hard to see for visually impaired people.
14
Used often following body text content any time an icon is needed.
16
Used often any time an icon is needed. Default icon size.
24
Used frequently any time an icon is needed.
32
Used occasionally, on more dense UI.
32+
Should be used sparingly and only in places where the UI is very dense and a larger icon is required.

Custom icon

Icon accepts both Gestalt icons and custom icons, as shown in the second example. For custom icons, follow the iconography and SVG guidelines.

<Tooltip text="Built-in Gestalt Icon">
  <Icon
    accessibilityLabel="Go to next steps"
    icon="directional-arrow-right"
  />
</Tooltip>

<Tooltip text="Built-in Gestalt Icon">
  <Icon
    accessibilityLabel="Go to next steps"
    icon="directional-arrow-right"
  />
</Tooltip>

<Tooltip text="Custom Icon">
  <Icon
    accessibilityLabel="Go to next steps"
    dangerouslySetSvgPath={{ __path: 'M23 5v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4v-5.5h10.258l-1.94 1.939a1.5 1.5 0 0 0 2.121 2.122L17 12l-5.561-5.561a1.501 1.501 0 0 0-2.121 2.122l1.94 1.939H1V5a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4'}}
  />
</Tooltip>

<Tooltip text="Custom Icon">
  <Icon
    accessibilityLabel="Go to next steps"
    dangerouslySetSvgPath={{ __path: 'M23 5v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4v-5.5h10.258l-1.94 1.939a1.5 1.5 0 0 0 2.121 2.122L17 12l-5.561-5.561a1.501 1.501 0 0 0-2.121 2.122l1.94 1.939H1V5a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4'}}
  />
</Tooltip>

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

Don't

Use the words "image" or "icon" in the description label; instead, use words that indicate the purpose of the icon.

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma across all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS	Planned	Component is slotted to be built for iOS.
Android	Planned	Component is slotted to be built for Android.

IconButton
Use IconButton when only an icon is needed to represent an action instead of text.

Button
Use Button to allow users to take an action.

Edit page on GitHub

Icon

Props

Usage guidelines

Best practices

Accessibility

ARIA attributes

Legibility and touch area

Localization

Variants

Colors

Size

Custom icon

Writing

Component quality checklist

Related