Use SVG for Icons

There’s no reason not to use SVG for icons:

  1. .logo {
  2.   background: url("logo.svg");
  3. }

SVG scales well for all resolution types and is supported in all browsers back to IE9. Ditch your .png, .jpg, or .gif-jif-whatev files.

Note: If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:

  1. .no-svg .icon-only::after {
  2.   content: attr(aria-label);
  3. }