Embed SVG icon in Webflow and dynamically change color

Daris Ali Mufti
Mar 13, 2023

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.

--

--

Daris Ali Mufti

UI UX Designer at Jejak.in | Motion Design | Drone Mapping Pilot | QA TW Lead at Nawatech