DEMO #1

External SVG, Colored using CSS

Here, coloring is applied using CSS that targets the SVG 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.

This HTML Embed is Here
Containing the CSS STYLE block.
( uncolored )
#FFDD40
#8F21C6
#47CF73

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
  • Paste in the filter CSS from the tool

02 Tips and best practices

  • Your base SVG should be solid black
  • Ideally, place the CSS STYLE code in your site HEAD, or page HEAD

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.

‍