Set color on SVG

Hello guys,

I am trying to use a SVG pictogram and I want to know if it’s possible to edit the color directly in webflow and if it’s also possible to change the color using animations.

That’s all I need :smiley:

Thanks in advance for your answers !


At the moment you can’t alter the color or animate colors of SVG’s directly in Webflow. :smile:

Oh alright ! That’s just what I wanted to know ! Thanks for the fast answer, I won’t have to look for hours :smiley:

The only thing you can do is insert your SVG as CODE within an embed widget.

In there you can apply a class to the corresponding path and give that a fill color.
You can then change the color of the svg on hover with custom code.

1 Like

Oh I’ll try that ! Thanks for the tips !

You can see it live here:

Custom Code:

SVG within Embed



Would be cool to be able to color SVG files though, new feature? :smile:


Hey @MoinardColin

I’ve done a few SVG related bits & pieces in Webflow. Hope the below codes pieces will be of some use


  1. Paste your SVG code into a Webflow Embed as Daneil explained in the comments above

  2. Paste the below code into custom header code section:

You can edit the various bits of styling to change your SVG appearance and animation settings:

width : change the overall SVG width (optional - you can just leave it at 100% if you like!)
stroke : change the hex code to affect the color
stroke-width : the “weight” of your SVG line
stroke-dasharray : the width of the lines which will be animated (by the @keyframes bit at the end)
stroke-dashoffset : the space between your animated lines
animation : the length in time of your animation & its animation type

Often its easiest to just play with the animation settings until you get the effect you want. In the example above, I managed to determine that setting dasharray & dashoffset to 3000 made my SVG icon “draw” itself out fully, pause for a second, then start again, which was the effect I wanted.

Here’s a really good, well document explanation of the principles used:


This one is a little more complex - you can do it with pure CSS but I prefer working in JQuery for these sorts of things.

It’s going to be a little “in-depth” to explain in full on here, but there’s a CodePen from LukyVJ which has all the necessary bits of code you can copy & re-use:

PS. If you do want to do color animations using CSS only, there’s also a great tutorial on TutsPlus which covers the topic in detail:

1 Like

Alright thanks a lot guys for all the suggestions, I’ll try this out ! Thanks again for the help !

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.