Fundações
Ícones
Lucide, outline puro, traço de 2px, cor herdada do texto. Duotone foi testado e rejeitado — não repropor. Ícone é informativo: se não agrega informação, sai. E emoji nunca substitui ícone.
lucide-reactstroke 2size-3.5 · 4 · 5 · 6
Tamanhos
Quatro medidas. O ícone acompanha o tamanho do texto ao lado, nunca o tamanho do contêiner.
size-3.514 · botão xs, chip, dot ao lado de 12px
size-416 · botão, menu, campo, tabela
size-520 · sidebar, rail, banner
size-624 · selo circular de vazio e de erro
o tamanho vem do botão, não da tag
// O Button injeta o tamanho quando o ícone não traz um: [&_svg:not([class*='size-'])]:size-4 // padrão size="xs" → [&_svg:not([class*='size-'])]:size-3.5 // Por isso o uso normal é simplesmente: <Button><Plus /> Novo paciente</Button> // E o override, quando existe, é explícito: <Button><Plus className="size-5" /> Grande</Button>
| Detalhe | Regra |
|---|---|
| Traço | strokeWidth 2 (o default do Lucide). 1.8 só no selo de vazio, onde o ícone é grande e o traço 2 fica pesado. |
| Cor | herda de currentColor. Ícone secundário: text-fg-subtle. |
| Encolhimento | shrink-0 sempre que estiver num flex — senão o ícone amassa antes do texto. |
| Clique | pointer-events-none quando é decorativo dentro de um alvo (a lupa do campo de busca). |
| Acessibilidade | o Lucide já marca aria-hidden. O nome acessível vem do texto ao lado ou do aria-label do botão. |
O vocabulário fixo
Cada domínio tem UM ícone, e ele não muda entre telas. Trocar o ícone da Agenda numa tela específica é o mesmo que trocar o nome dela ali.
Navegação principal
Hoje
Agenda
Atendimento
Assistente
Números
Cadastros
Clínica
Ajustes
Rail da Clínica
- Dados da clínica
- Horários & regras
- Equipe
- Serviços
- Modelos de contrato
- Custos da clínica
- Insumos
- Conhecimento
Rail da Conta
- Perfil
- Aparência
- Privacidade
- Segurança
- Senha
A assinatura de IA
Sparkles em roxo acompanha qualquer coisa que veio do agente. É o par visual da cor — juntos, dizem “isto não foi você que escreveu”.
Sugestão do agente Responder com IA Escrever convites
O Bot é outra coisa: ele nomeia a TELA do assistente na navegação (a configuração dele), enquanto o Sparkles marca o CONTEÚDO que ele gerou. Um é endereço, o outro é procedência.
Regras
Curtas, e todas já custaram uma discussão.
Sim
Agenda
Cadastros
Outline, traço 2, tamanho igual ao texto, cor herdada, ícone que diz o que a coisa é.
Não
📅 Agenda
Cadastros
Emoji não é ícone (muda de desenho por sistema operacional e não herda cor). Ícone preenchido, colorido e maior que o texto vira mancha decorativa.
| Regra | Detalhe |
|---|---|
| Um ícone por conceito | Se dois lugares mostram a mesma coisa, mostram o mesmo ícone. Se mostram coisas diferentes, os ícones não podem ser parecidos. |
| Ícone sozinho pede aria-label | Botão só de ícone (kebab, fechar, recolher) sem rótulo visível: aria-label obrigatório, e no rail o rótulo vira sr-only + title. |
| Nada de biblioteca paralela | Só Lucide. Precisou de um desenho que não existe lá? Isso é uma peça de marca (SVG próprio, como o glifo do WhatsApp), não um ícone novo. |
| Duotone: rejeitado | Testado e recusado — não repropor. O outline é o que faz o ícone conviver com texto de qualquer peso. |
| Ícone não substitui rótulo | Numa lista de ações, o texto manda; o ícone acelera o reconhecimento. Menu só de ícones vira adivinhação. |
NotaEmoji tem UM lugar legítimo
O seletor de emoji do produto (reação a mensagem, apelido de sala) — ali o emoji é conteúdo do usuário, não elemento de interface. Em botão, menu, status ou navegação, nunca.