O'Reilly logo

Practical SVG by Chris Coyier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3. Building an Icon System

WE’VE BEEN USING ICONS on websites since the dawn of...websites. Styles come and go, but the functionality of icons is here to stay. They aid in quick visual differentiation and assist in conveying meaning—even across languages and cultures.

Take a look at a fairly simple page on GitHub.com (FIG 3.1).

All told, nearly two dozen icons there.

We could make each of those icons an image, like icon_pencil.svg, and use them in our HTML like this:

<li>
  <a href="">
    <img src="icons/icon_pencil.svg">

That works. There is nothing inherently wrong with using img. But it does mean that each unique image is a separate network request. That is, when a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required