Editor de Íconos SVG
Sobre esta herramienta
Ajusta el color de relleno, el color y grosor del trazo, y el tamaño de un ícono en formato SVG (gráficos vectoriales escalables, el formato estándar de iconografía moderna en la web por su nitidez en cualquier tamaño y su peso ligero), con una vista previa en vivo de los cambios antes de descargar el resultado o copiar el código actualizado. Es útil para adaptar rápidamente un ícono descargado de un banco de iconos gratuito a los colores exactos de tu marca o proyecto, sin necesidad de abrir un editor vectorial completo como Illustrator o Figma para un ajuste tan puntual. Todo el proceso ocurre en tu navegador.
Preguntas frecuentes
¿Qué puedo cambiar de un ícono SVG?
El color de relleno, el color y el grosor del trazo y el tamaño en píxeles. Ves el resultado en vivo y puedes copiar el código SVG actualizado.
¿Funciona con los íconos de contorno (Lucide, Feather)?
Sí: los elementos con fill="none" conservan el relleno vacío, así que un ícono de contorno sigue siéndolo y solo cambia el color y el grosor del trazo. Los elementos con relleno (íconos sólidos) sí reciben el nuevo color de relleno.
¿Qué pasa si pongo grosor de trazo 0?
No se toca el trazo del ícono: se respeta el que ya tenga. Para quitarlo, edita el código SVG directamente.
¿Por qué mi SVG no se carga?
El código debe ser un SVG válido, con la etiqueta <svg> y bien cerrado. Si el XML tiene errores, la herramienta muestra un aviso. Copia el código completo del archivo .svg, incluyendo la etiqueta de apertura.
¿Cambia el tamaño sin pixelarse?
Sí: el SVG es vectorial, y la herramienta cambia sus atributos width y height sin tocar el viewBox, así que se ve nítido a cualquier tamaño.
Herramientas relacionadas
Generador de Iconos SVG Básicos
Genera formas SVG simples (círculo, estrella, corazón...) personalizables
LocalOptimizador de SVG
Reduce el peso de un archivo SVG eliminando código innecesario
LocalPaleta de Colores
Genera paletas complementarias, análogas y triádicas desde un color
LocalGenerador de Degradados
Crea degradados CSS personalizados y copia el código
LocalExtractor de Colores de Imagen
Obtén la paleta de colores dominantes de cualquier imagen
LocalVerificador de Contraste de Color (WCAG)
Verifica si dos colores cumplen los estándares de accesibilidad WCAG