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

Sistema
de Ícones

Tamanhos, Regras de Uso & Variantes de Cor // Stroke-Based // 2026

Iconografia 3 Seções 2026
01Grade de Ícones
16pxGrade Pequena (4px)
24pxGrade Base (8px)
32pxGrade Média (8px)
48pxGrade Grande (12px)
Check
Fechar
Mais
Menos
Seta D
Seta E
Seta B
Ir
Busca
Sol
Grade
Lua
Usuário
Monitor
E-mail
Verificado
Alerta
Escudo
Atividade
Relógio
Externo
Chat
Raio
Cifrão
02Regras de Uso
01
Espessura do Traço
Sempre utilize 2px de stroke em todos os tamanhos.stroke-width: 2
02
Terminais & Junções
Terminais arredondados e junções arredondadas obrigatórios.stroke-linecap: round; stroke-linejoin: round;
03
ViewBox
viewBox de 24px como base canônica.viewBox="0 0 24 24"
04
Apenas Traço
Apenas stroke, sem preenchimento. Sempre use fill: none.fill: none
05
Herança de Cor
Use currentColor para herança de cor do contexto pai.stroke="currentColor"
06
Acessibilidade
Área de toque mínima: 44x44px para conformidade WCAG.min-width: 44px; min-height: 44px;
03Variantes de Cor
Padrão / Textovar(--text)
Marca / Accentvar(--accent)
Sutil / Dimvar(--dim)
Erro / Destrutivovar(--error)
Info / Azulvar(--info)
Aviso / Destaquevar(--warning)