How to put embed svg code to CMS?

Hello, Everyone.
I have a question with my project.
In my project I should have to display category from the CMS and each category has its icon.
My designer want to change the color of icon when mouse hover on icon.
So, I was going to save svg file (that has style="fill:currentColor) to cms as image, but because it is image so, the color doesn’t change with text color.

So, I was going to save svg code in plain text file, and put this file on the embed code element but it doesn’t work as well.
Is there anyone who can help me?

This is my svg icon code.

Thank you.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

can you share your site link?

Thank you.
Solved Problem.

How did you find your solution? I’m using the SVG code that should be working but it doesn’t seem to work when being referenced through the CMS via Embed. Thanks in advance!

1 Like

Also curious as to how you achieved this. Any info?

Solved problem with this solution: Custom SVGs from CMS Field - Webflow

“One year later”

@Chuck-Norris I don’t know what kind of sorcery you did there but it’s not working. I pasted my svg code in your cms, and if I remove the ‘svg-code’ class it doesn’t render. I duplicated the class in your file and have the same 2 paragraphs with the same svg code coming from the cms. If class is ‘svg-code’ it works, I can see the svg. If it’s named anything else (‘svg-code Copy’ for instance), it doesn’t work. Debugged for about an hour and I still can’t figure it out. But thanks for sharing your file. Initially I thought the secret was display none. Maybe you can give a short explanation so we can save some time for future individuals stumbling upon this? :saluting_face:

P.S when inspecting I can see the svg is generated under the paragraph. How and why??

found it

image