Sistema
de Ícones

80+ Ícones Animados // SVG Inline // Proprietário // 2026

Iconografia Avançada 8 Categorias / 4 Estados Animados 2026

01Grade de Tamanhos

16px Micro-interação

24px Grade Base (8px)

32px Interface Média

48px Display / Feedback

02Regras de Uso

Espessura Uniforme

Mantenha sempre 2px de stroke em todos os tamanhos para garantir consistência visual.stroke-width: 2

Terminais Round

Todos os ícones devem usar terminais e junções arredondadas.stroke-linecap: round;

Cores Semânticas

Utilize currentColor para que os ícones herdem a cor do contexto de texto.stroke="currentColor"

03Biblioteca de Ativos

04Variantes de Cor

Padrão / Texto
var(--text)

Marca / Accent
var(--accent)

Sutil / Dim
var(--dim)

Erro / Destrutivo
var(--error)

Sucesso / Correct
var(--correct)

Info / Azul
var(--info)

05Diretrizes & Orquestração

Use sempre a grade de 24px como canvas base no Figma.
Evite preenchimentos (fills); o sistema é estritamente baseado em traços (strokes).
Ao exportar, certifique-se de que o SVG não possui caminhos ocultos ou grupos desnecessários.
Priorize a semântica: use ícones de "Ação" apenas para gatilhos interativos.

Ícone copiado!

Sistemade Ícones