Icon System

Icons

Sistema de ícones stroke-based. 2px stroke, round caps, currentColor.

12 Ícones • 4 Tamanhos • 6 Cores
01
Biblioteca de Ícones
12 ícones stroke-based desenhados para consistência e legibilidade em qualquer escala.
Check
Close
Plus
Minus
Chevron Right
Chevron Left
Chevron Down
Arrow Right
Search
Sun
Grid
Moon
02
Tamanhos
Quatro escalas canônicas para diferentes contextos de uso.
16px
Inline, espaços reduzidos
24px
Default / UI (base canônica)
32px
Cards, ênfase
48px
Hero, destaque
03
Regras de Uso
Diretrizes obrigatórias para garantir consistência visual em todos os contextos.
1
Sempre usar stroke-width: 2px em todos os tamanhos
2
stroke-linecap: round e stroke-linejoin: round obrigatórios
3
viewBox 24x24 como referência canônica
4
Apenas stroke, sem fills
5
Usar currentColor para herança; mínimo 44x44px para touch targets
04
Variantes de Cor
6 variantes de cor para diferentes contextos semânticos.
Default / Cream
#F5F0E8
Brand / Primary
#F26B3A
Muted
#6E6E64
Error
#F87171
Info
#60A5FA
Success
#34D399
05
Código
Exemplo de implementação de um ícone inline SVG.
<!-- Exemplo: ícone Check -->
<svg width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round">
  <polyline points="20 6 9 17 4 12"/>
</svg>
Atributos obrigatórios
fill="none"
Sem preenchimento, apenas stroke
stroke="currentColor"
Herda a cor do elemento pai
stroke-width="2"
Espessura fixa em todos os tamanhos
stroke-linecap="round"
Terminações arredondadas
stroke-linejoin="round"
Junções arredondadas
viewBox="0 0 24 24"
Canvas canônico de referência