Social Media Icons, SVG

index.html

<div id="page-footer" class="flex-center">

  <!-- Facebook Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="24" viewBox="0 0 11 24" class="icon" id="icon-facebook">
    <a xlink:href="http://www.facebook.com/Unitymedia" target="facebook">
      <path fill-rule="evenodd" d="M2.378 4.648v3.304H0v4.04h2.378V24h4.884V11.993h3.277s.305-1.937.454-4.056H7.28V5.175c0-.413.533-.97 1.06-.97H11V0H7.382C2.257 0 2.378 4.044 2.378 4.648z"/>
   </a>
  </svg>

  <!-- Google+ Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29" height="22" viewBox="0 0 29 22" class="icon" id="icon-google">
    <a xlink:href="http://www.youtube.com/user/UnitymediaChannel" target="youtube">
      <!-- Invisible circle to catch click events. -->
      <circle cx="94.5" cy="30.5" r="10.5" fill="white" stroke="#FFF" transform="translate(-83 -19)" opacity="0"/>
      <path fill-rule="evenodd" d="M22.19 9.775H11.836v3.418h6.318c-.942 2.97-3.745 5.126-7.057 5.126-4.086 0-7.397-3.28-7.397-7.327S7.01 3.67 11.096 3.67c2.057 0 3.918.83 5.258 2.174L18.86 3.15c-2-1.94-4.74-3.14-7.764-3.14C4.968.01 0 4.93 0 10.997 0 17.062 4.968 21.98 11.096 21.98c5.367 0 10.067-3.773 11.095-8.787V9.775zm6.726-.005h-2.118v-2.1h-1.816v2.1h-2.118v1.797h2.118v2.097h1.816v-2.097h2.118"/> 
    </a>
  </svg>


  <!-- Twitter Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="22" viewBox="0 0 27 22" class="icon" id="icon-twitter">
    <a xlink:href="http://twitter.com/Unitymedia" target="twitter">
      <path fill="#666" fill-rule="evenodd" d="M23.818 3.48c1.144-.688 2.023-1.777 2.436-3.074-1.07.637-2.256 1.1-3.517 1.348C21.727.674 20.287 0 18.693 0c-3.06 0-5.54 2.487-5.54 5.554 0 .435.05.86.144 1.266C8.693 6.588 4.612 4.377 1.88 1.017c-.477.82-.75 1.774-.75 2.792 0 1.923.978 3.623 2.464 4.62-.908-.03-1.762-.28-2.51-.696v.07c0 2.69 1.91 4.935 4.444 5.446-.465.127-.954.195-1.46.195-.356 0-.703-.035-1.042-.1.705 2.207 2.75 3.813 5.175 3.858-1.892 1.49-4.28 2.377-6.88 2.377-.443 0-.884-.025-1.32-.076C2.45 21.08 5.366 22 8.49 22c10.19 0 15.762-8.463 15.762-15.802 0-.24-.006-.48-.016-.72 1.082-.782 2.02-1.76 2.764-2.874-.993.442-2.06.74-3.182.875z"/>
  </a>
</svg>

  <!-- Youtube Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="30" viewBox="0 0 25 30" class="icon" id="icon-youtube">
    <a xlink:href="http://www.youtube.com/user/UnitymediaChannel" target="youtube">
    <!-- Invisible square to catch click events. -->
    <path fill="#FFF" stroke="#FFF" d="M190.5 1.5h30v30h-30z" transform="translate(-190 -1)" opacity="0"/>
  <path fill="#666" fill-rule="evenodd" d="M21.146 21.944H19.5l.008-.956c0-.425.35-.773.775-.773h.105c.427 0 .777.348.777.773l-.02.956zm-6.175-2.05c-.41 0-.75.28-.75.625v4.65c0 .34.34.62.76.62s.76-.28.76-.63v-4.65c0-.35-.34-.63-.76-.63zm10.03-2.6v8.847c0 2.13-1.84 3.86-4.09 3.86H4.09C1.84 30 0 28.27 0 26.14v-8.847c0-2.122 1.84-3.86 4.09-3.86h16.82c2.25 0 4.09 1.738 4.09 3.86zM5.22 27.1v-9.32H7.3V16.4l-5.56-.01v1.358l1.735.005V27.1h1.74zm6.25-7.932H9.73v4.977c0 .72.045 1.08-.002 1.207-.14.386-.773.796-1.02.04-.043-.13-.006-.53-.007-1.213v-5.01H6.96l.004 4.93c.003.75-.015 1.32.008 1.57.042.45.027.98.447 1.28.78.56 2.28-.09 2.65-.89v1.03h1.39v-7.93zm5.56 5.7l-.002-4.143c0-1.58-1.182-2.524-2.785-1.247l.007-3.08-1.734.003-.007 10.63 1.42-.02.13-.66c1.82 1.68 2.97.53 2.97-1.48zm5.442-.55l-1.305.007-.002.176v.73c0 .39-.32.71-.71.71h-.257c-.393 0-.715-.31-.715-.7v-1.91h2.987V22.2c0-.82-.02-1.64-.088-2.11-.215-1.486-2.3-1.72-3.35-.96-.33.235-.584.553-.73.98-.15.427-.22 1.01-.22 1.75v2.47c0 4.106 4.986 3.526 4.39-.006zm-6.687-13.41c.09.22.23.395.418.53.188.13.427.196.71.196.254 0 .476-.068.67-.207.192-.14.354-.348.487-.625l-.03.682h1.936v-8.24h-1.53V9.66c0 .347-.285.632-.635.632-.34 0-.63-.285-.63-.632V3.247h-1.59v5.558c0 .708.01 1.18.04 1.42.02.237.08.465.17.686zM9.91 6.258c0-.79.066-1.41.197-1.854.132-.444.37-.8.712-1.07.34-.27.78-.405 1.31-.405.44 0 .83.08 1.15.26.32.17.57.39.74.67.17.28.29.56.36.86.06.29.09.74.09 1.35v2.08c0 .76-.03 1.32-.09 1.68s-.188.69-.38 1c-.198.3-.448.54-.75.68-.306.15-.656.22-1.05.22-.44 0-.81-.06-1.12-.19-.306-.13-.54-.32-.71-.57-.17-.26-.29-.57-.367-.93-.073-.36-.107-.904-.107-1.627V6.25zm1.517 3.273c0 .47.348.85.77.85.424 0 .77-.38.77-.85V5.15c0-.466-.346-.847-.77-.847-.422 0-.77.38-.77.847v4.38zM6.06 11.75h1.83V5.43L10.05.01h-2L6.904 4.033 5.738 0H3.76l2.298 5.428.003 6.317z"/>
    </a>
</svg>

  <!-- Unitymedia Blog Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="25" viewBox="0 0 57 25" class="icon" id="icon-unitymedia-blog">
      <a xlink:href="http://blog.unitymedia.de/" target="blogger">
  <g fill-rule="evenodd">
    <!-- Invisible circle to catch click events. -->
    <circle cx="94.5" cy="30.5" r="12" fill="white" stroke="#FFF" transform="translate(-83 -19)" opacity="0"/>
    <path d="M2.492 14.033c-.21-.768-.383-1.546-.512-2.332-.19-1.21-.29-2.55-.177-3.89.308-3.7 1.737-6.59 2.17-6.65.36-.05.29.75.26 1.83-.026 1.01-.03 2.22.056 3.24-1.95.72-2.4 4.85-1.8 7.82zm16.98 0c.6-2.96.154-7.095-1.796-7.812.087-1.01.082-2.22.054-3.23-.028-1.08-.098-1.88.262-1.83.433.06 1.862 2.95 2.17 6.65.112 1.34.013 2.68-.177 3.9-.13.79-.3 1.57-.512 2.34zM7.087 8.24c.053-.513.326-2.024.445-2.572C7.752 4.644 8.8 0 10.982 0S14.2 4.644 14.42 5.668c.117.548.39 2.06.444 2.57-1.135 2.726-1.816 5.68-1.99 6.346-.198-.274-.953-.98-1.892-.98-.938 0-1.71.706-1.905.98-.175-.665-.856-3.62-1.99-6.345zm-.5-.878c-.025-.037-.49-.706-.98-1.027.313-1.56 1.31-3.597 2.18-3.746-.46 1.22-.828 2.54-1.2 4.77zm9.762-1.027c-.49.32-.96.99-.98 1.027-.37-2.224-.74-3.547-1.2-4.773.87.14 1.86 2.18 2.18 3.74zm2.61 12.72c.92-.57 2.16-1.848 2.37-1.39.15.526-1.77 2.772-4.85 3.896 0 0-.21.08-.21.12 0 .04.13 0 .13 0 .44-.13 1.88-.69 2.25-.63.4.06.17.34-.21.67s-2.11 1.37-4.49 1.54c-.02.22-.86.97-2.96.97-2.11 0-2.94-.75-2.95-.96-2.39-.17-4.12-1.203-4.49-1.532-.38-.33-.61-.61-.21-.67.37-.05 1.81.5 2.25.64 0 0 .13.04.13-.003 0-.04-.22-.11-.22-.11C2.42 20.46.51 18.21.66 17.687c.2-.46 1.442.82 2.37 1.39 0 0 .082.052.084.02.002-.02-.104-.11-.104-.11C.65 17.08-.32 13.51.1 13.19c.22-.073.61.792 1.173 1.843.43.803.846 1.325.846 1.325s.03.05.06.043c.01 0-.02-.06-.02-.06C.45 12.83.26 10.34.2 9.2.07 6.63.53 6.505.716 7.34c.216.972.472 2.22.66 3.45.52 3.395 1.975 6.776 3.126 8.62.173.268.317.25.353.197.03-.044.01-.105-.095-.3-3.314-6.123-1.905-12.29.055-12.36 1.88-.067 3.677 7.343 3.888 8.155-1.27 2.166-1.57 5.168-1.48 5.926.008.063.06.113.125.114.072.003.132-.054.134-.125 0-1.38 1.05-6.642 3.516-6.642 2.467 0 3.516 5.26 3.516 6.64v.002c.002.07.062.128.134.125.065 0 .117-.05.125-.114.09-.758-.21-3.76-1.48-5.926.21-.812 2.008-8.222 3.888-8.155 1.96.07 3.37 6.237.06 12.36-.1.195-.12.256-.09.3.04.052.18.07.36-.197 1.15-1.844 2.61-5.225 3.13-8.62.19-1.23.45-2.478.66-3.45.19-.835.65-.71.52 1.86-.06 1.14-.25 3.623-1.953 7.145 0 0-.03.054-.01.06.02.006.056-.043.056-.043s.414-.522.845-1.325c.563-1.05.95-1.916 1.173-1.843.41.32-.55 3.89-2.93 5.773 0 0-.105.086-.103.105 0 .036.086-.018.086-.018z"/>
    <text font-family="bloomspeak,Arial,Helvetica,sans-serif" font-weight:"bolder" font-size="16" transform="translate(0 3)">
      <tspan x="25" y="15">Blog</tspan>
    </text>
  </g>
      </a>
</svg>

</div>

social-media-icons-svg.markdown

Social Media Icons, SVG

Social Media Icons as SVG.

A Pen by Oliver Schafeld on CodePen.

License.

style.css

body {
  background: linear-gradient(90deg, #169c48, #26689d);
}
#page-footer {
  background-color: rgba(255,255,255,.6);
  padding: 1.1em 1em 1em;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.flex-center {
  display: flex;
  justify-content: center;
}
#icon-facebook,
#icon-google, 
#icon-twitter, 
#icon-youtube, 
#icon-unitymedia-blog g
{
  fill: #666;
  opacity: .6;
  margin-right: 3em;
}
svg.icon:not(:last-child) {
  margin-right: 3em; 
}

svg.icon:hover path,
svg.icon:hover g text {
  fill: white;
}

The logos are of course copyright protected by their respective owners and can only be used according to the copyright holder's license.
In layman's terms: It is usually permitted to link to their websites using their logos. :)