<div class="icon" content="✌"></div>

.icon {
  display: grid;
}

.icon:before,
.icon:after {
  content: attr(content);
  grid-row: 1;
  grid-column: 1;
  background-size: contain;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon:before {
  background-color: red;
  background-image: conic-gradient(red, blue, yellow, blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
  animation: ✌ 5s linear infinite alternate;
}

.icon:after {
  text-shadow: 0 0 0 rgba(0,0,0,.1), -1px -1px 0 white, -2px -2px 0 white, -3px -3px 0 white,  -2px -2px 0 white, 2px 2px 0 black;  
}

@keyframes ✌ {
  to {
    filter: blur(2px) hue-rotate(360deg);
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 15vw;
}