October 21, 2022

Webflow, Coloring SVGs as Lotties

Is your SVG too large to inline in Webflow's HTML Embed?

Don't despair- Webflow's Lottie animation element might just be what you're looking for.

Here's how it works-

  1. Convert your SVG to a Lottie JSON, with a free online tool
  2. Add your Lottie JSON file to your website's Assets
  3. Add a Webflow Lottie element to your page, and connect it to your Lottie JSON file
  4. Add an HTML embed
  5. Drop in a chunk of CSS to target your desired colors ( including CSS currentColor ) to your Lottie

The Lottie renders as an SVG in your Webflow page, and even supports animation if you want to take it that far. This approach is impressively smooth, with the ability to target different parts of your resulting SVG using classes.

Have a look.

DEMO - Coloring SVGs as Lotties

I've done a full breakdown of this technique in the video.

Want to support our team?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.
Buy us a beer