DEMO #2

External SVG, Colored using Filter Effects

Here, coloring is applied using Filter Effects on the image element.

  • Supports SVG files that are stored in your site assets  
  • Uses CSS Filter effects to color your black SVGs to any color you want
  • No more SVG paths or HTML embeds. No more SVG file size issues.
  • CSS Filters are widely supported by all major browsers.
View this site in the Webflow designer

All of these images are the same SVG file, which you can find under assets.

( uncolored )
#FFDD40
#8F21C6
#225FBA

How to implement

Use the Video link in the top menu for a complete walkthrough.

01 The basic process

Find a black colored SVG you want to use.

Add it to your Webflow site...

  • Import it into to your site assets.
  • Create an Image element on your canvas, and link the SVG.
  • Assign a Class Selector to your Image element

Determine your CSS Filter Settings

  • Choose the color you want your SVG to be, and get the RGB HEX value.
  • Determine your filter settings using this tool.

Add your CSS to your Site

  • Use your Image element's Class Selector as the CSS selector
  • Use the CSS filter style to configure your Filter effect in the designer
  • Use that Class Selector on any black element you want - text or image, to color it to your desired color.

02 Tips and best practices

  • Your base SVG should be solid black
  • Make sure your filter settings are applied in the correct order in the designer, or you will get a different effect

03 Finding your SVG icon

I personally like flaticon, where every icon is available as SVG. Here are 3 of the best black-icon style groups.

‍