<h1>IE7+ Fallback Inline SVG icons using background images </h1>
<div class="svg-defs">
  <symbol id="svg-ok" viewBox="-20 -20 40 40">
    <title>SVG OK</title>
    <circle fill="limegreen" r="19" />
    <path stroke="forestgreen" fill="none" stroke-width="6"
          d="M-12,3 L-3,10 11,-12" />
    <text dy="0.35em" text-anchor="middle" font-weight="bold"
          font-size="18px" font-family="sans-serif"
<p>Somewhere in the text...
<svg class="icon">
  <a class="svg-status"></a>
  <use xlink:href="#svg-ok" />
...there is an icon</p>
.svg-defs {
  position: absolute;
  height: 0; width: 0;
  overflow: hidden;
svg.icon {
  display: inline-block;
  height: 2em;
  width: 2em;
p {
  font-size: 125%;

/* fallback styles */
.icon a, 
.icon + a { 
  /* The first selector is for Android, the second for IE.
     The sibling selector is because old IE won't treat
     an unrecognized element as a container.
  display: inline;
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  background-position: center;
  background-color: #AAF;  
    /* color is not required, it is included 
       so you can see the size of the element
       if the image does not load */
.icon .svg-status,
.icon + .svg-status{
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/svg-no-24x24.png');

External CSS

  1. https://codepen.io/AmeliaBR/pen/607cb7712555f8d347794ffd3835672d.css

External JavaScript

This Pen doesn't use any external JavaScript resources.