Streaming live at 10am (PST)

SVG icons using Style Palette colors


#1

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!


#2

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


#3

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!


#4

SUPER SUPER COOL! Thanks for sharing! :slight_smile:


#5


#6

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.


#7

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!


#8

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.


#9

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


#10

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.


#11

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.