Cómo cambiar el color de un icono SVG al hacer hover

Si has intentado usar :hover para cambiar el color de un icono SVG y no pasa nada… mantén la calma, no estás solo.

A diferencia de otros elementos HTML, los SVG no responden al cambio de color como cabrías esperar. Para modificar el color del trazo o relleno de un SVG, necesitas usar la propiedad fill.

Solución simple y efectiva

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hover color en icono SVG - LinkedIn</title>
  <style>
    body {
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f3f3f3;
    }

    .uk-icon-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #333;
      font-size: 1.2rem;
      padding: 12px;
      transition: color 0.3s ease;
    }

    .uk-icon-link .icon {
      fill: currentColor;
      transition: fill 0.3s ease;
    }

    .uk-icon-link:hover {
      color: #0077b5; 
    }
  </style>
</head>
<body>

  <a href="https://www.linkedin.com/in/esther-maestre-53508368/" class="uk-icon-link" rel="noreferrer" target="_blank">
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M20.45 20.45h-3.55v-5.56c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.65h-3.55v-11.4h3.41v1.56h.05c.48-.91 1.65-1.87 3.4-1.87 3.63 0 4.3 2.39 4.3 5.5v6.21zM5.34 7.43c-1.14 0-2.06-.92-2.06-2.06s.92-2.06 2.06-2.06 2.06.92 2.06 2.06-.92 2.06-2.06 2.06zm1.78 13.02h-3.55v-11.4h3.55v11.4zM22.22 0h-20.44c-.98 0-1.78.8-1.78 1.78v20.44c0 .98.8 1.78 1.78 1.78h20.44c.98 0 1.78-.8 1.78-1.78v-20.44c0-.98-.8-1.78-1.78-1.78z"/>
    </svg>
  </a>

</body>
</html>

¿Qué está pasando aquí?

Le damos al SVG la clase icon.
Usamos fill: currentColor; para que el SVG herede el color del texto del enlace (a).
Luego, con :hover, cambiamos ese color heredado a un color específico (#0f86ff en este caso).

Importante si usas Elementor

Elementor te permite insertar SVGs y asignarles clases CSS, pero no cambiará su color al hacer hover a menos que uses fill.
El color del icono no cambiará con color: hover como en un texto normal.

Para lograrlo, sigue estos pasos:

Añade tu SVG con el widget HTML personalizado y añade las clases.

<a href="https://www.linkedin.com/in/esther-maestre-53508368/" class="uk-icon-link" rel="noreferrer" target="_blank">

 <svg class="icon" viewBox="0 0 24 24"> <path d="M20.45 20.45h-3.55v-5.56c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.65h-3.55v-11.4h3.41v1.56h.05c.48-.91 1.65-1.87 3.4-1.87 3.63 0 4.3 2.39 4.3 5.5v6.21zM5.34 7.43c-1.14 0-2.06-.92-2.06-2.06s.92-2.06 2.06-2.06 2.06.92 2.06 2.06-.92 2.06-2.06 2.06zm1.78 13.02h-3.55v-11.4h3.55v11.4zM22.22 0h-20.44c-.98 0-1.78.8-1.78 1.78v20.44c0 .98.8 1.78 1.78 1.78h20.44c.98 0 1.78-.8 1.78-1.78v-20.44c0-.98-.8-1.78-1.78-1.78z"/> 

</svg>

 </a>

En Apariencia → Personalizar → CSS adicional (o en el archivo style.css del tema hijo), pega este código:

.uk-icon-link .icon {
    fill: currentColor;
}

.uk-icon-link:hover .icon {
    fill: #0f86ff;
}

*Esto es solo para casos que quieres añadir un svg personalizado en un campo HTML, si utilizas los iconos svg por defecto de Elementor, lo podrás cambiar en el propio widget (icono) en el panel de Elementor sin problema.

¿Por qué `fill` y no `color`?

Los iconos SVG están formados por formas vectoriales (<path>, <circle>, <rect>, etc.) que no usan color, sino fill para el interior y stroke para los bordes.
Así que, si quieres cambiar el color de relleno de un icono SVG, ¡fill es la clave!

Resultado

Un icono SVG que cambia de color suavemente al pasar el cursor por encima, con un control total desde CSS y compatible con Elementor, WordPress o cualquier web HTML.

Puedes verlo en directo en este enlace.