Hi,
I was wondering if there is a way to set colors for SVG files uploaded in Webflow.
That would be useful for custom made icons, graphics, product silhouettes, etc.
Thanks
1 Like
You can use āCurrentColorā as a colour in your svg code and then use embeds to insert them. Then you will use font color to edit svg colour.
Like so:
5 Likes
Thanks.
Looks a bit tricky thoughā¦
Why? Iāve been doing this for years without issues.
I mean, I am not a pro webdesigner so at first, that looks tricky.
I will dig into this to see how I can implement it easily.
Thanks
2 Likes
Hi,
Sorry for being silent for a whileā¦
How do you change the .svg code to put the āCurrentColorā property ? I am on mac if its something worth to knowā¦
You should use embeds anyway, uploading svg and using them as images wonāt give you an ability to change colour.
svgās are editable with any text editing app.
Yes, I will use embeds.
I am tried to make the process but sadly my file has too much lines of codes to be supported by Webflow. Need to find a way to reduce the amount of codeā¦
Ah yes, thatās a bummer. You can try using this service to optimize and slim down your svgās.
1 Like
Thanks !
Iāve managed to go to the embed process. That works fine !
Although my file has way too many characters on the code so I need to find a way to simplify it.
When I embed the .svg file, I have huge blank margins around my logo. Is it coming from my file or the way the embedding works ?
(you can see the logo miss some details as I had to remove some of the code to make it work)
You could use IconJar https://geticonjar.com/
IconJar is a library for your icons/vector things and it allows to drag and drop them to other design app, such as Webflow. And you can also recolor the svg before dragging them, even when they have multiple colors.
1 Like
Thanks for the advice. In that case, I need to use a custom made logo. But still relevant to remember.
also as an fyiā¦ iconset is a free alternative to iconjar. it also has an option for built in optimization when you import your svg. this makes it really easy to just copy the svg code from iconset and paste into the embed. you would still have to manually add the āfill: currentColorā declaration though. hopefully at some point iconset will include that as an option as well.
2 Likes
Looks broken now, canāt change color with the font color although it worked beforeā¦
Any idea ?
Is there anything additional to ācurrentColorā to use here? Maybe background colorā¦? Looking to extend this method for SVGs with 2 colors 
yeah you can use the Webflow Effects > filters
Its not accurate - basically eyeballing while moving the values of the hue saturation, brightness, contrast effects - but if for some reason you cant or dont want to use embeds to properly change the colour in the svg this is an alternative!
kind regards
john leigh - London UK Webflow fan
Sorry to re-open this thread guys but Iām looking to do something similar (I think) and Iām definitely stuck.
Iām looking to have an SVG logo/header on my page that uses the colour set in the CMS as itās colour. Basically each project on my site will have a colour, and I want the logo to adapt to the colour of the project.
Firstly; is this possible? I assume thatās what current colour is, no?
Secondly; how do I go about implementing this? Iām not a web developer, so I was lost on this thread as soon as people started talking about embeds instead of uploads. Talk to me like Iām a 10 year old!
Many thanks,
Chris
You could also just paste the entire tag with its vector details into an embed and use CSS-Fill to manipulate the color. That way you handle the Embed itself as a Div-Container and it contains the SVG, which at the same time gives it its color propertys.
Would look something like this:
<svg vectorstuff, you know what i mean></svg.>
<style.>
.class-name-of-your-element-embed-goes-here {
fill: red;
}
</style.>
(the dots in the tags are just so that its displayed in here, webflow excludes codesnippets)
if you now want to change the background color of the āembed divā the svg is located in, you simply change the background-color in the webflow-design panel of that specific embed container.
We summarise: The SVG color is controlled over the CSS-Property fill, which you write directly into the embed that contains the tag.
The background-color is controlled over the design-panel for that embed-container.
Happy designing
Hey, I donāt know much about code. Can you please a little more detailed on how to do this? Thank you so much!
Hey I just happened to stumble upon this thread. If you are looking to dynamically change an SVG color based on the CMS item/color set you can do the following:
- Place an embed element inside your collection where you want the SVG item to display.
- Copy the SVG as code - If you are working in Figma you can right click on the graphic or logo and click ācopy svgā. Then in the Webflow embed paste that little code snippet. Here is a video that helps with this: How to Change SVG Icon Colors in Webflow - YouTube
- The last section of that code has a little fill color property with a hex value (#FFFFFF). Get rid of that value and click the purple āadd fieldā button on the top right. Make sure to keep the surrounding āā.
- Make sure you have a hex value/color set for each CMS item, name it something like logo color, choose that option when clicking the purple button and then each one should dynamically update to match what you have set.
Good luck!
4 Likes