Multicolor Web Icons with SVG and CSS

All of our icons are available as colorizable multicolor web icons. With this breakthrough technology all colors, even color gradients and shaded colors, can be adjusted with simple CSS.

Colorizing with CSS can be used for all Iconfu icons. Furthermore it can be combined with the styling capabilities of Iconfu, which allows applying custom or predefined styles to colors. Each color of the style can be adjusted through CSS, as you can see in the gradient and shading examples in the table above.

Filling the glaring gap in web design

In modern web design the style for each element on a website is specified in CSS. This makes the style reusable, maintainable and allows a well defined workflow for web designers.

Multicolor icons never fit into this workflow, because there was no easy technical solution to set their colors with CSS. If a web designer used multicolor icons, each color change required cumbersome reediting in a graphics editor (or text editor for SVG). Simply adjusting the colors in CSS, as it is done with all other elements, was generally not possible.

For this reason single color icons have been all the rage for the last few years. Icon fonts were a great choice for this, because they are cross browser, styleable, scalable, and fit seamlessly into the workflow. But of course they have one major weakness: they are limited to a single color.

Iconfu has overcome this weakness with the development of CSS Colorizable SVGs. Finally there is a cross-browser, easy to use solution available for multicolor web icons that can be colorized and styled like any other element on a website.

Full cross browser support!

CSS Colorizable SVGs are available immediately and work on all major browsers like Chrome, Firefox, Opera, Safari, Edge and even on Internet Explorer 11.

How can I use CSS Colorizable Icons?

CSS Colorizable SVGs are available to all our customers with a premium account. If you own a premium account, using CSS Colorizable SVGs is very easy.

After downloading the icons as SVG from Iconfu with the option "Colorizable with CSS" selected, it only takes two steps to colorize them:

  1. Place the SVGs "inline" into your website. This can be done through SVG injection with our free and open source SVG injector on GitHub

  2. Set the colors with CSS. This is done with a simple CSS rule set, one rule per color.

A detailed description on how to use the CSS Colorizable SVGs can be found here.

Here is a very simple, but full example of a html file that displays a colorized SVG:

    <!-- Load SVG injector (  -->
    <script src="svg-inject.js"></script>
      #shop-icon {
        width: 128px;
        height: 128px;
      /* CSS to set colors for shop icon. */
      #shop-icon .color-1 { color: #42c8ba; }
      #shop-icon .color-2 { color: #bee84e; }
      #shop-icon .color-3 { color: #ff6b6b; }
      #shop-icon .color-4 { color: #f7f8ed; }
    <!-- Display image shop.svg. The onload part makes the SVG
        styleable by injecting it inline into the DOM -->
    <img id="shop-icon" src="shop.svg" onload="SVGInject(this)" />

Why should you use CSS colorizable SVGs?

There is a wide range of applications where CSS Colorizable SVGs either creates new possibilities for web design or improves the design process.

  • Theming: Use the same icons on websites with different color themes. Just as the other parts of the website, the colors will be set by an external CSS.

  • Prototyping: During the prototyping process, color changes occur frequently. With CSS colorizable SVGs these changes can be tested inside the browser with the browser's development tools and then set in the CSS.

  • Custiomization: Allow users to select their own colors, for example on avatar icons.

  • Dark mode: With CSS colorizable SVGs you can use the same icon files for light and dark mode and keep the colors in the CSS.

  • Status indication: Display a status by setting different colors on an icons, for example green for "ok", red for "error".

Can I see some live examples?

Sure! We set up an example page that contains a bunch of hopefully impressive examples.