Add color overlay and opacity on svg objects/icons

EDIT: It exists! You find it under effects.

Would be nice to change the color and opacity on svg objects/icons directly in Webflow if possible. I often do a lot of color tweeking in the end before publishing. Its a nuisance to upload new svg for each tweek.

  • Christoffer Furnes
  • Jan 24 2017
  • Patrik Norell commented
    16 Mar 08:12

    This is a "workaround" that will allow you to change color of an svg

  • Mariia Kulida commented
    December 30, 2019 14:00


  • Andrey Tyshko commented
    August 09, 2018 10:40

    and need change colors when mouse hover )))

  • Charles Gerli commented
    June 25, 2018 17:17

    Linda is correct, the current effects options do not allow you to change the color state of an .svg from hex A to hex B. For example we want to change the fill of an icon from one color to another when the tab label containing that icon is selected. 

  • Linda Griffen commented
    April 27, 2018 14:50

    While I can change color with Hue Rotate, Saturate, and Brightness, I do not agree that this can be done under Effects to the preciseness that it should be able to be done. Effects does not allow me to specify an exact hex color, which is often necessary. Having to create SVGs in different colors is a time consuming pain.  Please do not close this wish list item!

  • Christoffer Furnes commented
    October 17, 2017 14:38

    This request can be deleted, its can be done, under the effects rollout!

  • Miek Thompson commented
    August 22, 2017 19:05



    - - -


    If you go to WIX free editor, it is very easy to manipulate SVG assets. I hope this comes to webflow soon.