CodePen Embed - SVG Sprite Aten Post

<div class="svg--icons">
  <svg class="svg--icon icon--mail" viewBox="0 0 24 24">
    <use xlink:href="#icon--mail" />
  </svg>

  <svg class="svg--icon icon--phone" viewBox="0 0 24 24">
    <use xlink:href="#icon--phone" />
  </svg>

  <svg class="svg--icon icon--location" viewBox="0 0 24 24">
    <use xlink:href="#icon--location" />
  </svg>
</div>

<div class="attribution">Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a></div>

<div class="visually-hidden">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon--mail" viewBox="0 0 241.061 241.061">
      <path d="M198.602,70.402l-78.063,68.789l-78.08-68.79c-3.109-2.739-7.848-2.438-10.586,0.669c-2.737,3.108-2.439,7.847,0.67,10.586l83.039,73.159c1.417,1.248,3.188,1.872,4.958,1.872s3.542-0.624,4.959-1.873l83.022-73.159c3.107-2.738,3.406-7.478,0.668-10.586C206.449,67.964,201.711,67.664,198.602,70.402z"/>
      <path d="M218.561,38.529H22.5c-12.406,0-22.5,10.093-22.5,22.5v119.002c0,12.407,10.094,22.5,22.5,22.5h196.061c12.406,0,22.5-10.093,22.5-22.5V61.029C241.061,48.623,230.967,38.529,218.561,38.529z M226.061,180.031c0,4.135-3.364,7.5-7.5,7.5H22.5c-4.136,0-7.5-3.365-7.5-7.5V61.029c0-4.135,3.364-7.5,7.5-7.5h196.061c4.136,0,7.5,3.365,7.5,7.5V180.031z"/>
  </symbol>
  
  <symbol id="icon--phone" viewBox="0 0 211.621 211.621">
    <path d="M180.948,27.722C163.07,9.844,139.299-0.001,114.017,0c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5c21.276-0.001,41.279,8.284,56.324,23.329c15.046,15.045,23.331,35.049,23.33,56.326c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.499C208.672,69.371,198.827,45.6,180.948,27.722z"/>
    <path d="M150.096,94.656c0,4.142,3.358,7.5,7.501,7.499c4.142,0,7.499-3.358,7.499-7.5c-0.002-28.16-22.916-51.073-51.078-51.077c-0.001,0,0,0-0.001,0c-4.142,0-7.499,3.357-7.5,7.499c0,4.142,3.357,7.5,7.499,7.501C133.909,58.581,150.094,74.765,150.096,94.656z"/>
    <path d="M133.5,132.896c-11.432-0.592-17.256,7.91-20.049,11.994c-2.339,3.419-1.463,8.086,1.956,10.425c3.419,2.339,8.086,1.463,10.425-1.956c3.3-4.825,4.795-5.584,6.823-5.488c6.491,0.763,32.056,19.497,34.616,25.355c0.642,1.725,0.618,3.416-0.071,5.473c-2.684,7.966-7.127,13.564-12.851,16.188c-5.438,2.493-12.105,2.267-19.276-0.651c-26.777-10.914-50.171-26.145-69.531-45.271c-0.008-0.008-0.016-0.015-0.023-0.023c-19.086-19.341-34.289-42.705-45.185-69.441c-2.919-7.177-3.145-13.845-0.652-19.282c2.624-5.724,8.222-10.167,16.181-12.848c2.064-0.692,3.752-0.714,5.461-0.078c5.879,2.569,24.612,28.133,25.368,34.551c0.108,2.104-0.657,3.598-5.478,6.892c-3.42,2.336-4.299,7.003-1.962,10.423c2.336,3.42,7.002,4.298,10.423,1.962c4.086-2.79,12.586-8.598,11.996-20.069C81.021,69.07,57.713,37.339,46.576,33.244c-4.953-1.846-10.163-1.878-15.491-0.09C19.097,37.191,10.439,44.389,6.047,53.969c-4.26,9.294-4.125,20.077,0.395,31.189c11.661,28.612,27.976,53.647,48.491,74.412c0.05,0.051,0.101,0.101,0.153,0.15c20.75,20.477,45.756,36.762,74.33,48.409c5.722,2.327,11.357,3.492,16.746,3.492c5.074,0,9.932-1.032,14.438-3.098c9.581-4.391,16.778-13.048,20.818-25.044c1.784-5.318,1.755-10.526-0.077-15.456C177.232,156.856,145.501,133.548,133.5,132.896z"/>
    </symbol>
    
    <symbol id="icon--location" viewBox="0 0 217.109 217.109">
      <path d="M108.552,0C62.42,0,24.89,37.535,24.89,83.672c0,32.967,13.802,66.314,39.914,96.437c19.503,22.499,38.831,35.246,39.645,35.778c1.246,0.815,2.675,1.222,4.104,1.222c1.428,0,2.857-0.407,4.104-1.222c0.813-0.532,20.144-13.279,39.647-35.777c26.114-30.124,39.917-63.471,39.917-96.438C192.22,37.535,154.686,0,108.552,0z M108.552,200.4C93.165,188.934,39.89,144.806,39.89,83.672C39.89,45.806,70.691,15,108.552,15c37.864,0,68.668,30.806,68.668,68.672C177.22,144.806,123.94,188.934,108.552,200.4z"/>
      <path d="M108.557,50.449c-18.31,0-33.206,14.897-33.206,33.209c0,18.307,14.896,33.201,33.206,33.201c18.31,0,33.205-14.894,33.205-33.201C141.762,65.347,126.866,50.449,108.557,50.449z M108.557,101.859c-10.039,0-18.206-8.165-18.206-18.201c0-10.041,8.167-18.209,18.206-18.209c10.038,0,18.205,8.168,18.205,18.209C126.762,93.694,118.595,101.859,108.557,101.859z"/>
    </symbol>
  </svg>
</div>

.visually-hidden {
  display: none;
}

svg {
  fill: currentColor;
}

.svg--icons {
  float: left;
  padding: 15px 0;
}

.svg--icon {
  float: left;
  width: 40px;
  margin: 15px;
  transition: color .5s, transform .5s;
}

.svg--icon:hover {
  transform: scale(1.1);
}

.svg--icons .icon--mail {
  color: blue;
}

.svg--icons .icon--phone {
  color: green;
}

.svg--icons .icon--location {
  color: red;
}

.svg--icons svg.svg--icon:hover  {
  color: black;
}

.attribution {
  float: left;
  clear: left;
}

This Pen is owned by James Nettik on CodePen.

See more by @jnettik on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.