Ícones na interface: um conjunto, um tamanho e cor só para estado

O sistema de uma clínica veterinária tem três desenhos diferentes para "editar": um lápis cheio na agenda, um lápis vazado no cadastro de animais e uma caneta na tela de vacinas. Ninguém decidiu isso. Cada tela foi feita numa época, com o pacote que estava à mão. A resposta curta: ícone só comunica quando é previsível. Use um único conjunto, associe cada ação a um único desenho, mantenha um tamanho proporcional ao texto e reserve cor para estado, não para enfeite. Onde o desenho não for óbvio para o seu público, o texto fica ao lado.

Este guia trata da consistência visual e da escolha. O nome acessível do botão só de ícone tem guia próprio em ícone com nome no botão, e a licença do pacote em pacote de ícone grátis ainda tem licença.

Por que a interface fica poluída de ícones

Catálogos de ícones têm milhares de desenhos, e isso cria uma tentação: cada botão ganha um símbolo "para ficar mais visual". O problema é que o ícone não carrega significado sozinho. Ele aprende o significado com a repetição. Uma lixeira significa excluir porque a pessoa já viu a lixeira excluir dezenas de vezes no mesmo produto.

Quando a mesma ação aparece com desenhos diferentes, ou o mesmo desenho faz coisas diferentes, essa aprendizagem quebra. A pessoa passa a ler o tooltip de cada botão, e o ícone vira custo em vez de atalho. Misturar pacotes piora: traços de espessura diferente, cantos retos ao lado de cantos arredondados e desenhos que não se alinham com o texto do botão.

A cor sofre do mesmo jeito. Se o menu tem um ícone azul, um verde e um laranja só para "ficar vivo", o vermelho do aviso de exclusão perde força. Cor usada como decoração deixa de funcionar como sinal.

Como arrumar os ícones de um sistema existente

1. Faça o inventário. Descubra quantos pacotes e quantos desenhos estão em uso de verdade.
2. Liste as ações, não os desenhos. Salvar, editar, excluir, buscar, fechar, baixar, filtrar, imprimir. Cada ação vira uma linha.
3. Escolha um conjunto. Material Symbols, Lucide, Bootstrap Icons e Heroicons são opções conhecidas. Escolha pelo estilo que combina com a sua tipografia e pela cobertura das ações da sua lista.
4. Crie um mapa de ação para ícone. Um arquivo só, que o código inteiro consulta. Ninguém escolhe ícone direto do catálogo na hora de fazer a tela.
5. Defina o tamanho em relação ao texto. Ícone ao lado de rótulo acompanha o tamanho da fonte do botão.
6. Defina as cores de estado. Perigo, sucesso, aviso e neutro. O resto herda a cor do texto.
7. Decida onde o ícone pode aparecer sozinho. Fechar, buscar e menu costumam ser reconhecidos. O resto leva texto.

O inventário com uma busca no código

Na clínica, os ícones vinham de Font Awesome (classes fa-), Bootstrap Icons (classes bi-) e alguns SVGs soltos. Uma busca com ripgrep mostra o tamanho da bagunça:

rg -o --no-filename "\b(fa|bi)-[a-z0-9-]+" src | sort | uniq -c | sort -rn

A saída, resumida:

  41 bi-pencil
  27 fa-trash
  19 bi-trash
  12 fa-edit
   9 fa-pen
   6 bi-pencil-square

Só aí aparecem quatro desenhos para editar e dois para excluir. Ajuste o padrão da busca às classes que o seu projeto usa; o objetivo é ter uma lista de contagens, não um comando universal.

O mapa de ação para ícone

A clínica escolheu Lucide, que entrega SVGs com traço em currentColor. O mapa fica num arquivo próprio:

// src/ui/icones.js
export const ICONES = {
  salvar: 'save',
  editar: 'pencil',
  excluir: 'trash-2',
  buscar: 'search',
  fechar: 'x',
  adicionar: 'plus',
  baixar: 'download'
}

Os componentes recebem a ação, não o nome do desenho. Se um dia o conjunto mudar, você altera uma linha por ação, não trezentas telas. E a revisão de código ganha uma regra simples: ícone que não está no mapa não entra.

Tamanho e alinhamento com o texto

Medir o ícone em em faz ele crescer junto com a fonte do botão, inclusive quando a pessoa aumenta o zoom do texto:

.icone {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.25em;
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

Com inline-flex e align-items: center, o ícone e o rótulo ficam na mesma linha óptica. O vertical-align cobre o caso do ícone solto dentro de um parágrafo. Mantenha a mesma espessura de traço em todo o produto; misturar traço fino e grosso é o que mais denuncia pacotes diferentes.

Cor é estado, não decoração

Como o SVG usa currentColor, o ícone herda a cor do texto ao redor. Isso já resolve navegação, barras de ferramentas e menus: tudo na cor do texto. A cor própria fica reservada para quando ela quer dizer algo:

:root {
  --cor-perigo: #b42318;
  --cor-sucesso: #067647;
  --cor-aviso: #93370d;
}

.estado-perigo { color: var(--cor-perigo); }
.estado-sucesso { color: var(--cor-sucesso); }
.estado-aviso { color: var(--cor-aviso); }

Duas regras completam o quadro. A cor nunca é o único sinal: o aviso também tem um desenho próprio e um texto. E a cor do ícone precisa de contraste suficiente com o fundo, do mesmo jeito que o texto; um ícone cinza-claro sobre branco é decoração que ninguém enxerga.

Quando trocar o ícone por texto

Um teste rápido: se você precisa de uma frase para explicar o que o ícone faz, ele não está pronto para ficar sozinho. "Reenviar o lembrete de vacina por WhatsApp" não cabe num desenho. Nesse caso, o botão tem texto visível, e o ícone, se existir, é apoio.

Ações destrutivas e raras também merecem texto. Ninguém deveria descobrir pelo tooltip que o ícone de nuvem com seta apagava a ficha do animal. Em barras de ferramentas densas, onde o espaço é curto, mantenha o ícone sozinho só para as ações universais e garanta o nome acessível em cada botão.

Erros comuns

• Misturar dois ou três pacotes de ícones. Traço, peso e alinhamento mudam de tela para tela, e o produto parece remendado.
• Um desenho diferente para a mesma ação. A pessoa não reconhece o padrão e passa a ler cada tooltip.
• O mesmo desenho para ações diferentes. O lápis que edita numa tela e anota na outra gera clique errado.
• Pintar cada item do menu de uma cor. O vermelho do perigo deixa de chamar atenção.
• Ícone em tamanho fixo em pixels. Ao aumentar o texto, o ícone fica minúsculo ao lado do rótulo.
• Ícone sozinho em ação pouco conhecida. O botão vira adivinhação e a ação some na prática.

Checklist

• O produto usa um único conjunto de ícones.
• Existe um mapa de ação para ícone e todas as telas o consultam.
• Cada ação tem um desenho e cada desenho tem uma ação.
• O tamanho do ícone é relativo ao texto e acompanha o zoom.
• Ícones de navegação usam a cor do texto; cor própria só para estado.
• Nenhum estado depende só da cor.
• Botões só de ícone se limitam a ações universais e têm nome acessível.

Procure no seu código quantos desenhos diferentes existem para "editar". Se a resposta for maior que um, qual deles vai ficar?