<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cart" viewBox="0 0 16 16">
<title>cart</title>
<path class="path1" d="M6 14.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
<path class="path2" d="M16 14.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
<path class="path3" d="M16 8v-6h-12c0-0.552-0.448-1-1-1h-3v1h2l0.751 6.438c-0.458 0.367-0.751 0.93-0.751 1.562 0 1.105 0.895 2 2 2h12v-1h-12c-0.552 0-1-0.448-1-1 0-0.003 0-0.007 0-0.010l13-1.99z"></path>
</symbol>
<symbol id="icon-phone" viewBox="0 0 16 16">
<title>phone</title>
<path class="path1" d="M11.5 0h-7c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h7c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM6 0.75h4v0.5h-4v-0.5zM8 15c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM12 12h-8v-10h8v10z"></path>
</symbol>
<symbol id="icon-checkmark" viewBox="0 0 16 16">
<title>checkmark</title>
<path class="path1" d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"></path>
</symbol>
<symbol id="icon-codepen" viewBox="0 0 16 16">
<title>codepen</title>
<path class="path1" d="M14.777 5.751l-7-4.667c-0.168-0.112-0.387-0.112-0.555 0l-7 4.667c-0.139 0.093-0.223 0.249-0.223 0.416v4.667c0 0.167 0.084 0.323 0.223 0.416l7 4.667c0.084 0.056 0.181 0.084 0.277 0.084s0.193-0.028 0.277-0.084l7-4.667c0.139-0.093 0.223-0.249 0.223-0.416v-4.667c0-0.167-0.084-0.323-0.223-0.416zM7.5 10.232l-2.599-1.732 2.599-1.732 2.599 1.732-2.599 1.732zM8 5.899v-3.465l5.599 3.732-2.599 1.732-3-2zM7 5.899l-3 2-2.599-1.732 5.599-3.732v3.465zM3.099 8.5l-2.099 1.399v-2.798l2.099 1.399zM4 9.101l3 2v3.465l-5.599-3.732 2.599-1.732zM8 11.101l3-2 2.599 1.732-5.599 3.732v-3.465zM11.901 8.5l2.099-1.399v2.798l-2.099-1.399z"></path>
</symbol>
</defs>
</svg>

<p>Example 1: Standalone SVG Icon, Meaningful</p> 
<div class="icon">
   <svg aria-labelledby="mobileSupport" role="img"> 
    <title id="mobileSupport">Supports Mobile Devices</title>
    <use xlink:href="#icon-phone"></use>
  </svg> 
</div>


<p>Example 2: Standalone Icon, Decorative</p> 
<div class="icon success">
 <svg aria-hidden="true">
   <title>checkmark</title>
   <use xlink:href="#icon-checkmark"></use>
 </svg> 
 Success! Your order went through.
</div>


<p>Example 3: Linked Icon, no text</p> 
<div class="icon">
  <a href="link" aria-label="Go back to Picked Pens">
    <svg> 
      <use xlink:href="#icon-codepen"></use>
    </svg>
  </a>
</div>

<p>Example 4: Linked Icon, with text part 1</p> 
<div class="icon">
  <a href="link" aria-label="Go back to Picked Pens">
    <svg> 
      <use xlink:href="#icon-codepen"></use>
    </svg> CodePen
  </a>
</div>

<p>Example 5: Linked Icon, with text part 2</p>
<div class="icon">
    <a href="http://example.com" id="cart">
      <span id="itemsInCart">8</span>
      <span class="offscreen-text">items in your shopping cart</span>
      <svg aria-hidden="true">
      <use xlink:href="#icon-cart"></use>
    </svg>
  </a>
</div>
body{
  font-size: 30px;
  font-family: Helvetica, Arial;
  color: #444;
}
.icon{
	display: inline-block;
	margin:.5em;
  color: rebeccapurple;
  fill: rebeccapurple;
}
.icon svg {
	width: 1em;
	height: 1em;
}
a{
  color: blue;
  fill: blue;
  text-decoration: none;
  padding: 5px;
}
a:focus, a:hover{
  background: lightgray;
  outline: 3px solid blue; 
}
.success{
  color: green;
  fill: green;
}
#cart{
  position: relative;
}
#itemsInCart{
  font-size: .5em;
  padding: 0 2px;
  font-weight: bold;
  border: .2em solid lightgray;
  border-radius: 30%;
  background: lightgray;
  position: absolute;
  top: -10px;
  right: 2px;
}
.offscreen-text{
  position: absolute!important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  clip-path: polygon(0 0,0 0,0 0,0 0);
}

@media screen and (-ms-high-contrast: active) {
  .icon svg{
    fill: green;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
   .icon svg{
    fill: #333;
  }
}
@media screen and (-ms-high-contrast: white-on-black) {
 .icon svg{
    fill: #fff;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.