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

Vector Studio y espacio de trabajo de iconos 3D

Estudio interactivo en el navegador para personalizar trazados SVG, degradados de varias paradas, iluminación volumétrica 3D, animaciones de movimiento y exportación de código para varios 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
Repeat - Bootstrap Icons iconFree Repeat vector icon from the Bootstrap Icons open-source icon library; outline style, MIT licence, viewBox 0 0 16 16, 493 bytes.
Propiedades del vector: bootstrap-regular-repeat | Editar en el editor SVG 24x24 | 0.3 KB
Vista previa en vivo de tamaños:
16px
24px
32px
Interfaz oscura
studio

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

Vector Studio y espacio de trabajo de iconos 3D

Estudio interactivo en el navegador para personalizar trazados SVG, degradados de varias paradas, iluminación volumétrica 3D, animaciones de movimiento y exportación de código para varios frameworks.

Fuentes de entrada admitidas

Archivos SVG 1.1/2.0, código XML sin procesar o iconos del catálogo integrado

Destinos de exportación y compilación

SVG optimizado, PNG (64–2048 px), WebP, React TSX, Vue 3, Svelte, CSS Data URI y Sprite SVG

Impacto técnico y rendimiento

Reúne edición vectorial, iluminación 3D, optimización y exportación de código en el navegador

Cómo usar Vector Studio y espacio de trabajo de iconos 3D

  1. 1

    Abre el estudio desde Herramientas e inicia una ilustración o importa un archivo SVG.

  2. 2

    Edita capas, colores, paradas de degradado y grosor de trazo en el panel inspector.

  3. 3

    Aplica ajustes de iluminación 3D o activa animaciones para insignias de iconos.

  4. 4

    Exporta SVG limpio, PNG o WebP en alta resolución, o copia código para tu framework.

Entrada de ejemplo

shield.svg importado desde el disco (una sola capa de trazado)

Salida de ejemplo

SVG con degradado ajustado más componente JSX compatible con className

Limitaciones

  • La iluminación 3D ofrece mejores resultados en formas convexas con una luz dominante.
  • El historial de deshacer conserva un máximo de 50 pasos por sesión.
  • El tamaño de importación está limitado a 2 MiB por archivo.

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