SVG icons using Style Palette colors

Good evening!
Pasting in SVG code into an Embed item will help you to use resolution-flexible graphics in your designs. We can all appreciate the power of vector graphics.
Here’s an easy way to add SVGs to your designs that don’t need the help of CMS Colors but can be colored and sized using the Style palette.

  1. Insert an Embed element in your design, preferably in a place where text color has already been defined

  2. Paste in your SVG code

  3. Inside the Embed code, look for the fill attribute declaration and replace the #'d color with a word called currentColor (case important)

  4. Click Save & Close

It will inherit any colors from its container or as directly defined by you using the Style palette.
Boom!:boom:
image

Here is the SVG arrow icon showing hovers obeying the Nav item’s hover state colors:
image

Enjoy!

36 Likes

Luke, that is so cool :slight_smile: So, so cool! Thanks a ton! How did you figure that out?

1 Like

Well, first you’ll have to remove the standard dropdown arrow, then you’ll have to position the SVG, and note that this will only work in dropdown parts of the nav, not the other navlinks in the nav, unless you create your own from scratch, because regular navlinks are links, and down allow embeds inside them. Again, if you create your navbar from scratch this will be less of an issue.
As far as the trick using currentColor, this has been out there awhile for SVGs, but it is the crux of this trick. There is likely a larger discussion about SVGs vs ICONfonts, but…

Also, there is a lot to discuss about refining your SVGs to only include info that it needs, allowing much more flexibility, but, well… that’s the beauty of learning web design and coding HTML. :wink: Always learning!

2 Likes

SUPER SUPER COOL! Thanks for sharing! :slight_smile:

1 Like

Brilliant - is there any way that you’re aware of to make currentColor work in SVG’s that have been saved as files, uploaded to Assets, and then referenced via Image element?

I’m looking to avoid the Embed element if possible, primarily to support SVG use inside of a Link Block.

So far I’ve tried editing the SVG to use fill=“currentColor”, using SVG-embedded CSS, and removing the fill attribute entirely. In all cases, the SVG uploads ok, but shows as black in both the Asset viewer and in the Image.

3 Likes

That is B R I L L I A N T !! Updating the colors of all the SVG icons every time I’m tweaking the colors or reusing icons in other projects is time consuming!

1 Like

Unfortunately no. When an SVG already in the design assets is used, it is referenced as a file link and not inline. In my experience the currentcolor only works when the SVG is inline. Also, you are correct in that an embed isn’t allowed inside an anchor tag, so for use inside Webflow this trick has limited usefulness.

Thanks Lux-

I’ve added a wishlist item on making an SVG-specific Element as an alternative to Image. If you have any suggested edits, let me know.
https://wishlist.webflow.com/ideas/WEBFLOW-I-1528

3 Likes

Thank you, @memetican Mike.
That is a great addition.

What’s interesting is that there are icons currently included within the available Add blocks for navigation and ecommerce that contain inline SVGs. Perhaps we’ll gain more control over “icons” in the future for this.

I’m thinking out loud, that most humans don’t understand the concept behind SVGs, but that certainly a web designer (with code experience) would know. However, not all Webflow Designers have coding experience (@PixelGeek has addressed this occasionally in his Youtube streams), which is what makes Webflow so great. It’s likely safe to say that a Webflow Designer that also has coding experience would understand SVGs, though.
I’m generalizing here, but the more Webflow creates easy patterns to solutions, the further away we travel from the wild customization that Webflow provides. Stock templates and icon solutions like Font Awesome create homogeneity in design. …further, homogeneity in design creates recognizible patterns in UX. So it’s a constant trade off between usefulness and the freshness/innovation of design.

Despite all my ramblings, I’m hoping for a feature upgrade to icons/SVGs, et al.

2 Likes

I think we share a lot of similar thinking in this.

From the perspective of most web designers, the big practical advantages of SVGs are their small file size, their infinite scaleability, and their support for CSS color inheritance.

If Webflow can make that accessible, and offer e.g. path selection support - this would give designers a lot of power without the need for technical understanding. They wouldn’t even need to see XML.

Supporting libraries is a wholly different thing… for example I don’t see any need for Webflow to license FontAwesome and integrate it as a library into the platform. It clearly has some advantages, but Webflow’s strength is in enabling designers, not in standardizing designs.

1 Like

Hum, anybody have an idea on how I can use this svg-code embed into a button or link block? Webflow do not allow embed elements inside buttons or link blocks unfortunately…

This would be great if possible, as I then could also change the color of the svg icon inside the button when setting button states!

Is it possible to set up a script in an embed element “simulating” a button element, with the same functionality as an default Webflow button og link block element?

That’s cool thanks!:grinning:

1 Like

Hey, indeed this is very cool! I just figured this out… and may i add that is even becomes more powerfull if you use dynamic fields in the embed. So users can set the icon color in the CMS for example.

But i agree with @Christoffer that is would be very nice if we could add an embed inside a link block. A workaround right now might be too overlay the embed with a link block. Using z-index in the “postion” options.

3 Likes

@jarnom Yep! that will work!

@Lux - I literally signed up for the forum just to say thank you. I knew there had to be a way to use SVGs more flexibly. Never even considered the embed… Brilliant. Thanks so much for sharing your lessons.

J

1 Like

Absolutely, Jason. Cheers!
Also, WELCOME!

Works great, even with hover colour and transition colour fade.

However, that doesn’t seem to work any more when I want to add a link to an SVG icon that way:

I cannot drag the Embed element into a Link Block element. So, I apply the link within the Embed code. BUT then the colour’s overwritten by the global “All links” colour. This is different from what I need for these icons. Is there any work around?

1 Like

can you give me the svg code?

This is a whole new level of customization, as you can also call a dynamic color element from a cms/product info.

– I love you so much @Lux, so much.

2 Likes

@The_One_Who_Animates the code isn’t like a password :joy:, sharing the code of our svg won’t do any good to you it’s what’s going to “draw” your element on the page, so it will be considerably different based on what design elements you want on your page.

To make an svg you need to use vector tools like illustrator or sketch.

Export your file in svg, and open it in a text document… Taddaaaaa! Here is your code.