Aqui tem um exemplo. O ponto principal é animar um *pseudo-elemento* no `:hover` da `div` pai. Assim vc evita de rodar diretamente o pai e por seguinte o filho também. Além disso no `interection-count` do `animation` vc coloca o valor de `3` para girar apenas 3x e depois parar. Para dar o aspecto de spin de load basta vc colocar uma das bordas com a cor transparente, eu usei `border-bottom-color: transparent;` para dar esse efeito.

[![inserir a descrição da imagem aqui][1]][1]

Segue o código da imagem acima.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 48px;
      height: 48px;
    }
    .icon::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 5px solid #000;
      border-radius: 50%;
    }
    .icon:hover::after {
      animation: gira 500ms linear;
      animation-iteration-count: 3;
    }
    @keyframes gira {
      0% {
        transform: rotate(0deg);
        border-bottom-color: transparent;
      }
      100% {
        border-bottom-color: transparent;
        transform: rotate(360deg);
      }
    }

      


<!-- language: lang-html -->

    <div class="icon">
      <img src="https://placecage.com/24/24">
    </div>

<!-- end snippet -->


  [1]: https://i.sstatic.net/aXBlo.gif