Softonic

Constructor de iconos SVG

x-init="restore()" >
Paso 1 / 2
Siguiente

Crea un icono SVG sencillo sin enviar tu diseño a ningún sitio. Elige uno de doce símbolos incluidos y ajusta el tamaño de salida, el grosor y color del trazo, el relleno, el color de fondo y el radio de las esquinas. El archivo final usa un viewBox fijo de 24×24; puedes copiar su código SVG o descargarlo como archivo SVG.

Crea un icono en cuatro pasos

  1. 1

    Elige un símbolo

    Escoge corazón, estrella, marca de verificación, cruz, círculo, cuadrado, triángulo, flecha, rayo, luna, sol o campana. Son diseños fijos, no un lienzo de dibujo libre.

  2. 2

    Define el tamaño de salida

    Elige anchura y altura entre 32 y 256 px. El SVG conserva su viewBox interno de 24×24 aunque cambien sus dimensiones.

  3. 3

    Da estilo al icono

    Ajusta el trazo entre 0,5 y 6, elige su color, selecciona sin relleno, currentColor o el color del trazo, y define el fondo y su radio.

  4. 4

    Copia o descarga

    Copia el código SVG generado al portapapeles o descarga el archivo. La descarga usa el nombre del símbolo elegido, por ejemplo heart.svg.

Qué crea esta herramienta

La exportación contiene un SVG de 24×24, un rectángulo de fondo y un icono predefinido. Sirve para obtener un símbolo coherente para una maqueta, una interfaz pequeña o un prototipo. No importa ilustraciones, no edita puntos de trazado, no añade texto ni crea iconos personalizados a partir de una instrucción.

Opciones de relleno

Elige Ninguno para un contorno. currentColor hace que el relleno siga la propiedad CSS color del elemento padre cuando usas el SVG en línea. Color del trazo aplica el mismo color al contorno y al relleno. El rectángulo de fondo siempre forma parte del SVG exportado.

Uso en un proyecto

Pega el código copiado en HTML o en un componente que admita SVG en línea. El archivo descargado funciona como recurso de imagen. Si el símbolo es decorativo, ocúltalo de la tecnología asistiva en tu proyecto. Si comunica una acción o estado, añade un nombre accesible, por ejemplo un <title> o una etiqueta en el control que lo contiene.

Privacidad y almacenamiento

El icono se genera en el navegador. Sus ajustes no se envían a nuestro servidor. En la versión de dos pasos, la configuración se guarda en el almacenamiento de sesión de esta pestaña para mostrar el resultado; al empezar de nuevo se borra.

Preguntas frecuentes

No. Esta herramienta da estilo a doce símbolos incluidos. Usa un editor de trazados SVG si necesitas dibujar o editar comandos de trazado.

No. Todas las exportaciones usan un viewBox de 24×24. Solo puedes cambiar la anchura y altura de salida entre 32 y 256 px.

La herramienta siempre incluye un rectángulo de fondo. Elige su color y radio antes de descargar o edita el SVG después si tu proyecto necesita transparencia.

No. El SVG se genera en el navegador y los ajustes no se envían a nuestro servidor. El flujo guiado los conserva solo durante la sesión de esta pestaña hasta que empieces de nuevo o termine la sesión.

Herramientas relacionadas

Selector de Color de Material Design

Explora la paleta de colores de Material Design. Copia cualquier tono (50 a A700) como HEX, RGB o HSL con un toque.

Convertir foto en dibujo

Convierte fotos JPEG, PNG o WebP en dibujos de grafito, lápiz suave o carboncillo en el navegador y exporta el resultado como PNG o JPEG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

Convertidor de Pantone a HEX

Convierte colores Pantone PMS a los valores HEX, RGB y CMYK más cercanos para la coincidencia en pantalla e impresión, con vista previa de muestra.

Generador de papel rayado

Crea papel rayado imprimible gratis. Elige pauta universitaria, ancha o estrecha, ajusta el interlineado en mm, el tamaño de página y una línea de margen, e imprime o descarga el SVG.

Creador de banderas

Diseña una bandera personalizada sencilla 3:2 en tu navegador con seis composiciones, colores, texto y un símbolo. Descarga SVG o PNG, o abre el cuadro de impresión del navegador.

Herramienta disponible en otros idiomas