<div class='icon'>
  <svg viewBox="0 0 13.229166 13.229168">
  <g id="background">
  <path style="stroke:none;stroke-width:0;"
    d="M 1.3238244,1.3206035 C 2.6094684,0.03495953 4.797315,-0.00231247 6.61549,-0.00231247 c 1.818175,0 4.006023,0.03727 5.291667,1.32291597 1.285644,1.285644 1.322916,3.473493 1.322916,5.291668 0,1.818175 -0.03727,4.0060235 -1.322916,5.2916675 -1.285644,1.285644 -3.473492,1.322917 -5.291667,1.322917 -1.818175,0 -4.0060216,-0.03727 -5.2916656,-1.322917 C 0.03818041,10.618295 9.0741371e-4,8.4304465 9.0741371e-4,6.6122715 c 0,-1.818176 0.0372699963,-4.006024 1.32291698629,-5.291668 z"
    />
  </g>
</svg>
<span class='symbol fa fa-facebook' />
</div>

body {
  background-image: url(https://habrastorage.org/webt/ns/gx/n9/nsgxn9oq1d9szod1bzd26khcviy.jpeg);
  background-size: 100%
}

div.icon {
  margin: auto;
  width: 64px;
  height: 64px;
}

div.icon svg {
  fill: hsla(240,100%,40%,.4);
  transition: fill 0.7s;
}

div.icon:hover svg  {
  fill: hsla(240,100%,40%,.8);
  transition: fill 0.7s;
}

div.icon span {
  font-size: 48px;
  color: hsla(0,100%,100%,.4);
  position: relative;
  top: -60px;
  left: 16px;
  transition: color 0.7s;
}

div.icon:hover span {
  color: hsla(0,100%,100%,.8);
  transition: color 0.7s;
}