How to Replace Relume Icons with Custom SVG in Nav Component 9 Dropdown?

·May 27, 2026 06:13 PM·

Need help with replacing the relume icons in the dropdown for nav component 9. I thought I could replace it by creating a 24x24 pixel SVG and then replacing this embed code with mine for my logo icon but it isn’t working. I’m referring to the icon-embed-small part of the dropdown list. What am i doing wrong? What is the best way to add my image to that dropdown.

11 comments

· Sorted by Oldest

Matt J.
·
·
JK For me personally, I would copy my SVG icon and select the icon wrapper div and paste it, then copy the class and paste that into the embed that gets created. Then delete the previous/default icon.
Matt J.
·
·
also note that because the SVG import feature no longer works (thanks Webflow) you'll want to swap out any hard coded colors to be currentColor if you've copied this icon from figma.
JK
·
·
I am able to do that with an icon from your relume icon library but it isn’t letting me do it with one I’m exporting from Illustrator of our client’s logo icon. It may be that the icon isn’t a solid color that I am trying to put there. Not sure. I can change the relume icon to something from your relume icon library tho with no problem. Also having trouble adding our clients logo SVG to the navbar. It will take PNG and it show up but an SVG won’t show up. I’m sure it is just user error.
Matt J.
·
·
JK mind sending me the SVG files you are trying to add?
JK
·
·
Matt J.
Matt J.
·
·
ah okay, yeah I would just use the image element and upload the assets that way for these. Unless you are trying to change the colors of these SVGs based on interactions or something?
JK
·
·
Matt J. Not trying to change color or anything. So just bring in as an image and that should work?
Matt J.
·
·
if you are trying to change the colors of these SVG images using some interaction, then you'll likely want to run them through an SVG optimizer like https://svgomg.net/ Especially if these assets were exported from any kind of Adobe product - they tend to bloat the SVG code a lot with unnecessary things, so after you run it through an optimizer, you could embed it but a code embed as a hard character count and with more complex images you tend to hit that pretty quickly.
Matt J.
·
·
yeah anytime I have an icon with more than 1 color, I'll export as SVG and then use the image element and upload into webflow assets to bring into the project.
JK
·
·
Matt J. Great. Thanks for the help!
Matt J.
·
·
no problem

How to Replace Relume Icons with Custom SVG in Nav Component 9 Dropdown? | Relume Community

Matt J.
·
·
JK For me personally, I would copy my SVG icon and select the icon wrapper div and paste it, then copy the class and paste that into the embed that gets created. Then delete the previous/default icon.
Matt J.
·
·
also note that because the SVG import feature no longer works (thanks Webflow) you'll want to swap out any hard coded colors to be currentColor if you've copied this icon from figma.
JK
·
·
I am able to do that with an icon from your relume icon library but it isn’t letting me do it with one I’m exporting from Illustrator of our client’s logo icon. It may be that the icon isn’t a solid color that I am trying to put there. Not sure. I can change the relume icon to something from your relume icon library tho with no problem. Also having trouble adding our clients logo SVG to the navbar. It will take PNG and it show up but an SVG won’t show up. I’m sure it is just user error.
Matt J.
·
·
JK mind sending me the SVG files you are trying to add?
JK
·
·
Matt J.
Matt J.
·
·
ah okay, yeah I would just use the image element and upload the assets that way for these. Unless you are trying to change the colors of these SVGs based on interactions or something?
JK
·
·
Matt J. Not trying to change color or anything. So just bring in as an image and that should work?
Matt J.
·
·
if you are trying to change the colors of these SVG images using some interaction, then you'll likely want to run them through an SVG optimizer like https://svgomg.net/ Especially if these assets were exported from any kind of Adobe product - they tend to bloat the SVG code a lot with unnecessary things, so after you run it through an optimizer, you could embed it but a code embed as a hard character count and with more complex images you tend to hit that pretty quickly.
Matt J.
·
·
yeah anytime I have an icon with more than 1 color, I'll export as SVG and then use the image element and upload into webflow assets to bring into the project.
JK
·
·
Matt J. Great. Thanks for the help!
Matt J.
·
·
no problem