Ir para o conteúdo
Studio Sem Cadastro | 100% no Seu Navegador

Vector Studio e espaço de trabalho de ícones 3D

Estúdio interativo no navegador para personalizar caminhos SVG, gradientes de várias paradas, iluminação volumétrica 3D, animações de movimento e exportação de código para vários frameworks.

100%
Adicionar 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
Blinds - Lucide iconFree Blinds vector icon from the Lucide open-source icon library; scalable W3C SVG 2.0 graphic for web and design use.
Propriedades do vetor: lucide-outline-blinds | Editar no editor SVG 24x24 | 0.3 KB
Previa ao vivo dos tamanhos:
16px
24px
32px
Interface escura
studio

            
Bandeja de sprites multi-ícone

Fixe varios ícones personalizados e monte uma folha unica de símbolos.

Nenhum ícone fixado ainda. Fixe ícones para reuni-los em uma folha.

Prompt de IA e melhoria vetorial

Gere prompts de IA ou melhore o ícone na tela

Escolha um preset, copie o prompt na sua ferramenta de IA ou melhore o ícone na tela.

Documentação tecnica e guia de engenharia

Vector Studio - Complete Browser-Native SVG & 3D Icon Engineering Environment

SVG Nexus Vector Studio is a zero-install, 100% browser-based vector design and code generation environment. Search and combine 76,166 open-source icons across 29 libraries, inspect individual DOM nodes, apply multi-stop linear gradients, attach 3D drop-glow lighting and squircle badges, animate paths, and export production-ready SVG, PNG, WebP, React TSX, Vue 3, Svelte, and CSS masks with zero server uploads.

Estúdio interativo no navegador para personalizar caminhos SVG, gradientes de várias paradas, iluminação volumétrica 3D, animações de movimento e exportação de código para vários frameworks.

Fontes de entrada aceitas

Any W3C SVG 1.1 / 2.0 file, raw XML markup, or 76,166 built-in catalog icons

Destinos de exportação e compilacao

Optimized SVG, PNG (64px-2048px), WebP, React TSX, Vue 3 SFC, Svelte, CSS Data URI, SVG Sprite

Impacto tecnico e desempenho

Eliminates switching between Figma, Illustrator, SVGO CLI, and IDE component wrappers

Como usar Vector Studio e espaço de trabalho de ícones 3D

  1. 1

    Open the studio workspace from Tools and start an illustration or import an existing SVG file.

  2. 2

    Edit layers, colours, gradient stops and stroke width directly in the inspector panel.

  3. 3

    Apply 3D lighting presets or enable motion animation for icon badges.

  4. 4

    Export clean SVG, high-resolution PNG or WebP, or copy multi-framework code.

Exemplo de entrada

shield.svg imported from disk (single path layer)

Exemplo de saída

SVG with gradient stops tuned, plus a JSX component with className passthrough

Limitações

  • 3D lighting presets read best on convex shapes with a single dominant light.
  • Undo history keeps a maximum of 50 steps per session.
  • Import size is capped at 2 MiB per file.

Os ficheiros que abre ou cola neste espaço de trabalho são processados localmente no seu navegador. Nada é enviado para um servidor.

Digite para pesquisar entre 76,166 ícones vetoriais...

Navegar | Enter para abrir Explorar todos os ícones

Comparar

Fonte e licença do ícone

Licença Uso comercial Atribuicao Modificar ou recolorir
MITPermitidoAviso no pacotePermitido
ISCPermitidoAviso no pacotePermitido
Apache-2.0PermitidoObrigatorio com arquivo de avisoPermitido
CC BY 4.0PermitidoCredito obrigatorioPermitido
CC-BY-SA-4.0PermitidoCompartilhar igualCompartilhar igual
Trademark / BrandApenas uso referencialDiretrizes do donoRestrito

Pré-visualização do ícone