EasyLottie Guide
How to Change the Colors of an Animated SVG (Figma Export)
You exported an animated SVG from Figma but the colors are wrong for your brand or theme. Here is how to recolor it online, keep the animation, and download — no code, no signup.
Why recolor the SVG instead of re-exporting from Figma
When an animated SVG comes back in the wrong palette, reopening Figma, editing every layer, and re-exporting is slow — and often you do not even own the source file. If the motion is already right and only the colors are wrong, a direct recolor is faster and safer. You keep the exact animation and only change the fills and strokes.
This is common with Figma Motion exports, icon libraries, and marketplace SVGs that ship in a generic color scheme or are designed for light mode when you need dark mode.
Step-by-step: recolor an animated SVG online
Everything runs locally in your browser, so your SVG is never uploaded to a server.
- Open EasyLottie’s SVG Color Changer and drop your .svg file in.
- The tool detects every fill and stroke color and lists them, with the animation still playing in a live preview.
- Pick a new color for any swatch — the preview updates immediately, and the animation keeps running.
- Download the recolored SVG. The motion and structure are unchanged.
It keeps the animation — that is the point
A common worry is that recoloring will flatten or break the animation. It does not. The SVG Color Changer edits only the color tokens (fills, strokes) and leaves the CSS @keyframes and structure untouched, so the exported file animates exactly as it did before — just in your colors.
Figma sometimes exports wide-gamut color(display-p3 …) overrides. The tool normalizes those so the plain, editable color wins, which is why a Figma export recolors predictably.
Recolor, or convert to Lottie?
If your end target is a Lottie file rather than an SVG, you can convert the animated SVG to Lottie instead — an animated SVG can become a true vector Lottie. Recolor first if you want the color change baked into the SVG, or convert first and recolor the Lottie with the Color Changer. Both paths are free and run in the browser.
Quick checklist
- Drop the .svg into the SVG Color Changer — nothing is uploaded.
- Review every detected fill and stroke color.
- Swap colors and watch the live animated preview update.
- Download the recolored SVG with the animation intact.
- Need a Lottie instead? Convert the SVG to Lottie afterward.
Frequently asked questions
Can I change the colors of an animated SVG without breaking the animation?
Yes. EasyLottie’s SVG Color Changer edits only fills and strokes and leaves the animation keyframes untouched, so it keeps animating in your new colors.
Does it work with a Figma SVG export?
Yes. It normalizes Figma’s wide-gamut color overrides so the editable colors are detected and swappable.
Is my SVG uploaded anywhere?
No. Detection, recoloring, and download all happen locally in your browser.
Can I turn the recolored SVG into a Lottie?
Yes. Use the Figma to Lottie tool to convert an animated SVG into a true vector Lottie.
Is it free?
Yes, free with no signup and no watermark.