JSFiddle - React, Tailwind, and code Playground

HTML

<input style="display:none" type="checkbox" id="ctrl">
<label for="ctrl"></label>

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

label {
  display: block;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  animation: intro 0.5s forwards;
  
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/cover;
}

#ctrl:checked ~ label {
  animation: outro 0.5s forwards;
}

@keyframes intro {
  from { transform: rotate(0.25turn); }
  to { transform: rotate(0.75turn); }
}

@keyframes outro {
  from { transform: rotate(-0.25turn); }
  to { transform: rotate(0.25turn); }
}