<div>
  <svg viewBox="0 0 512 512" width="100" title="arrow-alt-circle-right">
    <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z" />
  </svg>
  <svg viewBox="0 0 512 512" width="100" title="arrow-alt-circle-right">
    <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z" />
  </svg>
</div>

<svg height="0" width="0">

  <filter id='shadow' color-interpolation-filters="sRGB">
    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.5" />
  </filter>

</svg>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  place-items: center;
  background: #eee;
}

svg {
  margin: 2rem;
}

div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
div:nth-child(1) {
  background: #2196f3;
  svg {
    fill: #90caf9;
    &:hover,
    &:nth-child(2) {
      filter: url(#shadow);
    }
  }
}