CodePen Embed - svg sprites examples


<!---use svg sprites inline in html as "use xlink"--> 

<svg width="20" height="20" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19" id="account_icon">
    <path  d="M9.5 9.5c-2.624 0-4.75-2.126-4.75-4.75S6.876 0 9.5 0a4.75 4.75 0 1 1 0 9.5zm0 2.375c5.248 0 9.5 2.138 9.5 4.75V19H0v-2.375c0-2.612 4.251-4.75 9.5-4.75z"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19" id="basket_icon">
    <path d="M14.25 1.949v2.436H19V19H0V4.385h4.75V0h9.5v1.949zM12 4V2H7v2h5z"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 19" id="wishlist_icon">
    <path d="M0 19V0h15v19l-7.5-4.33z"></path>
  </symbol>
</svg>

<!--direct svg's output --->

<svg class="icon">
  <use xlink:href="#account_icon"></use>
</svg>
<svg class="icon">
  <use xlink:href="#basket_icon"></use>
</svg>
<svg class="icon">
  <use xlink:href="#wishlist_icon"></use>
</svg>

<!--output svg sprites use external source -->
<div></div>

<svg class="icon icon2">
  <use xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' class='hidden'%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='account_icon'%3E%3Cpath d='M9.5 9.5c-2.624 0-4.75-2.126-4.75-4.75S6.876 0 9.5 0a4.75 4.75 0 1 1 0 9.5zm0 2.375c5.248 0 9.5 2.138 9.5 4.75V19H0v-2.375c0-2.612 4.251-4.75 9.5-4.75z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='basket_icon'%3E%3Cpath d='M14.25 1.949v2.436H19V19H0V4.385h4.75V0h9.5v1.949zM12 4V2H7v2h5z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19' id='wishlist_icon'%3E%3Cpath d='M0 19V0h15v19l-7.5-4.33z'%3E%3C/path%3E%3C/symbol%3E%3C/svg%3E#account_icon"></use>
</svg>
<svg class="icon icon3">
  <use xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' class='hidden'%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='account_icon'%3E%3Cpath d='M9.5 9.5c-2.624 0-4.75-2.126-4.75-4.75S6.876 0 9.5 0a4.75 4.75 0 1 1 0 9.5zm0 2.375c5.248 0 9.5 2.138 9.5 4.75V19H0v-2.375c0-2.612 4.251-4.75 9.5-4.75z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='basket_icon'%3E%3Cpath d='M14.25 1.949v2.436H19V19H0V4.385h4.75V0h9.5v1.949zM12 4V2H7v2h5z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19' id='wishlist_icon'%3E%3Cpath d='M0 19V0h15v19l-7.5-4.33z'%3E%3C/path%3E%3C/symbol%3E%3C/svg%3E#basket_icon"></use>
</svg>
<svg class="icon icon4">
  <use xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' class='hidden'%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='account_icon'%3E%3Cpath d='M9.5 9.5c-2.624 0-4.75-2.126-4.75-4.75S6.876 0 9.5 0a4.75 4.75 0 1 1 0 9.5zm0 2.375c5.248 0 9.5 2.138 9.5 4.75V19H0v-2.375c0-2.612 4.251-4.75 9.5-4.75z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' id='basket_icon'%3E%3Cpath d='M14.25 1.949v2.436H19V19H0V4.385h4.75V0h9.5v1.949zM12 4V2H7v2h5z'%3E%3C/path%3E%3C/symbol%3E%3Csymbol xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19' id='wishlist_icon'%3E%3Cpath d='M0 19V0h15v19l-7.5-4.33z'%3E%3C/path%3E%3C/symbol%3E%3C/svg%3E#wishlist_icon"></use>
</svg>

<!-- use svg sprites as background-images -->

<svg id="blue-icons" display="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="20px" height="60px" viewBox="0 0 20 60">
<g id="account"><view id="account_icon_blue" viewBox="0 60 20 20" />
  <path fill="#082754" d="M9.5,50.25c-2.624,0-4.75-2.128-4.75-4.753s2.126-4.752,4.75-4.752c2.623,0,4.75,2.127,4.75,4.752
    S12.123,50.25,9.5,50.25z M9.5,52.625c5.248,0,9.5,2.139,9.5,4.75v2.375H0v-2.375C0,54.764,4.251,52.625,9.5,52.625z"/>
</g>
<g id="basket"><view id="basket_icon_blue" viewBox="0 40 20 20" />
  <path fill="#082754" d="M14.25,22.263V24.7H19v14.618H0V24.7h4.75v-4.387h9.5V22.263z M12,24.315v-2.001H7v2.001H12z"/>
</g>
<g id="wishlist"><view id="wishlist_icon_blue" viewBox="0 20 20 20" />
  <path fill="#082754" stroke="#082754" d="M0.75,18.05V0.95h13.5v17.1L7.5,14.153L0.75,18.05z"/>
</g>
</svg>

<div class="content-icon content-icon-account">
  Your account
</div>

<div class="content-icon content-icon-wishlist">
  Add to wishlist
</div>

<div class="content-icon content-icon-basket">
  Add to cart
</div>

svg { 
  polygon, 
  path, 
  rect { 
    fill: inherit; 
  } 
}
  svg:target {
    display:inline;
  }
#account_icon {
  fill: red;
}
.icon2 {
  fill: blue;
}
.icon3 {
  fill: orange;
}
.icon4 {
  fill: none;
  stroke: #082754;
  stroke-width: 2px;
}
#basket_icon {
fill: black;
}
#wishlist_icon {
  fill: green;
}
.icon {
  width: 20px; 
  height: 20px;
  margin: .5em;
}
.content-icon {
  padding: 10px 10px;
  font-size: 18px;
}
.content-icon:after {
  content:'';
  display: inline-block;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='60px' viewBox='0 0 20 60'%3E%3Cg id='account'%3E%3Cview id='account_icon_blue' viewBox='0 60 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M9.5,50.25c-2.624,0-4.75-2.128-4.75-4.753s2.126-4.752,4.75-4.752c2.623,0,4.75,2.127,4.75,4.752 S12.123,50.25,9.5,50.25z M9.5,52.625c5.248,0,9.5,2.139,9.5,4.75v2.375H0v-2.375C0,54.764,4.251,52.625,9.5,52.625z'/%3E%3C/g%3E%3Cg id='basket'%3E%3Cview id='basket_icon_blue' viewBox='0 40 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M14.25,22.263V24.7H19v14.618H0V24.7h4.75v-4.387h9.5V22.263z M12,24.315v-2.001H7v2.001H12z'/%3E%3C/g%3E%3Cg id='wishlist'%3E%3Cview id='wishlist_icon_blue' viewBox='0 20 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M0.75,18.05V0.95h13.5v17.1L7.5,14.153L0.75,18.05z'/%3E%3C/g%3E%3C/svg%3E"); 
  background-repeat: no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-bottom: -4px;
}
.content-icon-wishlist:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='60px' viewBox='0 0 20 60'%3E%3Cg id='account'%3E%3Cview id='account_icon_blue' viewBox='0 60 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M9.5,50.25c-2.624,0-4.75-2.128-4.75-4.753s2.126-4.752,4.75-4.752c2.623,0,4.75,2.127,4.75,4.752 S12.123,50.25,9.5,50.25z M9.5,52.625c5.248,0,9.5,2.139,9.5,4.75v2.375H0v-2.375C0,54.764,4.251,52.625,9.5,52.625z'/%3E%3C/g%3E%3Cg id='basket'%3E%3Cview id='basket_icon_blue' viewBox='0 40 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M14.25,22.263V24.7H19v14.618H0V24.7h4.75v-4.387h9.5V22.263z M12,24.315v-2.001H7v2.001H12z'/%3E%3C/g%3E%3Cg id='wishlist'%3E%3Cview id='wishlist_icon_blue' viewBox='0 20 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M0.75,18.05V0.95h13.5v17.1L7.5,14.153L0.75,18.05z'/%3E%3C/g%3E%3C/svg%3E#wishlist_icon_blue");
}

.content-icon-account:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='60px' viewBox='0 0 20 60'%3E%3Cg id='account'%3E%3Cview id='account_icon_blue' viewBox='0 60 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M9.5,50.25c-2.624,0-4.75-2.128-4.75-4.753s2.126-4.752,4.75-4.752c2.623,0,4.75,2.127,4.75,4.752 S12.123,50.25,9.5,50.25z M9.5,52.625c5.248,0,9.5,2.139,9.5,4.75v2.375H0v-2.375C0,54.764,4.251,52.625,9.5,52.625z'/%3E%3C/g%3E%3Cg id='basket'%3E%3Cview id='basket_icon_blue' viewBox='0 40 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M14.25,22.263V24.7H19v14.618H0V24.7h4.75v-4.387h9.5V22.263z M12,24.315v-2.001H7v2.001H12z'/%3E%3C/g%3E%3Cg id='wishlist'%3E%3Cview id='wishlist_icon_blue' viewBox='0 20 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M0.75,18.05V0.95h13.5v17.1L7.5,14.153L0.75,18.05z'/%3E%3C/g%3E%3C/svg%3E#account_icon_blue");
}

.content-icon-basket:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='60px' viewBox='0 0 20 60'%3E%3Cg id='account'%3E%3Cview id='account_icon_blue' viewBox='0 60 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M9.5,50.25c-2.624,0-4.75-2.128-4.75-4.753s2.126-4.752,4.75-4.752c2.623,0,4.75,2.127,4.75,4.752 S12.123,50.25,9.5,50.25z M9.5,52.625c5.248,0,9.5,2.139,9.5,4.75v2.375H0v-2.375C0,54.764,4.251,52.625,9.5,52.625z'/%3E%3C/g%3E%3Cg id='basket'%3E%3Cview id='basket_icon_blue' viewBox='0 40 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M14.25,22.263V24.7H19v14.618H0V24.7h4.75v-4.387h9.5V22.263z M12,24.315v-2.001H7v2.001H12z'/%3E%3C/g%3E%3Cg id='wishlist'%3E%3Cview id='wishlist_icon_blue' viewBox='0 20 20 20'%3E%3C/view%3E%3Cpath fill='%23082754' d='M0.75,18.05V0.95h13.5v17.1L7.5,14.153L0.75,18.05z'/%3E%3C/g%3E%3C/svg%3E#basket_icon_blue");

This Pen is owned by lagudal on CodePen.

See more by @lagudal on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.