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

Open the asset page and switch from Original to Customize colors.
Adjust the detected colors one by one until the asset matches your brand or presentation theme.
Use Download SVG if you want the recolored vector file, or Download PNG if you want a final raster output.
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

free icons and ui symbols cursors and pointer states emoji and celebration illustrations and scenes

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

Party Popper Emoji

Celebration emoji artwork for launches and wins.

Artist Palette Emoji

Creative palette emoji artwork for art and design.

Activity

Heartbeat-style activity icon from Feather.

Airplay

Display and casting icon from Feather.

Analytics

Analytics icon in Material style.

Aperture

Aperture icon for photography and optics.