facebook.svg

linkedin.svg

menu.html

  <ul class="social__list">
    <li class="social__item social__linkedin">
      <div class="social__svg-wrapper">
        <svg class="social__svg logo-svg" viewBox="0 0 24 28">
          <use xlink:href="images/linkedin.svg#logo" transform="scale(0.6),translate(8,8)"></use>
          <a xlink:href="/" target="_top">
            <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
          </a>
        </svg>
      </div>
      <a class="social__link" href="#" rel="external">LinkedIn</a>
    </li>
    <li class="social__item social__facebook">
      <div class="social__svg-wrapper">
        <svg class="social__svg logo-svg" viewBox="0 0 16 28">
          <use xlink:href="images/facebook.svg#logo" transform="scale(0.6),translate(4,10)"></use>
          <a xlink:href="/" target="_top">
            <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
          </a>
        </svg>
      </div>
      <a class="social__link" href="#" rel="external">Facebook</a>
    </li>
    <li class="social__item social__twitter">
      <div class="social__svg-wrapper">
        <svg class="social__svg logo-svg" viewBox="0 0 26 28">
          <use xlink:href="images/twitter.svg#logo" transform="scale(0.6),translate(9,9)"></use>
          <a xlink:href="/" target="_top">
            <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
          </a>
        </svg>
      </div>
      <a class="social__link" href="#" rel="external">Twitter</a>
    </li>
  </ul>

style.scss

.social {

}
.social__list {

}
.social__item {
  color: $c-black-light;
  display: inline-block;
}
.social__svg-wrapper {
  background: $c-white;
  border-radius: 100%;
  height: 30px;
  // padding: 6px;
  width: 30px;
}
.social__svg {
  height: 100%;
  width: 100%;
}
.social__link {
}
.social__linkedin:hover {
  color: #0976b4;
}
.social__facebook:hover {
  color: #3b5998;
}
.social__twitter .social__svg-wrapper:hover {
  background-color: #55ACEE;
}

twitter.svg