Embed SVG icon in Webflow and dynamically change color

Another quick trick for Webflow

Photo by Balázs Kétyi on Unsplash

Manually uploading SVG icons to Webflow can be frustrating if you are still doing design iterations.

Here’s a quick trick to solve that workflow:

1. Webflow support HTML embed, and you can embed SVG code in it
2. Copy as SVG from Figma and straight paste to embed element in Webflow
3. Edit the color fill to (CurrentColor) in the SVG code to match what font color in the parent CSS class

From this

To this

Thanks for reading! I am Daris Ali Mufti a UI UX Designer based in Jakarta Indonesia. Still a lot to learn! any insights, differing opinions, or advice are always welcome. I am always open to dialogue with others and recognize that I am still not an industry expert.