JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div class="twitter-icon">
  <svg viewBox="0 0 44 44">

      <clipPath id="border-circle-clip">
        <circle cx="22" cy="22" r="22" />
      </clipPath>
      <circle class="border-circle" cx="22" cy="22" r="22"/>

      <clipPath id="bird-clip">
        <path d="M30.5,16.8c0.9-0.6,1.6-1.5,1.9-2.5c-0.8,0.5-1.8,0.9-2.7,1.1c-0.8-0.9-1.9-1.4-3.1-1.4
          c-2.4,0-4.3,2-4.3,4.5c0,0.4,0,0.7,0.1,1c-3.6-0.2-6.8-2-8.9-4.7c-0.4,0.7-0.6,1.5-0.6,2.3c0,1.6,0.8,3,1.9,3.8
          c-0.7,0-1.4-0.2-2-0.6v0.1c0,2.2,1.5,4,3.5,4.5c-0.4,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.8-0.1c0.5,1.8,2.1,3.1,4,3.2
          C16.9,29.3,15,30,13,30c-0.3,0-0.7,0-1-0.1c1.9,1.3,4.2,2,6.6,2c7.9,0,12.3-6.9,12.3-12.9c0-0.2,0-0.4,0-0.6
          c0.8-0.6,1.6-1.4,2.1-2.4C32.2,16.5,31.4,16.7,30.5,16.8z" />
      </clipPath>
      <rect x="7" y="9" class="bird" width="31" height="28" />

  </svg>
</div>

CSS

.border-circle {
  clip-path:url(#border-circle-clip);
  fill: none;
  stroke:#55ACEE;
  stroke-width:4;
  stroke-miterlimit:10;
 }
.bird {
  clip-path: url(#bird-clip);
  fill: #55ACEE;
}

.twitter-icon {
  width: 44px;
  height: 44px;
  position: relative;
  cursor:pointer;
}

.twitter-icon:hover .bird {
  fill: #fff;
  transition: fill .3s;
}

.twitter-icon:hover .border-circle {
  stroke: #fff;
  transition: stroke .3s;
}

.twitter-icon:after {
  content: '';
  position: absolute;
  padding: 2px;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  top: -2px;
  left: -2px;
  z-index: -1;
  opacity: 0;
  transform: scale(1.3);
  background: #55acee;
  transition: transform .2s, opacity .3s;
}

.twitter-icon:hover:after {
  opacity: 1;
  transform: scale(1);
}