<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-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 4: Linked Icon, with static text</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>
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.