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
  • Ben Biazar commented
    10 Dec, 2022 08:41am

    In the middle of my project, the logo can't be embedded, because of the limitation. " exceed 10000 characters"

  • Christian Heyne commented
    16 Nov, 2020 08:29am

    +1000 | highly needed:))

  • Patrik Norell commented
    16 Mar, 2020 08:12am

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

  • Mariia Kulida commented
    30 Dec, 2019 02:00pm


  • Andrey Tyshko commented
    9 Aug, 2018 10:40am

    and need change colors when mouse hover )))

  • Charles Gerli commented
    25 Jun, 2018 05:17pm

    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
    27 Apr, 2018 02:50pm

    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
    17 Oct, 2017 02:38pm

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

  • Miek Thompson commented
    22 Aug, 2017 07:05pm



    - - -


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

  • +57