Iconography and SVGs
Icon library
Use the combobox on the left to search icons by name. The icon list on the right renders the filtered results. You can also use the icon list to visually search for icons. On hover, a tooltip displays the icon name. On click, the icon name will be copied.
Custom SVG icons
If you need a new icon for an experiment that is not listed on our Icon documentation, use the dangerouslySetSvgPath prop on Icon, IconButton, and Pog.
However, dangerouslySetSvgPath only works with one SVG path. For icons with multiple paths and groups, use Box and dangerouslySetInlineStyle to pass the custom icon as backgroundImage.
Once your experiment ships to 100%, ask your designer to follow the directions in the Icon kit. Once the asset is ready, we can add the icon to Gestalt.
Gestalt icon svg files follow a particular format and use automatic file validation testing.
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <path d="_______________"/> </svg>
We override the color in the Gestalt Icon component and Gestalt only uses the d attribute in the path tag and the basic attributes for visualizing the raw file in the svg tag . For consistency, we don't include unnecessary attributes in the svg and path tags.
We recommend streamlining (removing strokes, transforms, etc.) and optimizing the SVGs to improve performance and the pinner experience using the tools svgo or ImageOptim
To use svgo, install
npm -g install svgo
and run
svgo -f packages/gestalt/src/icons --config=packages/gestalt/src/icons/svgo.config.js
Accessibility
- Icons must meet the Non-Text Contrast requirement.
- Avoid using unfamiliar icons. Always refer to Gestalt available icons. A new icon needs to be user tested to evaluate comprehension.
- Icons should be universal across cultures, regions, ages, and backgrounds without need for translation. Be mindful of your audience and use symbols and labels that resonate with them.
- Some icons don't translate well in all cultures, so it's preferred to user-test each icon before it is added to Gestalt.
Brand icons
All brand icons are trademarks of their respective owners. The inclusion of these trademarks does not indicate endorsement of the trademark holder by Pinterest, nor vice-versa. Please do not use brand logos for any purpose except to represent the company, product, or service to which they refer.