SVG icons · Web Dev 3 · Learn the Web

SVG icons

SVG symbols

Just like Illustrator there can be symbols in SVG
We can create a symbol library—a sprite sheet
And use the symbols many times in our website

Makes for a great icon sets

Using SVG for icons

Icons can be at the top of the HTML
or
Icons can be in a separate file

A separate file is usually better for performance & maintenance because it can be shared, edited and reused.

HTML

<!-- At the top of the HTML -->
<svg hidden>
  <symbol id="the-circle" viewBox="0 0 48 48">
    <circle cx="24" cy="24" r="22" fill="tomato" />
  </symbol>
  <symbol id="the-triangle" viewBox="0 0 48 48">
    <polygon points="24,2 46,46 2,46" fill="yellowgreen" />
  </symbol>
</svg>

<!-- Further down the HTML -->
<i class="icon i-128">
  <svg><use xlink:href="#the-triangle"></use></svg>
</i>

<i class="icon i-128">
  <svg><use xlink:href="#the-circle"></use></svg>
</i>

<i class="icon i-24">
  <svg><use xlink:href="#the-triangle"></use></svg>
</i>

HTML: Line B

We can paste the sprite sheet into the top of our HTML—notice how there is nothing inside the sprite sheet except <symbol> objects.

HTML: Line C

Each symbol must have two pieces of information:

An id—this is how we call to the icon and display it
A viewBox—each <symbol> requires a unique viewBox, but the surrounding <svg> tag does not

HTML: Line M

We can then import an SVG symbol into another <svg> graphic with the <use> tag. The xlink:href points to the id of the <symbol> we want to display.

HTML

<!-- Icons in a separate sprite sheet -->
<i class="icon i-96">
  <svg><use xlink:href="images/icons.svg#the-circle"></use></svg>
</i>

<i class="icon i-128">
  <svg><use xlink:href="images/icons.svg#the-triangle"></use></svg>
</i>

<i class="icon i-48">
  <svg><use xlink:href="images/icons.svg#the-circle"></use></svg>
</i>

HTML

<!-- No `fill` attributes in the symbol -->
<svg hidden>
  <symbol id="the-circle" viewBox="0 0 48 48">
    <circle cx="24" cy="24" r="22" />
  </symbol>
</svg>

<i class="icon i-128">
  <svg><use xlink:href="#the-circle"></use></svg>
</i>

CSS

.icon {
  color: tomato;
  transition: all .25s linear;
}
.icon:hover {
  color: orange;
}

HTML: Line D

If we completely remove the fill from a symbol we can control its colour in the CSS.

To remove the fill set it to absolute black in Illustrator, #000000, then when exported it’ll get automatically removed.

CSS: Lines B–C

We can add the color attribute (assuming we’ve included modules.css) to adjust the fill of the SVG symbol. Without modules.css we’d have to specify fill directly.

And, of course, transitions work perfectly well too.

Why color works instead of fill?

We can use color instead of fill when modules.css is included because it has a little snippet of code to allow it.

svg {
  fill: currentColor;
}

This snipped of code changes the fill to be the value of the current color

SVG symbols

Using SVG for icons

Videos & tutorials