Images

Use SVG for icons

When adding icons to your page, use SVG icons where possible or in some cases, unicode characters.

In this guide

TL;DR

Use SVG or unicode for icons instead of raster images.

Replace simple icons with unicode

Many fonts include support for the myriad of unicode glyphs, which can be used instead of images. Unlike images, unicode fonts scale well, and look good no matter matter how small or large they appear on screen.

Beyond the normal character set, unicode may include symbols for number forms (⅐), arrows (←), math operators (√), geometric shapes (★), control pictures (▶), braille patterns (⠏), music notation (♬), Greek letters (Ω), even chess pieces (♞).

Including a unicode character is done in the same way named entities are: &#XXXX , where XXXX represents the unicode character number. For example:

You're a super &#9733;

You’re a super ★

Replace complex icons with SVG

For more complex icon requirements, SVG icons are generally lightweight, easy to use and can be styled with CSS. SVG have a number of advantages over raster images:

They’re vector graphics that can be infinitely scaled.
CSS effects such as color, shadowing, transparency and animations are straightforward.
SVG images can be inlined right in the document.
They are semantic.
Provide better accessibility with the appropriate attributes.

                              
                                    With SVG icons, you can either add icons using inline SVG, like
    this checkmark:
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           width="32" height="32" viewBox="0 0 32 32">
        <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
      </svg>
    or by using an image tag, like this credit card icon:
    <img src="credit.svg">.
    
                               View full sample

Use icon fonts with caution

Icon fonts are popular, and can be easy to use, but have some drawbacks compared to SVG icons.

They’re vector graphics that can be infinitely scaled, but may be anti-aliased resulting in icons that aren’t as sharp as expected.
Limited styling with CSS.
Pixel perfect positioning can be difficult, depending on line-height, letter spacing, etc.
Are not semantic, and can be difficult to use with screen readers or other assistive technology.
Unless properly scoped, can result in a large file size for only using a small subset of the icons available.

                              
                                    With Font Awesome, you can either add icons by using a unicode
    entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
    or by adding special classes to an &lt;i&gt; element like the CSS3
    logo (<i class="fa fa-css3"></i>).
    
                               View full sample

There are hundreds of free and paid icon fonts available including Font Awesome , Pictos and Glyphicons .

Be sure to balance the weight of the additional HTTP request and file size with the need for the icons. For example, if you only need a handful of icons, it may be better to use an image or an image sprite.