Customize SVG colors before you download or copy the asset

The library automatically detects up to three colors on an asset page so you can change them before downloading SVG, downloading PNG, or copying code.

Use color replacement to adapt SVG graphics to your brand, UI, or presentation theme before exporting.

Steps

  1. Open the asset page and switch from Original to Customize colors.
  2. Adjust the detected colors one by one until the asset matches your brand or presentation theme.
  3. Use Download SVG if you want the recolored vector file, or Download PNG if you want a final raster output.
  4. If the asset is going into a codebase, use Copy JSX or Copy React component after the color customization is set.

Collections to start from

FAQ

Will every SVG expose multiple editable colors?

No. Some SVGs are single-color, while others expose up to three detected colors in the current library flow.

Do copied code snippets include the updated colors?

Yes. Copy SVG, Copy JSX, and Copy React component should use the currently customized version of the asset.

Recommended assets for this guide