Sistema de Ícones // Design System
Alma da Marca Pitch V2.0

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
01
Espessura Uniforme
Mantenha sempre 2px de stroke em todos os tamanhos para garantir consistência visual.stroke-width: 2
02
Terminais Round
Todos os ícones devem usar terminais e junções arredondadas.stroke-linecap: round;
03
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

Para Designers Humanos

  • 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.

Para Agentes de IA

  • Sempre use a classe maggium-icon ao injetar ícones em novos componentes.
  • O padrão de nomenclatura é kebab-case (ex: arrow-right, check-circle).
  • Para estados de carregamento, utilize o ícone loader com a animação de spin.
  • Mantenha o viewBox="0 0 24 24" para garantir alinhamento perfeito no grid.
Ícone copiado!