Guía · SVG

Cómo cambiar el color de un icono SVG: 3 métodos

28 de agosto de 2026 · SVG · 5 min de lectura

Te has descargado un pack de iconos, encaja con lo que necesitabas, pero vienen en un color que no es el tuyo. La buena noticia es que un SVG no es una imagen cerrada como un PNG: es texto. Puedes abrirlo con el Bloc de notas y leer las instrucciones de dibujo, incluido el color.

Eso significa que recolorearlo no requiere Illustrator ni Photoshop. Aquí van los tres métodos que uso, del más directo al más flexible, con el código de cada uno. Al final está lo que hacer cuando el icono tiene varios colores, que es el caso que suele atascar a la gente.

1. Cambiar el color a mano

El más directo, y el que conviene si solo vas a usar el icono en un sitio. Abre el archivo con cualquier editor de texto —el Bloc de notas vale— y busca el atributo fill. Verás un valor hexadecimal como fill="#050000": ese es el color del dibujo. Sustitúyelo por el tuyo, guarda, y listo.

<svg viewBox="0 0 512 512" fill="#8b7bff">
  <path d="…" />
</svg>

Si el icono no trae ningún fill, el navegador lo pinta en negro por defecto; en ese caso no hay que sustituir nada, sino añadir el atributo a la etiqueta <svg>. Y si no tienes claro qué color poner, el generador de paletas te da armonías completas con su código hexadecimal y la comprobación de contraste, para que el icono siga leyéndose sobre tu fondo.

2. Que el icono herede el color del texto

Este es el truco más práctico para una web, y el que más tiempo ahorra a la larga. En lugar de un color fijo, pon la palabra clave currentColor y pega el SVG en línea dentro de tu HTML. El icono adoptará automáticamente el color del texto que lo rodea:

<p style="color: #8b7bff">
  <svg viewBox="0 0 512 512" fill="currentColor" width="24" height="24" aria-hidden="true">
    <path d="…" />
  </svg>
  Descargar
</p>

La gracia es que funciona solo cuando cambias de contexto. Un icono dentro de un botón azul se vuelve azul; el mismo icono en un aviso rojo se vuelve rojo; y al alternar entre tema claro y oscuro se ajusta sin que escribas una línea más. Es exactamente lo que hacen los iconos de las muestras en los packs de este sitio.

La condición es que el SVG esté pegado en línea en el HTML. Si lo insertas con <img src="icono.svg">, el navegador lo trata como una imagen cerrada: ni currentColor ni tu CSS pueden entrar a modificarlo. Esa es la causa número uno de "no me funciona el truco".

3. Colorear desde el CSS, sin tocar el archivo

Si prefieres dejar el SVG como archivo suelto —más limpio si tienes muchos— y controlar el color desde la hoja de estilos, úsalo como máscara. El navegador pinta el fondo del elemento y recorta la silueta del icono encima:

.icono {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #35d6c8;
  -webkit-mask: url("iconos/descargar.svg") center / contain no-repeat;
  mask: url("iconos/descargar.svg") center / contain no-repeat;
}

La ventaja es el mantenimiento: cambias el color de todos los iconos de tu sitio tocando una sola línea, sin volver a abrir un solo archivo. Y como el color es una propiedad CSS normal, puedes animarlo, cambiarlo al pasar el ratón o vincularlo a una variable de tu tema. Si además quieres degradados, sombras o filtros sobre esos iconos, en Código web tienes generadores visuales que te dan el CSS hecho.

Cuando el icono tiene varios colores

Los tres métodos de arriba dan por hecho que el icono es una silueta de un solo color, que es como vienen los estilos de contorno y sólido. Los iconos de estilo plano son otra historia: cada forma trae su propio relleno definido, así que ni currentColor ni la máscara sirven —ambos aplican un color único a todo el dibujo.

Para esos, toca abrir el SVG con un editor de texto y sustituir los valores hexadecimales uno a uno. Suelen estar agrupados en un bloque <style> al principio del archivo, lo que hace el cambio más llevadero de lo que parece. Un aviso: si vas a incrustar varios iconos planos en la misma página, insértalos como <img> en vez de en línea, o las clases internas de unos pisarán las de otros y verás colores cruzados.

Consejo: antes de subir iconos a tu web, pásalos por un optimizador. Los SVG suelen arrastrar metadatos invisibles del programa con el que se dibujaron, y a menudo pesan más que el propio dibujo. El optimizador de Lienzo se los quita sin que el archivo salga de tu equipo.

Cuál de los tres usar

• Un icono suelto, un color fijo: edítalo a mano. No merece la pena montar nada más.
• Iconos dentro de texto, botones o menús: currentColor en línea. Es el que menos mantenimiento pide.
• Muchos iconos como archivos sueltos: máscara CSS. Un solo sitio donde cambiar el color de todos.
• Iconos multicolor: a mano, sobre el bloque <style> del archivo.

Preguntas frecuentes

¿Por qué mi icono SVG se ve negro y no cambia de color?

Suele haber dos causas. La primera es que el archivo no declara ningún relleno: sin un fill, el navegador lo pinta en negro por defecto, y basta con añadir fill="currentColor" a la etiqueta <svg>. La segunda es que lo has insertado con una etiqueta <img>: así el SVG se comporta como una imagen cerrada y ni el CSS ni currentColor pueden entrar. Para poder recolorearlo, pégalo en línea dentro del HTML o úsalo como máscara CSS.

¿Puedo cambiar el color de un SVG sin abrir el archivo?

Sí, usándolo como máscara CSS. Declaras el color como background del elemento y aplicas el SVG en la propiedad mask: el navegador pinta el fondo y recorta la silueta del icono. El archivo se queda intacto, y cambias el color de todos los iconos del sitio tocando una sola línea de CSS.

¿Y si el icono tiene varios colores?

Los iconos de estilo plano traen un color propio en cada forma, así que no responden a currentColor ni a la máscara, que solo sirven para siluetas de un color. Para esos hay que abrir el SVG con un editor de texto y sustituir los valores hexadecimales uno a uno, normalmente en el bloque <style> del principio del archivo. Si vas a incrustar varios iconos planos en la misma página, insértalos como <img> en lugar de en línea para que sus clases internas no choquen entre sí.

¿Sirve esto con iconos de cualquier sitio?

Sí, siempre que sean SVG de verdad y no un PNG con la extensión cambiada. Ábrelo con un editor de texto: si ves etiquetas y atributos legibles, es un SVG y los tres métodos funcionan. Ten en cuenta que las condiciones de uso las fija quien creó cada archivo, así que compruébalas antes de llevar un icono ajeno a un encargo comercial.