Discussion on: The secret that the fonts industry doesn't want you to know

[Mikhail Panichev]

I hate icon fonts and use this technique either with SVG sprites (symbols) and icon components.

You could also use sizing in em to reach similar experience as with icon fonts, or just for better flexibility. It's also great that you can override color and size just using CSS.

[Rémy 🤖]

Interesting, how do you manage your SVG sprites?

And yes indeed, in that case the em sizing would have been more appropriate, thanks for spotting.

[Mikhail Panichev]

Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in <symbol> tags in hidden <svg> with viewBox property and use currentColor where necessary.

In the end, I have something like this:

<svg style="display: none" xmlns="..." otherReqiuredAttrs="...">
  <symbol id="icon-user" veiwBox="0 0 20 20" fill="currentColor" storke="none">
    <!-- content of SVG from graphic editor -->
    <path d="..." fill="none" stroke="currentColor" />
  </symbol>
</svg>

<!-- Use an icon -->
<button class="button">
  <svg class="icon">
    <use xlink:href="#icon-user" />
  </svg>
  Login
</button>

For .icon you can use something like this

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  pointer-events: none;
  stroke-width: 0;
  stroke: currentColor;
  vertical-align: middle;

  &[height],
  &[width] {
    height: auto;
    width: auto;
  }
}