Icon font with multi-color SVG icons

Question

We are trying to create an icon font for our custom multi-color icons. Icomoon worked like a charm for our UI icons (mono-color) but with multi-color icons, multiple lines are required to use an icon (look at the example below). Is there any way to achieve a similar behavior as the mono-colors but for multi-color SVG icons?

ex

mono-color icon:

<span class="icon-name">

multi-color icon:

<span class="icon-name">
   <span class="path1">
  <span class="path2"> 
  <span class="path3">  
  <span class="path4">
  <span class="path5">
  <span class="path6">
  <span class="path7">
  <span class="path8">
</span>

Answer 1

If I understand that correctly, you are struggling with colouring svgs.

The svg code can contain a fill element (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle for reference).

Moreover, you could try to change the color by using CSS (color property).

Answer 2

If you need to use an icon font (instead of inlined svgs) you can't circumvent placing multiple glyphs/elements for each color.

To some extend you might achieve a multicolored text display with Opentype SVG fonts.
Unfortunately browser support is quite limited:

• Photoshop, version CC 2017 and above
• Illustrator
• Firefox, version 32 and above
• Microsoft Edge, Windows 10 Anniversary Edition and above
• In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs

Besides converting svgs to such a font file will require more sophisticated font editors or at least more experience in font file generating/editing.

So using icon svgs directly is certainly more straightforward.

You can achieve a quite font-like behaviour e.g by:

• combining multiple icons in a single svg using <defs> or <symbol>
• using keyword based fill properties like "currentColor" to color icons via text color
• using css-variables to define reusable color themes

Example: inlined svg icons

let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
  iconInserts.forEach(function (iconSpan) {
    let iconName = iconSpan.getAttribute("data-icon");
    let symbolHref = "#" + iconName;
    let iconDef = iconDefs.querySelector(symbolHref);
    let viewBox = iconDef.getAttribute("viewBox");
    // insert
    let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    iconSVG.classList.add("svg-inline");
    iconSVG.setAttribute("viewBox", viewBox);
    let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
    iconSVG.appendChild(iconUse);
    iconSpan.appendChild(iconSVG);
    iconUse.setAttribute("href", symbolHref);
    iconUse.classList.add(iconName);
  });
}

body{
  font-size:15vmin;
}
.svg-inline{
  display:inline-block;
  height:1em;
  transform:translateY(20%);
}

.theme1{
  --col1:green;
  --col2:pink;
  --col3:purple;
  --col4:orange;
  --col5:lime;
  --col6:cyan;
  --col7:#444;
}

.theme2{
  --col1:green;
  --col2:green;
  --col3:green;
  --col4:orange;
  --col5:orange;
  --col6:orange;
  --col7:green;
}

.icon-news{
  --col1:green;
  --col2:pink;
  --col3:purple;
  --col4:orange;
  --col5:lime;
  --col6:cyan;
  --col7:#444;
}

<p>
  <svg class="svg-inline theme1" viewBox="0 0 1000 1000">
    <use href="#icon-news" />
  </svg>
Sample icon (colored by css vars)
  <svg class="svg-inline theme2" viewBox="0 0 1000 1000">
    <use href="#icon-news" />
  </svg>
Sample icon 2 (colored by css vars)
  <svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
    <use href="#icon-news2" />
  </svg>
Sample icon 3 (colored by currentColor)
  <span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)

</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
  <symbol id="icon-news" viewBox="0 0 1000 1000">
    <path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
    <path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
    <path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
    <path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
    <path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
    <path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
    <path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
  </symbol>

  <symbol id="icon-news2" viewBox="0 0 1000 1000">
    <path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
    <path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
  </symbol>
</svg>

You might also write a simple icon insertion script injecting placeholder span elements by svg instances (4. example)

<span class="icon-insert" data-icon="icon-news"></span>

could be replaced by something like this:

<span class="icon-insert" data-icon="icon-news">
   <svg class="svg-inline" viewBox="0 0 1000 1000">
      <use href="#icon-news" class="icon-news" />
    </svg>
</span>

Some icon libraries also provide a similar js based injection approach (e.g feather icons)

See also: css-tricks: Inline SVG vs Icon Fonts [CAGEMATCH]