Ir al contenido
Etiquetas Sin Registro | 100% en tu Navegador

Generador de matrices de iconos SVG y badges

Síntesis paramétrica de iconos SVG con marcos squircle/hexagonales personalizados, degradados de varias paradas, badges de estado y exportación instantánea para frameworks.

100%
Anadir forma:

Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.

X: 12.0 | Y: 12.0 WCAG AAA | 17.4:1
Maps Moped - Material Icons iconFree Maps Moped vector icon from the Material Icons open-source icon library; outline style, Apache-2.0 licence, viewBox 0 0 24 24, 534 bytes.
Propiedades del vector: material-sharp-maps-maps-moped | Editar en el editor SVG 24x24 | 0.3 KB
Vista previa en vivo de tamaños:
16px
24px
32px
Interfaz oscura
icon-generator

Bandeja de sprites multi-icono

Fija varios iconos personalizados y compila una hoja de símbolos única.

Todavia no hay iconos fijados. Fija iconos para reunirlos en una sola hoja.

Prompt de IA y mejora vectorial

Genera prompts de IA o mejora el icono en el lienzo

Elige un ajuste, copia el prompt en tu herramienta de IA o mejora el icono en el lienzo.

Documentación técnica y guia de ingenieria

Generador de matrices de iconos SVG y badges

Síntesis paramétrica de iconos SVG con marcos squircle/hexagonales personalizados, degradados de varias paradas, badges de estado y exportación instantánea para frameworks.

Fuentes de entrada admitidas

Iconos vectoriales del catálogo, trazados SVG propios y plantillas geométricas

Destinos de exportación y compilación

SVG con iluminación 3D, insignias PNG/WebP 512/1024 px y prompts de IA estructurados

Impacto técnico y rendimiento

Genera insignias vectoriales nítidas de menos de 2 KB en lugar de imágenes pesadas

Cómo usar Generador de matrices de iconos SVG y badges

  1. 1

    Elige un icono base de la biblioteca o importa tu propio trazado SVG.

  2. 2

    Selecciona la forma de la insignia (squircle, cuadrado redondeado, círculo) y el borde.

  3. 3

    Aplica degradados e iluminación 3D y añade texto a la insignia si lo necesitas.

  4. 4

    Exporta el icono terminado en los tamaños deseados al instante.

Entrada de ejemplo

Trazado de icono de linterna con el texto de insignia «NEW»

Salida de ejemplo

PNG de 512 px con iluminación degradada junto con su SVG y fondo CSS

Limitaciones

  • Las métricas del texto dependen de la fuente elegida y pueden variar en tamaños pequeños.
  • Las exportaciones rasterizadas en este generador llegan hasta 1024 px por lado.
  • Se genera un diseño por ejecución; para hojas multi-icono usa el generador de sprites.
  • Los archivos SVG importados tienen un límite de 2 MB.

Los archivos que abres o pegas en este taller se procesan localmente en tu navegador. No se sube nada a un servidor.

Guías para esta herramienta

Escribe para buscar entre 76.166 iconos vectoriales...

Navegar | Enter para abrir Explorar todos los iconos

Comparar

Licencia Uso comercial Atribución Modificar o recolorear
MITPermitidoAviso en el paquetePermitido
ISCPermitidoAviso en el paquetePermitido
Apache-2.0PermitidoObligatorio con archivo de avisoPermitido
CC BY 4.0PermitidoCrédito obligatorioPermitido
CC-BY-SA-4.0PermitidoCompartir igualCompartir igual
Trademark / BrandSolo uso referencialGuias del duenoRestringido

Vista previa del icono