Icon

View source on GitHub

Show icons with different colors and sizes in an accessible way.

Props

Name
Type
Default
string
-

String that clients such as VoiceOver will read to describe the element. Always localize the label.

"blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white"
"gray"
dangerouslySetSvgPath
{ __path: string }
-

When using this prop, make sure that the viewbox around the SVG path is 24x24

"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" | "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" | "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" | "overlay-text" | "pause" | "people" | "person" | "person-add" | "phone" | "pin" | "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" | "story-pin" | "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"
-

This allows us to type check for a valid icon name based on the keys from the list of icons shown below.

inline
boolean
false
number | string
16

Use a number for pixel sizes or a string for percentage based sizes

Usage guidelines

When to Use
  • As symbolic communication for elements that do not have room for text, like 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.
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.

Example

Icon with a label

Pinterest

Icon Combinations

icon="ad"
icon="ad-group"
icon="add"
icon="add-circle"
icon="add-layout"
icon="add-pin"
icon="ads-stats"
icon="ads-overview"
icon="alert"
icon="align-bottom-center"
icon="align-bottom-left"
icon="align-bottom-right"
icon="align-bottom"
icon="align-middle"
icon="align-top-center"
icon="align-top-left"
icon="align-top-right"
icon="align-top"
icon="android-share"
icon="angled-pin"
icon="apps"
icon="arrow-back"
icon="arrow-circle-down"
icon="arrow-circle-forward"
icon="arrow-circle-up"
icon="arrow-down"
icon="arrow-end"
icon="arrow-forward"
icon="arrow-start"
icon="arrow-up"
icon="arrow-up-right"
icon="bell"
icon="calendar"
icon="camera"
icon="camera-roll"
icon="cancel"
icon="canonical-pin"
icon="color-picker"
icon="check"
icon="check-circle"
icon="circle-outline"
icon="clear"
icon="clock"
icon="code"
icon="cog"
icon="compass"
icon="compose"
icon="crop"
icon="dash"
icon="conversion-tag"
icon="credit-card"
icon="directional-arrow-left"
icon="directional-arrow-right"
icon="download"
icon="drag-drop"
icon="duplicate"
icon="edit"
icon="ellipsis"
icon="ellipsis-circle-outline"
icon="envelope"
icon="eye"
icon="eye-hide"
icon="facebook"
icon="face-happy"
icon="face-sad"
icon="face-smiley"
icon="file-unknown"
icon="fill-opaque"
icon="fill-transparent"
icon="filter"
icon="flag"
icon="flash"
icon="flashlight"
icon="flipHorizontal"
icon="flipVertical"
icon="folder"
icon="gif"
icon="globe"
icon="globe-checked"
icon="gmail"
icon="google-plus"
icon="graph-bar"
icon="handle"
icon="hand-pointing"
icon="heart"
icon="heart-outline"
icon="heart-broken"
icon="history"
icon="impressum"
icon="info-circle"
icon="key"
icon="knoop"
icon="lightbulb"
icon="lightning-bolt-circle"
icon="link"
icon="location"
icon="lock"
icon="logo-large"
icon="logo-small"
icon="logout"
icon="margins-large"
icon="margins-medium"
icon="margins-small"
icon="maximize"
icon="megaphone"
icon="menu"
icon="minimize"
icon="move"
icon="mute"
icon="overlay-text"
icon="pause"
icon="people"
icon="person"
icon="person-add"
icon="phone"
icon="pin"
icon="pin-hide"
icon="pinterest"
icon="play"
icon="protect"
icon="refresh"
icon="question-mark"
icon="remove"
icon="reorder-images"
icon="replace"
icon="report"
icon="rotate"
icon="scale"
icon="search"
icon="security"
icon="shopping-bag"
icon="smiley"
icon="smiley-outline"
icon="send"
icon="share"
icon="sound"
icon="sort-ascending"
icon="sort-descending"
icon="sparkle"
icon="speech"
icon="speech-ellipsis"
icon="star"
icon="star-half"
icon="story-pin"
icon="switch-account"
icon="tag"
icon="terms"
icon="text-align-left"
icon="text-align-center"
icon="text-align-right"
icon="text-all-caps"
icon="text-extra-small"
icon="text-large"
icon="text-line-height"
icon="text-medium"
icon="text-sentence-case"
icon="text-size"
icon="text-small"
icon="text-spacing"
icon="trash-can"
icon="twitter"
icon="video-camera"
icon="view-type-default"
icon="view-type-dense"
icon="view-type-list"
icon="visit"
icon="workflow-status-all"
icon="workflow-status-canceled"
icon="workflow-status-halted"
icon="workflow-status-in-progress"
icon="workflow-status-ok"
icon="workflow-status-problem"
icon="workflow-status-unstarted"
icon="workflow-status-warning"

Size & Color Combinations

size={16}
color="gray"
size={16}
color="darkGray"
size={16}
color="red"
size={24}
color="gray"
size={24}
color="darkGray"
size={24}
color="red"
size={32}
color="gray"
size={32}
color="darkGray"
size={32}
color="red"
Edit page on GitHub