Icon
Ícones (i-Nome) reforçam significado visual de ações, listas e títulos sem quebrar o fluxo textual.
Quando usar
- Complementar botões e links com um sinal visual imediato.
- Diferenciar itens em listas ou navegadores com pistas visuais consistentes.
- Indicar status em cards e mensagens sem adicionar textos redundantes.
- Apoiar FABs e ações destacadas em telas responsivas.
Exemplo básico
Ícones em botões e lista
Por quê: combina pistas visuais e texto para acelerar o reconhecimento da ação.
Variantes
Ícone em parágrafo informativo
Quando usar: destacar avisos sem recorrer a blocos adicionais. Por quê: adiciona ênfase visual sem precisar de layouts extras.
Ícone em navigator
Quando usar: guiar navegação com pistas imediatas sobre cada aba. Por quê: acelera a identificação dos destinos ao percorrer o menu.
Ícone em FAB
Quando usar: diferenciar ações globais no FAB mantendo o layout limpo. Por quê: o ícone sintetiza a finalidade de cada ação sem texto adicional.
Composição (usando com outros)
- Icon + Button — reforça intenção do CTA.
- Icon + List — transforma listas em atalhos visuais.
- Icon + Card — sinaliza status sem poluir títulos.
Card com ícones de status
Por quê: permite acompanhar estados rapidamente dentro de um bloco resumido.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
token | string i-Nome | — | Nome do ícone disponível na biblioteca Lucide. | Sim |
posição | inline | — | Inserido antes do texto do botão, lista ou título. | Não |
semântica | contexto | — | Escolha ícones que reforcem a mensagem sem ambiguidade. | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Token incompleto
✅ Correto — Token válido
Por quê: o prefixo i- identifica o recurso na biblioteca de ícones.
❌ Errado — Ícones isolados
✅ Correto — Contexto explícito
Por quê: o texto garante acessibilidade e evita interpretações ambíguas.
Referências cruzadas
Relacionados
Button: usa ícones para reforçar propósito de ações.List: incorpora ícones como marcadores visuais.Navigator: abastece menus e abas com ícones.Fab: depende de ícones para diferenciar ações flutuantes.
Composições recomendadas
- Icon + Button → CTA com sinalização visual imediata.
- Icon + List → atalhos com leitura rápida.
- Icon + Navigator → menus contextualizados por ícones.
Navigator com ícones e conteúdo
Por quê: associa ícones à seção correspondente e acelera a orientação do usuário.