SVG icons using Style Palette colors

You can, just hold alt when adding the embed.

3 Likes

Thank you! :slight_smile:
That’s very helpful

1 Like

Wonderful!!! This is a game changer for making an accessible template with Font Awesome

2 Likes

This is awesome! Thank you for sharing this tip.

Can anyone comment on editing your SVG information so that it fits within the 1000 char embed limit? Some of my SVG’s are very detailed, and I’m wondering how to clean up the code.

Thank you again :slight_smile:

2 Likes

Try this service.

Thanks so much @Lux Luke, that currentColor tip is fantastic!!!

1 Like

Hi Guys, Thanks for this information, it’s awesome.

I have two issues with the SVG, the first one is that none of the ones I have include the “Fill” tag in the text, I’m downloading the SVG from Flaticon’s page, I’ve tried with about 20 and none of them have it.

The second problem is with the size, I can not adjust the size from styles, just change the values of width and height and does nothing. I tried to change the values directly in the code and it works, I don’t know if this is the right procedure or I’m doing something wrong.

Thanks for the help…

The fill is an attribute you can add to an SVG. It’s just like putting inline CSS in HTML. SVG is a format just like any other code. Some parts you can remove, some you can’t, and vis versa with adding in code.

In fact, you can put additional styles inside an SVG like this:

<svg>
  <style>
    rule { attribute: value; }
  </style>
</svg>
1 Like

Hi Luke, I’m checking the link you sent me, Thank you so much, I really appreciate your help.

1 Like

I’ve done this before and it’s such a time saver. However, today I pasted code that is too long to be used. It’s a super simple one-color icon. What I can I do now?

Three options I can think of-

  1. z-ordering, which I personally avoid.
  2. put your button element code itself in the embed as well, wrapping the SVG
  3. separate the button and the embed, and then use jQuery to move the embed into the button after page load

@memetican It’s now possible to put an embed element inside a link blocks in Webflow, problem solved! :smiley:

I just found this amazing SVG image coloring tool https://codepen.io/sosuke/pen/Pjoqqp. Just paste the desired HEX color and then you will get the filter values, which you then insert under Filters in Webflow. Just make sure the filter values are sorted from top (start) down (last).