Iconography and SVGs
Search icon library
The combobox on the left allows to search icons by name. On the right, the icon list renders the filtered results. Furthermore, the icon list can be used to visually search for icons. On hover, each tooltip displays their 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, ...) and optimizing the SVGs to improve the 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 gets added to Gestalt.