<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-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>

</defs>
</svg>

<p>Example 1: Standalone SVG Icon, Meaningful</p> 
<div class="icon">
   <svg role="img"> 
    <title>Supports Mobile Devices</title>
    <use xlink:href="#icon-phone"></use>
  </svg> 
</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;
}

@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.