Icons
Sistema de ícones — grid, tamanhos, stroke e regras de uso
01
Ícones do Sistema
Ícones base em 24px com stroke de 2px
arrow
close
menu
search
play
settings
external
download
02
Tamanhos
Escala de ícones: 16, 24, 32, 48px
16px
Inline, labels
24px
Padrão, UI
32px
Destaque, nav
48px
Hero, feature
03
Grid & Stroke
Regras de construção dos ícones
Grid 24x24
Todos os ícones são desenhados em grid de 24x24px com padding de 2px (zona de segurança).
Stroke Width
1px — Muito fino
Evitar
2px — Padrão
Usar sempre
3px — Muito grosso
Evitar
O stroke padrão de 2px garante legibilidade consistente em todos os tamanhos. Sempre usar round cap e round join.
04
Regras de Uso
Faça
- ✓ Use ícones na cor branca (#F5F5F5) sobre fundos escuros
- ✓ Use vermelho (#E01020) para ícones de ação ou destaque
- ✓ Mantenha stroke de 2px em todos os tamanhos
- ✓ Use ícones do mesmo estilo (outline) consistentemente
- ✓ Alinhe ícones ao grid de 4px
Não faça
- ✗ Não misture estilos outline e filled
- ✗ Não altere o stroke para valores diferentes de 2px
- ✗ Não use ícones menores que 16px
- ✗ Não aplique sombra ou efeitos 3D nos ícones
- ✗ Não use cores fora da paleta da marca