Icons
Ícones ajudam a comunicar ações, estados e navegação de forma rápida e consistente. Esta página reúne os tamanhos, padrões e biblioteca oficial.
Não aplique ícones personalizados ou fora da biblioteca documentada. Prefira sempre os padrões do sistema.
Boas Práticas
Quando usar
Utilizar os ícones oficiais definidos pelo sistema.
Aplicar tamanhos consistentes conforme o contexto da interface.
Reforçar ações, navegação e feedbacks visuais.
Manter o mesmo padrão de ícones entre componentes semelhantes.
Consultar o catálogo oficial antes de adicionar novos ícones.
Quando não usar
Misturar diferentes estilos de ícones na mesma interface.
Utilizar tamanhos arbitrários fora dos padrões definidos.
Criar ou editar ícones manualmente sem necessidade.
Ícones decorativos que prejudiquem a hierarquia visual.
Aplicar ícones sem contexto ou significado claro.
Catálogo
Biblioteca oficial de ícones utilizada no sistema, com tamanhos padronizados e catálogo para consulta.
Tamanhos
Ações comuns
| Name | Uso |
|---|---|
| Editar — Atualização de conteúdo | |
| Excluir — Ações destrutivas | |
| Adicionar — Criação de itens | |
| Buscar — Pesquisa e filtros | |
| Fechar — Encerramento de contexto | |
| Sucesso — Confirmação positiva | |
| Alerta — Avisos e atenção | |
| Erro — Falhas e bloqueios | |
| Informação — Contexto e orientação | |
| Menu — Ações adicionais |
Bibliotecas
Lucide Icons
Biblioteca principal — integrada ao Nuxt UI via UIcon.
i-lucide-*Catálogo Lucide
Regras de aplicação
Os ícones devem complementar a interface e reforçar o significado das ações, sem substituir textos importantes. Em ações de tabela, mantenha alinhamento e posicionamento consistentes.
Utilize apenas a biblioteca Lucide para aplicação de ícones no sistema.
Exemplos de uso
<UIcon name="i-lucide-check" class="w-4 h-4" />
<UButton icon="i-lucide-plus" label="Adicionar" />
<UAlert icon="i-lucide-triangle-alert" title="Atenção" />
<!-- Tabela: editar / excluir -->
<UButton icon="i-lucide-square-pen" color="neutral" variant="ghost" />
<UButton icon="i-lucide-trash-2" color="error" variant="ghost" />