Custom and brand 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 or 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 and for smaller bundle sizes, 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

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.