Community forum for knowledge and support

Updated 9 months ago

Relume icons not transforming svgs for webflow development

Has anyone notice that Relume Icons is not transforming SVGs into a friendly format for Webflow development? When I paste the SVG code it does not seem to do anything. I discovered this because some of my icons are not changing color after font color change. https://icons.relume.io/

M
S
S
29 comments

okay thanks for raising. We also have this built into our chrome extension now in theory you shouldn't need to do this here anymore.

Lets say you are in Figma, if you have an icon you want to bring in - if you right click copy > copy as svg go to webflow, and paste, a menu should show up automatically that lets you choose what size you want the icon and it should paste in the embed element with the icon ready to go.

Let me know if that process doesn't work though I've been using it all week long with no issues.

I know you are a seasoned vet of Webflow/Relume, so apologies if I've explained something you already knew - happy to dig in deeper if you've run into issues with the process above or if there is a use case I might be missing.

Thanks for getting back so quickly and no worries. I feel like a newbie everyday.

I'm going from Icons8 to Relume website, to Webflow

ah yeah all good, we're lifelong learners you know?

okay got it - and is icons8 opened like in Figma then or do they have SVG code

ah well that answers it

have you tried the SVG option? I'm thinking its something with the SVG Embed version

Sadly, Figma is not in my workflow yet. I tend to design in the browser.

I don't mind using SVG but I love to be able to change the color within Webflow.

oh yeah for sure, I'm just not familiar with icons8 and wondering what the svg option is - does it just download an svg file?

what is very odd to me is the html code that you have there in that screenshot, has no "fill" or "stroke" - which is what I am guessing that paste field is expecting in order to automatically convert it to "currentColor" - but that parameter doesn't even exist in that HTML embed that icons8 is spitting out

so its more of an issue with icons8 I think

Right, I bet it's being inconsistent with the code it delivers.

I should probably stick to the ones in Relume

yeah I just signed up but it locks the different formats behind a paywall which is fair but even in its preview of the code it has the fill in there but its still different than how figma produces it

if its a client requirement or something, one workaround would be to take the icons into figma free account, and right click to copy as svg and get the correct code that way, and just paste in webflow

Maybe I should go from icon8 to figma to webflow?

less than ideal of course, but its a feasible path forward

I'll take feasible over inconsistent.

So just "Copy as code" and it should work automagically since I have the Relume plugin?

ah sorry my arrow didn't show up in my screenshot - Copy as SVG

When I paste into webflow, it's not updating the color fill for me πŸ€”

where are you copying from?

Sorry I didnt' get back with you. It was Figma. But I must of changed something about my workflow because it seems to be working for me now!

Add a reply
Sign up and join the conversation on Slack