Ícones e elementos visuais que orientam a ação

Escolha o elemento pela tarefa que ele esclarece, e só depois pelo estilo

Um pedido de "ícones mais modernos" é um pedido de estilo, e a resposta errada a ele quebra tarefas. No exemplo didático que atravessa este guia, a agência Mirante (nome fictício) refaz três peças de um curso online de fotografia de produto para pequenas lojas: a página de captação "Fotografe para vender", o e-mail de boas-vindas "Sua vaga está reservada" e o painel interno de campanhas da própria agência. Camila, a designer, atendeu ao pedido do cliente trocando a família inteira por desenhos preenchidos de outra biblioteca. Otávio, o desenvolvedor que trabalha com agente de código, aplicou a troca em uma tarde. Na revisão da semana seguinte, três ações do painel (duplicar, arquivar e filtrar campanhas) deixaram de ser reconhecidas por quem usava a tela todos os dias, e os ícones do e-mail sumiram no modo escuro de alguns clientes de correio.

Nenhum desses defeitos nasceu de um desenho feio. O preenchido novo tinha silhuetas diferentes das que a equipe já havia aprendido, e o arquivo do e-mail tinha traço escuro sobre fundo transparente, que desaparece quando o fundo vira escuro. A pergunta que faltou antes da troca é a mesma que organiza esta seção: que trabalho cada desenho precisa fazer nesta tela, para esta pessoa? Respondida essa pergunta, o estilo vira uma variável que se testa em vez de ser a primeira decisão.

Seis elementos visuais e a pergunta que decide entre eles

Use um ícone para ajudar a reconhecer uma ação ou informação curta. Quando a explicação depende de relações, sequência ou contexto, avance para um pictograma, uma ilustração ou um diagrama. A tabela mantém os seis elementos que este material sempre distinguiu e acrescenta, em cada linha, a pergunta que a equipe pode fazer em voz alta para saber se escolheu o elemento certo.

Na Mirante, a coluna da pergunta resolveu uma discussão antiga. O card "Luz natural sem estúdio" da página de captação tinha um foguete, igual aos outros três cards; quando Camila perguntou qual promessa específica o foguete representava, ninguém soube responder, e o desenho virou uma câmera ao lado de uma janela. Um desenho reconhecível ainda pode ter uma função incerta: a estrela pode indicar favorito, avaliação ou destaque, e o NN/g separa o reconhecimento da forma da interpretação da função. Teste as duas coisas antes de esconder o rótulo; a seção Evidência mostra os números.

Semelhança, referência e arbitrário: três tipos de ícone pedem rótulos diferentes

O tipo do ícone diz quanto texto ele precisa ao lado. Em "Classifying Icons", publicado pelo NN/g em 2014, Jakob Nielsen divide os ícones em três classes. O ícone de semelhança retrata o próprio objeto, como o envelope para e-mail. O de referência usa uma analogia, como a morsa de bancada para compressão de arquivo. O arbitrário só tem sentido por convenção, como o triângulo de alerta ou o ponto de interrogação de ajuda. A recomendação do artigo é preferir semelhança, usar arbitrários apenas quando já forem padronizados e nunca tentar lançar uma convenção nova em um produto.

O mesmo texto traz dois avisos que interessam a quem desenha painéis. O relógio usado para "histórico" falhou em teste com usuários, porque a analogia entre tempo e registro de ações não é óbvia para todo mundo. E o disquete de "salvar" migrou de semelhança para referência e, para quem nunca usou um, virou arbitrário. Nielsen cita ainda um teste em que só 9% dos húngaros entenderam o ícone de um jogador de squash, número que o artigo de 2014 usa para lembrar que referência cultural não viaja.

Na prática, a classificação vira uma regra de rótulo. Ícone de semelhança aceita rótulo curto, de uma ou duas palavras, quando o objeto é conhecido e a ação é única na tela. Ícone de referência precisa de rótulo até a equipe comprovar, em teste, que o público aprendeu a analogia. Ícone arbitrário só entra quando a convenção já existe fora do produto, e mesmo assim leva texto nos primeiros contatos da pessoa com a tela.

Os três ícones que dispensam rótulo, e todos os outros

A lista de ícones que dispensam texto é curta e tem fonte. Em "Icon Usability", de 2014, Aurora Harley escreve no NN/g que poucos ícones têm reconhecimento quase universal: a casa para início, a impressora para imprimir e a lupa para busca. "Fora desses exemplos, a maioria dos ícones continua ambígua para os usuários", conclui o artigo. O carrinho de compras não aparece na lista. Ele é uma convenção forte do comércio eletrônico, e quem vende produto físico pode apostar nele com rótulo de apoio, mas a fonte não o trata como universal.

A Mirante quase cometeu o erro do lado direito. A página de captação vende vaga em curso, não produto em estoque, e a primeira versão usava um carrinho no botão "Garantir minha vaga". O carrinho prometia uma loja que não existia e somava uma etapa mental ("onde está o resto dos produtos?"). Saiu o carrinho e ficou o texto, com uma seta discreta à direita que reforça o avanço sem mudar o significado.

Quando o texto basta, o ícone é decoração que cobra atenção

Texto sozinho é a escolha certa quando o desenho não acrescenta reconhecimento. O GOV.UK Design System resume a regra na página sobre imagens: só use imagens quando houver necessidade real do usuário, e na maioria dos casos ainda ajuda manter um rótulo de texto visível ao lado de qualquer ícone. A pergunta que o sistema britânico deixa para a equipe é direta: o ícone é necessário para a pessoa concluir a tarefa? Três situações costumam responder que não.

• Ação rara. Uma ação usada poucas vezes por mês, como "Exportar relatório anual", deixa pouco tempo para a pessoa aprender a forma. O desenho vira mais um elemento para decifrar, e o texto resolve sem treino.
• Verbo ambíguo. Quando o mesmo objeto admite vários verbos (o envelope que pode ser enviar, ler, responder ou assinar), o ícone indica o assunto em vez da ação. Se a tela tiver dois desses botões lado a lado, o texto precisa fazer o trabalho inteiro.
• Público novo. Os alunos do curso da Mirante são donos de pequenas lojas que chegam à página pela primeira vez, muitas vezes vindos de um anúncio. Para quem nunca viu a interface, nenhum ícone fora da lista do NN/g tem significado garantido.

Remover o ícone também tem limite. Em lista longa de ações frequentes, como o menu de cada linha do painel de campanhas, o ícone ao lado do texto acelera a varredura visual, e tirá-lo obriga a ler cada palavra. A regra da seção seguinte coloca essa diferença em uma tabela.

A regra de decisão da Mirante cruza frequência de uso e familiaridade do público

Duas perguntas bastam para decidir entre ícone com rótulo, ícone sozinho e texto sozinho: com que frequência a pessoa usa essa ação, e quão familiar ela já está com a convenção do desenho. A Mirante escreveu a regra depois do incidente dos ícones preenchidos e passou a anexá-la ao contrato visual descrito na oficina de contrato visual.

Aplicada ao painel, a matriz explicou o incidente. Duplicar, arquivar e filtrar são ações de frequência alta, mas os desenhos preenchidos eram convenção desconhecida para a equipe, que conhecia os contornos da família anterior. A célula correta era "ícone com rótulo", e a primeira versão havia aplicado "ícone sozinho" sem teste. Otávio pediu ao agente de código que restaurasse os rótulos nas três ações e listasse qualquer símbolo sem correspondente na família antes de criar exceção.

No e-mail "Sua vaga está reservada", a matriz aponta outra coisa: a ação "Acessar a primeira aula" é usada uma vez, por um público novo, e por isso fica em texto, num botão que funciona com imagens bloqueadas. Os ícones do e-mail passaram a ser reforço dos tópicos, nunca o único portador da informação, e o problema do modo escuro ganhou solução própria na oficina do e-mail sem imagem. A recomendação geral para equipes de agência segue a mesma lógica: use ícone sozinho quando a ação é frequente e a forma está na lista curta ou foi testada com o público real; abaixo disso, mantenha o rótulo; e em ação rara para público novo, escreva o verbo e dispense o desenho.

O pedido de "ícones mais modernos" não foi recusado. Camila manteve a família de contorno, aumentou o raio dos cantos dos botões e ajustou o peso do traço dentro da mesma biblioteca, o que entregou a sensação de novidade sem trocar as silhuetas que a equipe já reconhecia.

Meça reconhecimento e compreensão antes de esconder o rótulo

Os números publicados sobre ícones contrariam a intuição de que "todo mundo entende". No exemplo didático da agência Mirante, Otávio propôs retirar os rótulos do painel de campanhas para caber uma coluna a mais, com o argumento de que a equipe "já conhece os ícones". Camila pediu uma semana e uma tabela de fontes antes de aceitar. Esta seção é essa tabela, ampliada: o que foi medido, por quem, com quantas pessoas, e onde o dado termina.

Quando o número veio de resultado de busca, sem leitura da página inteira, ou de citação por terceiros, o texto diz isso. As fontes foram consultadas em 22 de outubro de 2026.

Navegação escondida custa descoberta: os números do NN/g em 2016

Esconder a navegação atrás do ícone de três linhas reduziu o uso e a descoberta em todos os contextos medidos. Em "Hamburger Menus and Hidden Navigation Hurt UX Metrics", publicado pelo NN/g em 2016, Kara Pernice e Raluca Budiu observaram 179 participantes realizando tarefas em seis sites, no celular e no computador, com três versões de navegação: visível, oculta e combinada (parte visível, parte atrás do menu). No desktop, as pessoas usaram a navegação oculta em 27% dos casos, contra 48% da visível e 50% da combinada, segundo o estudo de 2016. No celular, o uso da oculta chegou a 57% dos casos, contra 86% da combinada, no mesmo levantamento de 2016.

O efeito não parou no clique. A descoberta de conteúdo caiu mais de 20% nos sites com navegação oculta, e as tarefas ficaram pelo menos 39% mais lentas no desktop, de acordo com o NN/g em 2016. A dificuldade percebida, numa escala de um a sete, foi de 2,6 com navegação oculta, 2,3 com a combinada e 2,1 com a visível.

Dois limites acompanham esses números. A versão só visível não foi testada no celular, de modo que o estudo compara oculta e combinada nessa tela, sem a comparação entre oculta e visível. E o tempo até o primeiro uso da navegação no desktop (31 segundos com a oculta, 23 com a combinada) foi apenas marginalmente significativo, com p menor que 0,1. A leitura útil é a direção do efeito: quando a ação some atrás de um ícone, menos gente a encontra.

Indicadores visuais funcionam melhor com texto, cor e ícone juntos

Em listas e tabelas, a combinação de cor e ícone venceu o texto puro em velocidade e acerto. Aurora Harley publicou no NN/g, em 2016, "Visual Indicators to Differentiate Items in a List", com 96 participantes num teste de clique sobre capturas de tela de celular: duas listagens de comércio eletrônico e duas tabelas de ações, cada uma em quatro variantes (só texto, só cor, só ícone e cor com ícone). O texto puro foi 57% mais lento que a melhor condição, e o acerto ficou em 76% contra 85% da combinação de cor e ícone, segundo o estudo de 2016. Ícone sozinho foi um pouco melhor que cor sozinha.

O artigo traz um alerta que vale para qualquer painel: depender só da cor arrisca excluir pessoas com daltonismo. A limitação é o dispositivo, porque o teste usou apenas celular.

Emoji e brilhos não significam o que o time acha

Os dois estudos do NN/g sobre glifos populares mostram que o significado intencional do time e o significado lido pelo público divergem. Em "Emojis in Email Subject Lines: Advantage or Impediment?", de 2020, Flaherty testou 13 e-mails reais de comércio eletrônico em dois estudos: um de atitude, com 53 e 54 respondentes, e um de seleção em caixas de entrada balanceadas, com 55 e 58. A probabilidade de um e-mail ser escolhido não mudou com o emoji (p maior que 0,1), e o sentimento negativo subiu 26%, de 0,81 para 1,02, no estudo de 2020. A ressalva do próprio método é importante: mede intenção declarada de abrir em vez de abertura real.

O ícone de brilhos (sparkles), que migrou do teclado de emoji para os botões de inteligência artificial, teve resultado ainda mais claro. No artigo de Kaplan publicado pelo NN/g em 2024, nenhuma das 107 pessoas associou o ícone a inteligência artificial. As associações principais foram salvar ou favoritar e efeitos visuais, com 16,82% cada, e a estrela simples foi lida como salvar ou favoritar por 73% dos participantes, sempre no estudo de 2024. O NN/g recomenda acompanhar o ícone de um rótulo e usar dica de ferramenta para acelerar o aprendizado.

Reconhecer a forma e entender a função são medidas distintas

A literatura acadêmica trata reconhecimento e compreensão como variáveis diferentes, e a maior parte dos resultados numéricos disponíveis para este guia é de segunda mão. Em 1999, McDougall, Curry e de Bruijn publicaram na Behavior Research Methods, Instruments, & Computers (volume 31, número 3) normas de avaliação de 239 símbolos em cinco dimensões: concretude, complexidade, significatividade, familiaridade e distância semântica. A distância semântica mede o quanto o desenho está longe do que representa, e é ela que separa o envelope (perto de "mensagem") da morsa de bancada (longe de "comprimir arquivo"). A referência foi confirmada; as tabelas de normas não foram lidas nesta pesquisa.

Wiedenbeck publicou em 1999, na Behaviour & Information Technology (volume 18, número 2), um estudo com três formatos de barra de ferramentas: só ícone, só rótulo e ícone com rótulo. Segundo resumos de terceiros (o texto original não estava acessível), a autora concluiu que o valor do rótulo ao lado do ícone dura pouco no tempo, mas pesa muito na velocidade de aprendizado e na facilidade percebida, e recomendou rótulos no início, com um mecanismo para retirá-los depois. Tempos e taxas de erro exatos não foram localizados com fonte primária.

Isherwood, McDougall e Curry publicaram em 2007, na Human Factors (volume 49, número 3), "Icon identification in context: The changing role of icon characteristics with user experience". Autores, periódico e ano estão confirmados; o resumo não foi obtido, e por isso este guia não atribui ao estudo nenhum resultado além do que o título anuncia: o peso de cada característica do ícone muda conforme a pessoa ganha experiência. A consequência prática dos três trabalhos é a mesma regra de Wiedenbeck: rótulo visível no começo, retirada só depois de medir.

Que taxa de acerto aceitar antes de publicar um ícone sem texto

O único limiar numérico verificado nesta pesquisa vem da sinalização de segurança. O protocolo de teste de compreensão de símbolos do IIID, de 1991, registra que a norma ANSI Z535.3 recomenda 85% de respostas corretas com no máximo 5% de confusões críticas, e o relatório da CPSC de 2019 reafirma os mesmos valores. Confusão crítica é a resposta que leva a pessoa a fazer o oposto do que o símbolo pede, como ler "não abra" como "abra aqui".

A ISO 9186-1:2014, confirmada em 2019, descreve o método de teste de compreensão de símbolos gráficos, e o limiar não foi confirmado nesta pesquisa. O texto da norma é pago; o critério deve ser conferido nas seções de análise e categorização antes de ser citado. O método, esse sim, é o mesmo nas duas referências: mostrar o símbolo, pedir uma definição aberta do significado e da ação, e classificar as respostas em corretas, erradas e confusões críticas.

Para uma agência, o critério da ANSI é um teto exigente, pensado para símbolos de risco físico. A recomendação deste guia: use a barra de 85% da ANSI Z535.3 (registrada pelo IIID em 1991) quando o ícone sem texto disparar ação destrutiva ou cobrança, como excluir ou pagar; para ações reversíveis de painel interno, a equipe pode fixar uma barra própria, desde que a declare antes do teste e conte os acertos em unidades, porque com oito pessoas cada resposta vale muito. A oficina de teste de compreensão monta a tabela.

Selos de confiança e ícones de pagamento no checkout dependem da marca do selo

Os números do Baymard Institute citados aqui vieram de resultados de busca, sem leitura completa das páginas. No levantamento "Which Site Seal do People Trust the Most?", de 2013, com 2.510 respostas, o selo Norton foi o que mais transmitiu confiança (cerca de 36% entre quem escolheu), e 49% responderam não saber ou não ter preferência, segundo os trechos de 2013. Na atualização de 2023, um selo "caseiro", sem empresa terceira por trás, ficou acima dos selos SSL de fornecedores conhecidos, com exceção do Norton.

A desconfiança no pagamento tem custo mensurável: 19% dos respondentes abandonaram um checkout nos últimos três meses por não confiar o cartão ao site, num levantamento do Baymard de 2025 com 1.026 pessoas. Em navegação, 84% dos sites de comércio eletrônico no desktop mostram a primeira camada do menu sem interação, segundo o Baymard em 2026, o que reforça o achado do NN/g sobre navegação oculta. Para a Mirante, que vende vaga em curso, a consequência foi retirar o escudo genérico do formulário e manter só o que pode ser comprovado (o nome do processador de pagamento, com as regras de uso da marca dele).

Um em cada 12 homens não distingue algumas cores

Ícone de estado que depende só de vermelho e verde falha para uma parte previsível do público. O National Eye Institute informa, em página atualizada em 2025, que cerca de um em cada 12 homens tem deficiência na visão de cores e que o tipo mais comum dificulta distinguir vermelho e verde. A Colour Blind Awareness, em página consultada em 2026, acrescenta a proporção de uma em cada 200 mulheres; o número feminino vem dessa organização; o NEI publica só o masculino.

A regra correspondente da acessibilidade é o critério 1.4.1 da WCAG 2.2, nível A, uso da cor: cor não pode ser o único meio de transmitir informação. Na prática, sucesso, alerta e falha precisam de formas diferentes (círculo com marca de verificação, triângulo, círculo com X) e de uma palavra, com a cor como reforço. A oficina de estados visuais testa isso retirando as cores da tela.

O que a evidência não sustenta

Algumas afirmações circulam em blogs de marketing com aparência de dado, e esta pesquisa não as localizou em fonte primária. Elas ficam fora das recomendações do guia até que alguém mostre o estudo original.

• "A ISO 9186-1:2014 exige 66% ou 67% de acertos": o valor aparece em segunda mão, atribuído a outra norma, sem conferência no texto da ISO.
• "Emoji no assunto aumenta a abertura em 56%", atribuído à Experian em 2012: o relatório original não foi localizado, e o número circula em duas leituras incompatíveis (56% das marcas com ganho, ou abertura 56% maior, ambas sem método publicado desde 2012).
• Dados de Litmus, Mailchimp, Omnisend e Klaviyo sobre emoji em e-mail: não localizados com fonte primária nesta rodada.
• "Escrever 'Menu' ao lado do hambúrguer garante mais cliques", atribuído ao teste da Exis de 2014: o site original estava fora do ar, as reproduções divergem entre si, e a Booking.com relatou não ver diferença. É hipótese para teste, ainda sem força de regra.
• "O carrinho é ícone universal": o NN/g lista só casa, impressora e lupa.
• Resultados numéricos de Isherwood, McDougall e Curry (2007): o resumo não foi obtido.

Na Mirante, a tabela respondeu à proposta de Otávio. Os rótulos ficaram, a coluna nova ganhou espaço com a redução do padding lateral, e a equipe marcou um teste de compreensão para as três ações que tinham falhado. O resultado desse teste está no fecho do guia.

Os símbolos que duram foram desenhados como sistema, testados em público e repetidos por décadas

Quando o cliente pediu "ícones mais modernos", Camila, no exemplo didático da agência Mirante, trocou a família inteira de uma vez, e três ações do painel deixaram de ser reconhecidas na semana seguinte. A história dos ícones que atravessaram décadas explica o tropeço. Sobreviveram os que nasceram dentro de um conjunto com regras de grade, traço e proporção, passaram por gente real em estádios, estações e telas, e foram repetidos até virar hábito. Os que envelheceram, como o disquete de "salvar", seguem funcionando enquanto a convenção durar, e é a convenção que a equipe precisa proteger.

Uma linha do tempo de sistemas, e não de desenhos avulsos

Cada marco abaixo entregou um método repetível. As datas vieram de acervos de museus, relatórios oficiais e histórias orais; quando as fontes divergem, a divergência fica escrita.

1. 1925 a 1934 Em Viena, Otto Neurath cria o Método Vienense de Estatística Pictórica, rebatizado Isotype por volta de 1935, para comunicar estatísticas sociais e econômicas ao grande público. Gerd Arntz desenhou cerca de 4.000 pictogramas para o sistema; a entrada dele é datada de 1928 pelo site do espólio e de 1934 por Hartmann. A obra "Gesellschaft und Wirtschaft", de 1930, reuniu 100 pranchas com o mesmo repertório de figuras.
2. 1972 Otl Aicher e equipe desenham os pictogramas dos Jogos de Munique sobre uma grade de coordenadas que fixa as proporções de cabeça, tronco e membros, como descreve o Cooper Hewitt. Wibo Bakker analisou essa "gramática visual" no Journal of Design History em 2023. O conjunto serviu de base ao sistema norte-americano seguinte.
3. 1974 e 1979 O Departamento de Transporte dos Estados Unidos (DOT) encomenda à AIGA símbolos para terminais e estações. Roger Cook e Don Shanosky desenharam 34 em 1974 e mais 16 em 1979, total de 50. A AIGA distribui o conjunto sem custo e a SEGD o descreve como domínio público; como nenhuma fonte aberta traz parecer jurídico, trate como "uso livre declarado pela AIGA".
4. 1981 Norm Cox desenha, para o Xerox Star, as três linhas hoje chamadas de hambúrguer: um contêiner de menu contextual com cerca de 16 por 16 pixels, "como placa de trânsito", lembrando a lista que se abre, segundo a história oral publicada pela InVision.
5. 1982 a 1984 Susan Kare esboça em papel quadriculado, um quadrado por pixel, os ícones do Macintosh, lançado em 1984, como a tesoura e a lixeira. O MoMA guarda o caderno de esboços de 1982 e descreve os ícones como pensados para usuários de qualquer país.
6. Anos 1980 em diante O disquete vira o símbolo de "salvar". Não há fonte primária sobre o primeiro produto que o usou.

Engrenagem, lupa, sino e três pontos ainda não têm origem documentada

A pesquisa deste guia procurou a origem da engrenagem de configurações, da lupa de busca, do sino de notificações e dos três pontos verticais e horizontais (kebab e meatball, no jargão de comunidade de design) e não achou fonte primária para nenhum. O artigo da Uxcel sobre ícones clássicos lista os símbolos sem datar a criação, e este guia prefere a lacuna à vista a uma data sem documento. A falta de certidão não enfraquece o símbolo: o NN/g, no artigo "Icon Usability" de Aurora Harley, de 2014, lista apenas casa, impressora e lupa como ícones de reconhecimento quase universal. A lupa está ali sem autor conhecido, sustentada só pela repetição. Num contrato visual, escreva "menu de mais ações" em vez do apelido, que não é termo oficial de nenhuma biblioteca consultada.

O disquete continua salvando enquanto a convenção durar

Em "Classifying Icons" (NN/g, 2014), Jakob Nielsen separa ícones de semelhança, que retratam o objeto, como o envelope; de referência, que usam analogia, como a morsa de bancada para compressão de arquivo; e arbitrários, que só valem por convenção, como o triângulo de alerta. O disquete fez o percurso inteiro e, para usuários jovens que nunca seguraram um, já é arbitrário, aprendido pela repetição, segundo o mesmo artigo.

Por isso a Mirante manteve o disquete em "Salvar material". A nuvem com seta seria mais "moderna" e mais ambígua, porque também significa sincronizar ou enviar. Substitua um símbolo envelhecido quando o público deixar de reconhecê-lo em teste; enquanto a convenção se sustentar, a troca custa reconhecimento e não entrega nada.

As normas transformaram o método em regra escrita

O que Neurath, Aicher e a AIGA fizeram por método de projeto, as normas fixaram por escrito: registro com número e nome, forma por categoria e teste antes de adotar. A ISO 3864-1:2011 define princípios de desenho para proibição, ação obrigatória, aviso, condição segura e equipamento de combate a incêndio, e a ISO 7010:2019 registra os sinais com prefixos como P, M e W. Conforme a ISO 3864-1, reproduzida na introdução da ISO 7010, proibição é círculo vermelho com barra diagonal, obrigação é círculo azul, aviso é triângulo amarelo com borda preta, condição segura é retângulo verde e incêndio é quadrado vermelho; a tabela não foi lida no texto normativo, que é pago.

O teste é o que mais falta nas agências. A ISO 9186-1:2014, confirmada em 2019, descreve o método de compreensibilidade, e o limiar dela não foi confirmado em fonte aberta. O protocolo do IIID de 1991 registra que a ANSI Z535.3 recomenda 85% de respostas corretas com no máximo 5% de confusões críticas, valores que o relatório da CPSC de 2019 reafirma; a edição vigente da Z535.3 (2022) ficou sem leitura nesta pesquisa.

A lição do sistema cabe numa grade e num traço

Aicher fixou proporções numa grade e Kare desenhou no mesmo quadriculado. Numa campanha, o equivalente é escolher uma família, fixar a grade de 24 por 24 e o traço de referência, e variar o tamanho só em degraus combinados, como na escada abaixo.

Na Mirante, a correção seguiu essa lição. Camila voltou à família original nas três ações do painel, manteve grade e traço e restringiu a novidade pedida à cor de destaque, conferida nos dois temas. Troque a família inteira quando a atual não cobrir os símbolos do projeto ou a licença não servir; quando a queixa for só de aparência, ajuste cor, raio e espaçamento e preserve o desenho que o público já aprendeu. A seção sobre família e proporção detalha o contrato.

Copie o método dos sistemas globais e escolha os números para o seu produto

Os catorze sistemas de design comparados aqui concordam no método e discordam nos números. Os que publicam a anatomia do ícone desenham sobre uma grade com margem interna e fixam um traço; a maioria reserva o preenchido para seleção ou ênfase e recomenda texto ao lado do ícone. Quase nenhum usa o mesmo tamanho de grade, o mesmo traço ou o mesmo raio de canto. A consequência para quem monta páginas e painéis é direta: o time pode copiar o método sem pedir licença a ninguém, mas os números precisam ser escolhidos para o produto, a tipografia e a tela onde o ícone vai aparecer.

No exemplo didático da agência Mirante (nome fictício), Camila abriu essa comparação antes de responder ao cliente que pedia "ícones mais modernos". Ela queria saber se existia um padrão de mercado que justificasse a troca. Encontrou um padrão de método, não de medida, e foi com isso que a equipe definiu o contrato visual da página "Fotografe para vender", do e-mail "Sua vaga está reservada" e do painel interno de campanhas.

Às seis referências que este guia já usava (IBM, Google, Apple, Microsoft, Atlassian e GOV.UK) somam-se oito sistemas com iconografia pública, entre eles o gov.br. O GOV.UK acrescenta uma pergunta útil: o ícone é necessário para a pessoa concluir a tarefa? Consulta em 22 de outubro de 2026; "não declarado" indica que a documentação não traz o número, e "não levantado", que o dado ficou fora desta rodada.

A especificação do Polaris vive hoje no arquivo-fonte do repositório oficial, e a do SLDS, na versão arquivada spring-20 hospedada pela Salesforce. Confira a data da consulta antes de citar um número da tabela.

Grade, área viva e keylines: o que todos fazem igual

Todo sistema que publica a anatomia do ícone reserva uma margem entre a caixa do arquivo e o desenho. No Material 3, o ícone padrão mede 24 × 24 dp e o conteúdo fica limitado a uma área viva de 20 × 20 dp, com 2 dp de margem em volta. O Polaris faz a mesma conta em escala menor: contêiner de 20 × 20 px e área segura de 16 × 16 px, que "nenhuma parte do ícone pode ultrapassar". O SLDS repete a ideia, com área viva de 48 px num quadro de 52 nos ícones utility.

A margem existe para que ícones diferentes pareçam ter o mesmo tamanho. Um círculo parece menor que um quadrado com as mesmas medidas, e as keylines corrigem isso: no Material 3, o quadrado de referência mede 18 dp e o círculo, 20 dp; no Polaris, 13 × 13 px e 14 × 14 px. O próprio Polaris chama essas linhas de ponto de partida, sem rigidez. Ant Design, Spectrum 2, Atlassian e Octicons publicam formas de referência sem cotas, o que confirma o método e deixa o número a cargo de quem desenha.

Dois acordos completam a lista. Os ícones são frontais e bidimensionais (Material, Polaris, Atlassian e SLDS vetam perspectiva), e os tamanhos vêm desenhados, em vez de ampliados: o Octicons escreve "não redimensione ícones", e o Material pede desenho na escala natural e oferece tamanhos ópticos de 20, 24, 40 e 48 dp. Use o ícone no tamanho para o qual a família foi desenhada ou numa escala que ela documente.

Traço de 1,5 px em 16 a 20 px e de 2 px em 24: a conta que muda com a escala

O traço converge em dois valores, e o que separa um do outro é o tamanho do desenho. Polaris (em 20 px), Spectrum 2 (em 20 px), Octicons (em 16 e 24 px) e Atlassian (em 16 px) usam 1,5 px. O Material recomenda 2 dp sobre 24 dp, equivalente ao peso 400 da fonte variável. O SLDS deixa a regra explícita ao escalar o traço com a grade: 1 px em 16, 2 px em 24 e 32, 4 px em 48 e 6 px em 60.

A Atlassian mostra por que a conta depende da escala. O sistema legado, com mais de 350 ícones, usava traço de 2 px em canvas de 24 px, descrito pela própria equipe como "visualmente pesado" no texto de lançamento do novo sistema, de 8 de setembro de 2025; o redesenho passou a 1,5 px em 16 px. O Spectrum foi de canvas de 18 px com traço de 1 ou 2 px, em 2018, a 20 px com 1,5 px no Spectrum 2, em 2023.

Em proporção, 2 px em 24 e 1,5 px em 20 ficam próximos, entre um doze avos e um treze avos do canvas. Para quem usa uma única família de contorno, a recomendação é manter o traço proporcional quando o ícone cresce e fixá-lo em pixels quando o ícone diminui. A seção Família e proporção mostra como fazer isso com Lucide e Material Symbols.

Preenchido significa selecionado, em quase todos

O contorno é o estado neutro e o preenchido é seleção ou ênfase, com uma regularidade rara em design. O Fluent 2 usa regular para orientar e filled para "estados selecionados". A Apple indica o fill para a tab bar do iOS e o contorno para a toolbar. O Polaris reserva o preenchido "estritamente" à navegação principal do admin e a estados semipermanentes, e o Octicons veta o preenchido para estados "desligado" ou "vazio".

A regra funciona como gramática: se o preenchido diz "selecionado", um preenchido decorativo em outro lugar passa a mentir. Foi o que aconteceu no exemplo didático da Mirante quando a primeira resposta ao pedido de "ícones mais modernos" trocou a família inteira por desenhos preenchidos. No painel, filtros ativos e inativos ficaram iguais, e três ações deixaram de ser reconhecidas. A correção começou por esta tabela: contorno no estado neutro, preenchido só no item ativo da navegação.

SLDS e gov.br fogem da regra porque escolheram o sólido como estilo padrão. Com família sólida, o estado selecionado precisa de outro sinal (cor, fundo, sublinhado ou texto), e esse sinal vai para o contrato.

Espelhar ou não: só Material e Fluent declaram

Entre os catorze sistemas, apenas dois dizem o que fazer com ícones em idiomas escritos da direita para a esquerda. O Material publica uma lista literal; o Fluent marca cada ícone no metadata.json como mirror (pode ser espelhado) ou unique (tem versões _ltr e _rtl). A Apple diz que as variantes do SF Symbols se adaptam sozinhas, sem listar quais espelham. Os outros onze não declaram.

Para a agência que publica em português, espanhol e inglês, o detalhe útil da lista é outro: números dentro de ícones precisam ser localizados quando o idioma usa outros numerais.

Onde os sistemas discordam

A grade base é a primeira discordância e não tem vencedor: 16 px (Atlassian, SLDS utility, Octicons), 20 px (Polaris, Spectrum 2), 24 px (Material, Octicons, Atlassian legado), 1024 unidades (Ant Design) e 20 × 16 px (Font Awesome, no gov.br). O raio acompanha: 2 dp no Material, 1 px no Octicons, de 1 a 3 px no Polaris, 72 unidades no Ant Design. No estilo padrão, contorno em Spectrum 2, Apple, Atlassian, Polaris, Octicons e Fluent; sólido no SLDS utility e no gov.br. Nenhum grupo está errado; o erro é misturar os dois sem dar significado à diferença.

O tamanho mínimo para interação é a discordância com mais efeito prático. O Fluent declara 12 px "pequeno demais para interações"; Atlassian, Octicons e Acorn aceitam 12 px só em usos listados, como chevrons e selos. O gov.br e o SLDS resolvem pela área de toque: clique mínimo de 24 × 24 px e toque de 48 × 48 px no gov.br; 48 px no Android, 44 px no iOS e 8 px entre ícones no SLDS. O piso normativo é a WCAG 2.2, critério 2.5.8, nível AA (tamanho do alvo, mínimo), com 24 × 24 CSS px ou espaçamento equivalente; o critério 2.5.5, nível AAA (tamanho do alvo, aprimorado), pede 44 × 44 CSS px.

As licenças surpreendem quem copia ícones de um sistema para outro. Os ícones de sistema do Fluent são MIT, e o template do Material, Apache 2.0. A Apple proíbe SF Symbols, ou imagens "confusamente parecidas", em ícones de app, logotipos e usos de marca. A Atlassian veta a parceiros o Icon Lab experimental, e a lista completa do Base Web fica restrita a funcionários da Uber.

Como a Mirante escolheu seus números

Com a tabela pronta, Camila e Otávio fixaram os números das três peças do exemplo didático da Mirante, cada um ancorado num sistema e na tipografia do projeto. Na página "Fotografe para vender", com corpo de texto grande e leitura no celular, os ícones ficam em 24 px com traço 2: a convenção do Material e do Acorn mobile e o padrão da Lucide, a família que o projeto já usava.

No painel interno, denso e com fonte menor, a escolha foi 20 px com traço de 1,5 px, a convenção de Polaris e Spectrum 2 para interface administrativa. Com a Lucide, isso exige ajustar o traço, porque o padrão 2 desenhado para 24 vira cerca de 1,67 px em 20 px. O alvo ficou em 44 × 44 CSS px nas duas telas, acima do mínimo do critério 2.5.8 e igual ao do critério 2.5.5. Essas referências convergem em coerência e significado, mas divergem nos números. Tamanho de 24 px, traço de 2 px e alvo de 44 px podem formar um contrato de projeto. Apresente esse contrato como escolha da equipe, separado dos requisitos de acessibilidade.

Use esse arranjo quando a mesma equipe entrega página promocional e ferramenta interna; se o projeto tiver uma só tela densa, um único tamanho de 20 px resolve com menos manutenção. O benchmark compara orientações publicadas, sem medir conversão entre marcas. Para decidir se um ícone ajuda a sua página, observe se as pessoas encontram a ação, interpretam o resultado e concluem a tarefa. Beleza isolada não responde a essas perguntas, e o teste está em teste de compreensão.

Use uma família por projeto e trate a troca de família como decisão do projeto inteiro

Escolha uma família principal para os controles e registre tamanho, traço e cor. No exemplo didático da agência Mirante (nome fictício), essa regra foi aprendida pelo caminho caro. O cliente do curso de fotografia de produto pediu "ícones mais modernos", e a primeira versão trocou a Lucide, de contorno, por desenhos preenchidos de outra biblioteca nas três peças ao mesmo tempo. No painel, três ações deixaram de ser reconhecidas porque o preenchido, que marcava o filtro ativo, passou a aparecer em tudo. No e-mail "Sua vaga está reservada", os ícones novos, escuros, sumiram no modo escuro.

Otávio desfez a troca, e a equipe tirou dela a regra desta seção: o pedido de "moderno" se resolve dentro da família, ajustando traço, raio ou peso; a troca de família é decisão do projeto inteiro, com inventário dos símbolos, nova conferência de contraste e novo teste de compreensão. Lucide combina com o padrão já usado neste portal. Heroicons, Phosphor e Tabler oferecem alternativas; a decisão deve considerar cobertura dos símbolos, arquivos disponíveis e licença.

Quantidades como declaradas nas páginas oficiais em 22 de outubro de 2026. Elas mudam a cada versão; cite como "mais de N", com data. O antigo Material Icons está congelado desde 2022, segundo o repositório do Google.

Tamanho óptico: o círculo e o triângulo não têm o mesmo centro

A caixa do arquivo pode medir 24 × 24 e o desenho ocupar menos espaço. Compare o centro aparente de um círculo e de um triângulo junto ao texto; a mesma coordenada nem sempre produz o mesmo equilíbrio. Tamanho óptico é o ajuste do desenho para continuar legível na escala de uso.

As keylines fazem essa correção no desenho, e a família boa já chega corrigida: o círculo de referência do Material mede 20 dp e o quadrado, 18 dp, para que os dois pareçam do mesmo tamanho. O trabalho da equipe é não desfazer o ajuste, seja "corrigindo" à mão um ícone que parecia alto, seja trazendo um símbolo de outra família, desenhado sem keylines, para o meio da fila.

No painel do exemplo didático, o triângulo de alerta parecia mais baixo que o círculo ao lado. A família estava certa; o botão alinhava pela linha de base do texto. Antes de mexer no desenho, confira o alinhamento do contêiner.

O traço que escala e o traço que não escala

Num SVG de contorno, o traço é medido nas unidades do viewBox, e por isso cresce e encolhe com o ícone. A Lucide desenha em 24 × 24 com traço 2: em 24 px o traço tem 2 px; em 16 px, cerca de 1,33 px; em 48 px, 4 px. A escada abaixo mostra o mesmo ícone em cinco tamanhos com o traço proporcional.

Em 32 e 48 px, o traço proporcional deixa o ícone pesado; em 16 px, fino e perto do limite de nitidez. Os sistemas globais resolvem de dois jeitos. O Octicons fixa 1,5 px em 16 e em 24, desenhando duas versões; o SLDS escala o traço com a grade, mas em degraus (1, 2, 4 e 6 px). Para a equipe que usa uma família só, a saída é fixar o traço em pixels por faixa de tamanho. Na Lucide, os componentes de framework oferecem a propriedade absoluteStrokeWidth, que mantém a espessura em pixels independentemente do tamanho; a página específica da documentação devolveu erro na consulta de 22 de outubro de 2026, por isso confira o comportamento na versão instalada. Em SVG puro, a conta é direta: traço desejado em px multiplicado por 24 e dividido pelo tamanho de exibição.

/* Lucide: viewBox 24 × 24. stroke-width = traço desejado × 24 ÷ tamanho */
.icon { width: 24px; height: 24px; stroke-width: 2; }      /* página: 2 px reais */
.icon--painel { width: 20px; height: 20px; stroke-width: 1.8; } /* painel: 1,5 px reais */
.icon--16 { width: 16px; height: 16px; stroke-width: 2.25; }    /* 1,5 px reais em 16 px */

/* Alternativa do próprio SVG: o traço ignora a escala do desenho */
.icon--fixo path { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }

O Material Symbols faz o mesmo ajuste por eixos da fonte variável. O eixo opsz, de 20 a 48, redesenha o símbolo para o tamanho de uso; o eixo wght, de 100 a 700, muda a espessura; o eixo GRAD, de -50 a 200, faz o ajuste fino de espessura, separado do peso, com padrão 0. Os eixos pertencem à família; não aplique esses parâmetros a outro conjunto.

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Item ativo da navegação: preenchido, com o mesmo peso e tamanho óptico */
.nav-item[aria-current="page"] .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

Preenchido, contorno e duas tonalidades: o que cada variação significa no projeto

Cada variação da família precisa de um significado escrito, e o significado mais seguro é o que os sistemas globais já usam. Contorno é o estado neutro; preenchido é seleção ou ênfase, como fazem Fluent 2, Apple, Polaris e Octicons (a comparação completa está em Referências globais). Duas tonalidades ficam para pictogramas e ilustrações de serviço, fora dos controles.

Com os seis pesos da Phosphor, a regra falha quando Thin, Bold e Duotone dividem a tela porque "ficaram bonitos". Defina um peso padrão e o significado de cada variação; peso sem função escrita é mistura de família, mesmo dentro do mesmo pacote.

Exceções documentadas: marca de parceiro, pictograma de serviço, símbolo que falta

Uma marca de parceiro pode conviver com a família dos controles porque identifica outra coisa. Preserve suas regras próprias e deixe a exceção registrada. Evite substituir símbolos de interface por emojis: aparência e leitura podem variar entre plataformas. As regras de marcas de redes e meios de pagamento estão em aplicações, e as do emoji, em emoji.

O pictograma de serviço é a segunda exceção legítima. Ele é maior, tem mais detalhe e pode usar duas tonalidades; a IBM separa ícones de interface, de 16 a 32 px, de pictogramas, a partir de 48 px, com regras próprias. Na página da Mirante, os cartões de benefício usam pictogramas da mesma família em tamanho grande, e o contrato registra isso como uso distinto dos botões.

O símbolo que falta é a exceção que mais gera deriva. Ao auditar seus produtos para o novo sistema de 2025, a Atlassian encontrou mais de 1.000 ícones customizados. O procedimento que evita isso: procure na família escolhida, com sinônimos; depois no Iconify, filtrando pelo mesmo conjunto; só então desenhe, na mesma grade, traço e raio, e registre o arquivo no contrato. O gov.br formaliza o mesmo caminho: ícone novo segue "todas as características visuais de construção" do Font Awesome Solid e passa por validação da equipe de Design.

Licença viaja com o arquivo

A licença acompanha cada SVG copiado, inclusive quando o agente de código cola o desenho direto no componente. A Lucide sai sob ISC, que permite uso, alteração e distribuição desde que o aviso de copyright e a permissão acompanhem as cópias; o arquivo de licença registra também que parte dos desenhos vem do Feather, de Cole Bemis, sob MIT, e esse aviso segue junto. O Font Awesome 7 Free combina três licenças (CC BY 4.0 nos ícones, SIL OFL 1.1 nas fontes e MIT no código) e exige atribuição, que os arquivos baixados já trazem em comentários: um minificador que apaga comentários apaga a atribuição.

Duas licenças pedem leitura antes do uso comercial. O Remix Icon deixou a Apache 2.0 em janeiro de 2026 pela Remix Icon License v1.0, que permite uso comercial e alteração de cor e traço, mas proíbe revender os ícones como pacote e usá-los como logotipo. O Simple Icons é CC0 e avisa que não responde por questões levantadas pelas marcas: a licença livre do SVG não autoriza o uso da marca.

O SF Symbols fica fora da web por licença. A página pública da Apple proíbe usar os símbolos, ou imagens parecidas a ponto de confundir, em ícones de app, logotipos e usos de marca; o contrato completo vem no instalador. A licença da fonte San Francisco, publicada pela Apple, limita o uso a mock-ups de interfaces para as plataformas da empresa. Para página de captação, e-mail e painel web, escolha outra família.

Quando o cliente da Mirante voltou a pedir algo "mais moderno", a resposta já tinha forma: raio de canto um pouco maior e traço de 1,5 px no painel, dentro da Lucide, com o contrato atualizado em uma linha. Use a troca de família quando o projeto inteiro mudar de identidade e houver tempo para o inventário e os testes; abaixo disso, ajuste traço, raio e peso dentro da família que já funciona.

Deixe o ícone herdar a cor e meça o contraste no fundo real, nos dois temas

O ícone que some no modo escuro quase nunca tem a cor errada no arquivo de design. Ele tem a cor certa num fundo que ninguém mediu. No exemplo didático da agência Mirante (nome fictício), os ícones do e-mail "Sua vaga está reservada" foram exportados em PNG escuro com fundo transparente. No navegador e no tema claro, estavam perfeitos. Em clientes que invertem as cores da mensagem, o fundo ficou escuro e os ícones continuaram escuros, até desaparecer.

Esta seção fixa a regra que evitou a repetição do problema na página e no painel: na web, o ícone herda a cor do texto pelo currentColor, a cor vem de um token que muda com o tema, e o contraste é medido no fundo onde o ícone aparece, em claro e em escuro. Os pisos são da WCAG 2.2: 3:1 para informação gráfica necessária à compreensão (critério 1.4.11, nível AA, contraste não textual) e 4,5:1 para o texto ao lado do ícone (critério 1.4.3, nível AA, contraste mínimo).

currentColor e tokens: uma cor, dois temas

Com o atributo stroke="currentColor", o traço do SVG usa a cor calculada do elemento que o contém. O botão define a cor uma vez, pelo token, e o ícone e o rótulo mudam juntos quando o tema troca. Token é um valor nomeado, como a cor de texto ou o tamanho do controle; o par de tokens abaixo usa as cores deste portal.

/* Tema claro: valores padrão */
:root {
  --surface: #faf9f7;
  --ink: #1f2024;
  --accent: #99264a;
  --focus: #99264a;
}
/* Tema escuro: os mesmos nomes, outros valores */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #17191f;
    --ink: #f6f3f4;   /* tinta clara, não branco puro */
    --accent: #ffacc7;
    --focus: #ffacc7;
  }
}
:root[data-theme="dark"] {
  --surface: #17191f; --ink: #f6f3f4; --accent: #ffacc7; --focus: #ffacc7;
}

body { background: var(--surface); color: var(--ink); }
.link-acao { color: var(--accent); }

/* O SVG não declara cor: herda do elemento pai */
.link-acao svg { stroke: currentColor; fill: none; }

O ganho do currentColor é de manutenção: nenhuma cor mora no arquivo do ícone. Ele funciona com SVG inline e sprite, mas não com SVG em <img>, porque o CSS da página não entra no documento externo, nem no e-mail, onde o ícone chega como PNG de cor fixa. Nesses casos, a cor do arquivo precisa ser testada em todos os fundos possíveis.

Medir no fundo real

O contraste que vale é entre a cor do ícone e a cor imediatamente atrás dele; o fundo da página só entra na conta quando é essa cor. Um ícone dentro de um cartão colorido, de um selo de estado ou de um botão preenchido tem como fundo o cartão, o selo ou o botão. As amostras abaixo são pares usados neste portal.

Os três pares de estado ficam acima de 4,5:1 segundo a medição do projeto em 22/10/2026, o que cobre o texto do selo e, com folga, o piso de 3:1 do ícone. Meça de novo sempre que um token mudar.

Meça com o inspetor de contraste do navegador sobre o elemento renderizado, nos dois temas. A fórmula aplicada aos tokens falha com transparência, porque o fundo com opacidade parcial gera uma cor que só existe na tela.

Traço fino some antes do contraste cair

Um par de cores aprovado ainda pode produzir um ícone ilegível, porque o traço fino não chega à tela com a cor do token. Um traço de 1 px que não coincide com a grade de pixels se espalha por duas colunas com intensidade parcial, e a cor exibida vira uma mistura do traço com o fundo. O contraste medido no token é maior que o contraste visto. É por isso que o Polaris pede que um lado do traço de 1,5 px fique sempre alinhado à grade de pixels, e que o Octicons não aceita redimensionar ícones fora dos tamanhos desenhados.

O problema aparece em 16 px com a família de traço proporcional: a Lucide, com traço 2 em 24, chega a cerca de 1,33 px em 16 px, e em escalas de tela fracionárias o traço cai entre pixels. Use 16 px com traço fixado em 1,5 px quando o ícone carregar informação; para ícone só decorativo ao lado de texto, o traço proporcional basta. A conta de traço por tamanho está em Família e proporção, e a comparação entre sistemas, em Referências globais.

Estado nunca só pela cor

A cor reforça o estado, mas não pode ser o único sinal. Cerca de 1 em 12 homens tem deficiência de visão de cores, segundo o National Eye Institute em página atualizada em 2025, e o tipo mais comum dificulta separar vermelho e verde, que são justamente as cores de sucesso e falha na maioria dos painéis. A WCAG 2.2 trata disso no critério 1.4.1, nível A (uso da cor): a cor não pode ser o único meio visual de transmitir informação.

Forma, texto e cor andam juntos. No painel da Mirante, "Envio concluído" usa círculo com marca de confirmação, "Envio falhou" usa círculo com X e "Em processamento" usa um ícone estático de ampulheta, cada um com a frase escrita ao lado. Retirada a cor, os três continuam diferentes. A oficina de estados visuais permite fazer esse teste com a versão neutra ligada.

Tema escuro: branco puro cansa e cinza médio some

No tema escuro, dois erros opostos aparecem com frequência. O primeiro é usar #ffffff para texto e ícones sobre um fundo quase preto: é o maior brilho que a tela consegue produzir, e em traço fino o branco parece espalhar sobre o fundo. Use uma tinta clara levemente quente, como o token #f6f3f4 deste portal, que mantém o par muito acima de 4,5:1 com menos brilho. A troca custa uma linha no arquivo de tokens.

O segundo erro é levar para o escuro o cinza médio que servia de texto secundário no claro. Ele fica perto do fundo escuro, e o ícone de apoio desenhado nele é o primeiro a sumir. Defina o cinza secundário como token próprio de cada tema e meça-o contra o fundo escuro, como o portal faz com o acento, que passa de #99264a a #ffacc7.

Ícone colorido de marca em tema escuro

Ícone de marca é a exceção ao currentColor, porque a cor pertence à marca e não ao tema. O manual do WhatsApp, publicado pela Meta, diz que as cores dos logotipos não devem ser modificadas. Recolorir o ícone para casar com o tema, portanto, está fora de questão, e restam duas saídas.

No e-mail, o Litmus descreve em guia atualizado em fevereiro de 2025 três comportamentos de modo escuro: clientes que não mudam as cores (como Apple Mail e Gmail no desktop), clientes que invertem só os fundos claros (como Outlook.com e o app do Gmail no Android) e clientes que invertem tudo (como o Outlook 2021 no Windows e o app do Gmail no iOS). Para PNG transparente com traço escuro, a recomendação é acrescentar um contorno translúcido ou uma forma de fundo. Foi o que corrigiu o e-mail da Mirante: os ícones ganharam uma placa clara arredondada, e o botão "Confirmar minha vaga" já estava em texto. O roteiro completo está em e-mail sem imagem.

Foco visível com a mesma disciplina de tokens

O botão só com ícone precisa mostrar onde está o foco do teclado. A WCAG 2.2 exige isso no critério 2.4.7, nível AA (foco visível), e o indicador de foco, como informação gráfica, entra no piso de 3:1 do critério 1.4.11. Use o token de foco de cada tema e um anel externo que não dependa da cor do botão.

/* Foco só para teclado; o token troca com o tema */
.icon-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Modo de alto contraste do sistema: deixa o navegador escolher a cor */
@media (forced-colors: active) {
  .icon-button:focus-visible { outline-color: Highlight; }
}

No exemplo didático, a Mirante passou a conferir cada entrega do mesmo jeito: trocar o tema, medir ícone e texto nos fundos reais e navegar por Tab até o último botão. Repita a rotina inteira quando um token mudar; com tokens estáveis, a amostragem de três telas basta.

Um ícone é uma convenção local: conferir o significado por país e por canal faz parte do trabalho

No exemplo didático da agência Mirante, duas perguntas do cliente chegaram na mesma semana. Dá para pintar o símbolo do Pix no verde-limão do curso? E se a página "Fotografe para vender" ganhar versão para lojistas de outros países, a tabela de preços com marca de verificação e X continua valendo? As duas têm resposta documentada, e nenhuma é "depende do gosto": o Banco Central fixa as cores do Pix em manual, a leitura do X e do círculo muda no Japão e a direção das setas muda em árabe e hebraico. Esta seção separa o que foi conferido em fonte do que só circula em blogs e transforma isso em conferência de rotina.

Direção de leitura: o que espelha e o que não espelha

Em idiomas lidos da direita para a esquerda (RTL), espelhe o ícone que aponta para onde a leitura vai e preserve o que representa objeto físico ou tempo que corre no mesmo sentido em toda parte. A lista abaixo vem da página "Bidirectionality" do Material Design, versão 1, lida na íntegra.

A página "Right to left" das diretrizes da Apple é carregada por JavaScript e não pôde ser lida nesta pesquisa, e o conteúdo dela fica não confirmado. No Android, o Compose oferece o grupo Icons.AutoMirrored, que espelha sozinho. Com versão RTL, aplique a lista; sem ela, use-a para não espelhar por engano um ícone que o tradutor marcou como "seta".

Certo e errado mudam de forma no Japão

A tabela de preços que marca o incluído com verificação e o excluído com X carrega uma convenção ocidental. Segundo guias de língua e cultura japonesa (Japanese with Anime, MLC Japanese e nippon.com), o círculo, maru, marca correto ou permitido; o X, batsu, marca errado ou cancelado; o triângulo, sankaku, marca "mais ou menos". Em provas escolares, o erro recebe X ou, para surpresa de estrangeiros, uma marca de verificação. No PlayStation vendido no Japão, o círculo confirma e o X cancela; nas versões internacionais, o X confirma.

Essas fontes são de divulgação e vieram de resultado de busca. Sustentam uma conclusão estreita: para público japonês, a verificação sozinha pode ser lida como erro, e o X sozinho não diz "não incluído" de forma neutra. Escreva a palavra ao lado do símbolo em qualquer mercado e, no japonês, teste o círculo no lugar da verificação. Circula que na Suécia e na Finlândia a verificação marcaria erro escolar; sem fonte localizada, isso fica como não confirmado.

Gestos, animais e objetos

O polegar para cima, o gesto de OK com polegar e indicador em círculo (descrito como insulto no Brasil), a coruja, a caixa de correio com bandeirinha, o cofrinho em forma de porco e a casa de telhado de duas águas aparecem em guias de viagem e blogs como símbolos que mudam de leitura entre países, mas são relatos de prática sem estudo localizado nesta pesquisa, e quem decide se servem ao público da página é o teste de compreensão feito com esse público.

Cor: vermelho e branco não significam o mesmo em toda parte

O vermelho que no Ocidente marca erro é, na China e em boa parte da Ásia Oriental, cor de prosperidade e sorte, presente no Ano Novo Lunar e no vestido de noivas, segundo textos de divulgação como o da revista The Look, da Dublin City University (2025), e o blog Migaku. O branco é cor de luto na China, na Coreia e na Índia, conforme as mesmas fontes e um material da York University, do Canadá. Nenhuma é acadêmica, e todas vieram de resultado de busca.

A implicação não depende de qual leitura está certa. Erro comunicado só pelo vermelho falha para quem lê vermelho como bom sinal e, em qualquer país, para quem não distingue vermelho de verde. Estado leva forma distinta, palavra e cor como reforço, como pede a WCAG 2.2 no critério 1.4.1, nível A, uso da cor; a oficina de estados visuais confere retirando as cores.

Brasil: Pix, bandeiras e selos têm dono e manual

A resposta ao cliente da Mirante sobre o verde-limão é não, e está escrita. O "Manual de Uso da Marca" do Pix, versão 1.6, publicado pelo Banco Central em 14 de maio de 2025 e lido nas 40 páginas, define que em peças digitais, impressos e comércio eletrônico o símbolo usa só o verde Pix e o preto, com branco em fundo escuro, e veda "quaisquer outros matizes". O verde Pix é o Pantone 7472 C, hexadecimal #77B6A8. Só em ambiente digital restrito, em que a plataforma inteira usa ícones de menu, o símbolo assume a cor do sistema.

9,0:1 Verde Pix com preto, contraste calculado para este guia. O ícone genérico de carteira ocupa o lugar do símbolo, porque o manual proíbe redesenhar a marca e manda usar os arquivos do Banco Central.

As demais bandeiras não tiveram o manual aberto nesta pesquisa. Da Visa, o que se sabe veio de trecho de busca do documento "Visa Brand Standards" de setembro de 2025: azul Visa em fundo claro, versão branca em fundo escuro, área de proteção igual à altura do V e tamanho mínimo descrito apenas como o que mantém a marca legível. Da Mastercard, também por trecho de busca do Brand Center, a área de proteção é de um quarto da largura de um dos círculos do símbolo, e o tamanho mínimo numérico não apareceu. O toolkit da Elo foi localizado, mas o arquivo não abriu, e os valores ficam não confirmados. Quando a página exibir essas bandeiras, peça o kit ao adquirente ou ao canal oficial de aceitação e use os arquivos e medidas de lá.

Selos de reputação e segurança seguem a mesma lógica com menos documentação ainda. Os termos de exibição do selo RA1000, do Reclame Aqui, e do selo Site Blindado não foram localizados; os critérios do RA1000 que circulam vêm de fontes secundárias. Exiba um selo desses só depois de receber o kit oficial e as condições de uso do emissor por escrito, e só enquanto a condição que ele atesta continuar verdadeira.

A lei e a norma brasileiras pedem acessibilidade e um símbolo em destaque

A Lei Brasileira de Inclusão (Lei nº 13.146, de 2015), no artigo 63, conforme a publicação original no site da Câmara dos Deputados, torna "obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo", seguindo "as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente". O parágrafo primeiro acrescenta: "Os sítios devem conter símbolo de acessibilidade em destaque." A obrigação alcança empresas privadas, e por isso alcança a página de captação de um cliente de agência.

Antes da lei, o Decreto nº 5.296, de 2004, no artigo 47, já exigia acessibilidade nos portais da administração pública e um símbolo de acessibilidade nas páginas de entrada. Na norma técnica, a referência para web é a ABNT NBR 17225:2025, publicada em março de 2025 e desenvolvida a partir da WCAG 2.2, segundo material do Ceweb.br; o título exato dela não foi confirmado. Há uma confusão frequente a corrigir: a ABNT NBR 17060:2022 trata de acessibilidade em aplicativos de dispositivos móveis; páginas web ficam na NBR 17225. Use a NBR 17225 e a WCAG 2.2 como critério para páginas e e-mails; reserve a NBR 17060 para o aplicativo do cliente, quando houver.

Uma tabela para conferir antes de publicar em outro mercado

A Mirante fechou as duas perguntas do cliente com essa tabela aberta. O botão de pagamento ficou com o símbolo Pix original em verde e preto, na mesma altura das outras bandeiras, e o verde-limão do curso foi para o botão de texto ao lado. A versão para outros mercados ainda não existe, mas o contrato visual da página já registra que "Incluído" e "Não incluído" vão escritos em cada linha da tabela de preços, de modo que a tradução troque palavras e não precise redesenhar símbolos. Faça o mesmo quando houver qualquer chance de a peça sair do Brasil: escreva a regra hoje, enquanto a mudança custa uma linha de texto.

Cada superfície pede uma regra própria de texto, formato e estado para o mesmo ícone

Escreva primeiro a ação ou a informação e só depois escolha o símbolo que a reforça. No exemplo didático da agência Mirante, essa ordem salvou a segunda versão das três peças do curso de fotografia de produto. A primeira, feita para atender ao pedido de "ícones mais modernos", trocou a família inteira por desenhos preenchidos de outra biblioteca: três ações do painel deixaram de ser reconhecidas e os ícones do e-mail "Sua vaga está reservada" sumiram no modo escuro. O mesmo cadeado muda de exigência numa página, num formulário, numa caixa de entrada ou numa tabela de operação. Os exemplos abaixo vêm organizados por superfície, usam a mesma família e são propostas de aplicação: adapte rótulos, dados e destino ao serviço real antes de publicar. Nenhum representa tela ou funcionalidade oficial da Leadlovers.

Página de captação: o símbolo reforça a promessa e o botão diz a ação

Na página "Fotografe para vender", cada ícone tem um trabalho: mostrar que existe um arquivo, indicar que o botão leva adiante, abrir uma resposta ou identificar um canal. Nos cards de benefícios, associe cada pictograma a uma promessa específica: "Fotos com luz natural" combina com câmera, "Fundo limpo para o catálogo" pede imagem, "Mais pedidos na loja" pede sacola. Um foguete repetido em todos os cards torna as diferenças mais difíceis de perceber.

Na prova social, estrelas de avaliação vêm com nota, quantidade e origem (por exemplo, "4,8 de 5 em 312 avaliações no site do curso"), porque estrela sem fonte é só um desenho amarelo. Depoimentos levam foto e nome autorizados no lugar do ícone genérico de pessoa.

O trecho abaixo junta o botão principal e uma pergunta frequente. Os dois ícones vêm do sprite local (ver a oficina do sprite acessível) e ficam ocultos para leitores de tela, porque o texto visível já nomeia cada controle, como pede a WCAG 2.2 no critério 1.1.1, nível A, conteúdo não textual.

<a class="cta" href="#inscricao">
  Quero minha vaga
  <svg class="icon" width="20" height="20" aria-hidden="true" focusable="false">
    <use href="#i-arrow-right"/>
  </svg>
</a>

<details class="faq">
  <summary>
    O curso tem certificado?
    <svg class="icon" width="20" height="20" aria-hidden="true" focusable="false">
      <use href="#i-chevron-down"/>
    </svg>
  </summary>
  <p>Sim. O certificado é liberado ao concluir todas as aulas.</p>
</details>

<style>
  /* o chevron gira quando a resposta está aberta */
  .faq[open] summary .icon { transform: rotate(180deg); }
  .cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
</style>

Checkout: selos e bandeiras ajudam quando são verdadeiros e estão perto do cartão

A desconfiança no pagamento tem custo: 19% dos respondentes abandonaram um checkout nos últimos três meses por não confiar o cartão ao site, segundo levantamento do Baymard Institute de 2025 com 1.026 pessoas. No estudo "Which Site Seal do People Trust the Most?", também do Baymard, o selo Norton foi o que mais transmitiu confiança em 2013, com cerca de 36% de quem escolheu um selo entre 2.510 respostas, e na atualização de 2023 um selo "caseiro", sem empresa terceira por trás, superou os selos SSL de fornecedores conhecidos, com exceção do Norton. Os números do Baymard citados aqui vieram de resultados de busca, sem leitura completa das páginas, e medem confiança percebida; segurança técnica é outra medição.

Delimite os campos de pagamento com borda ou fundo e ponha a indicação de segurança perto deles, orientação associada ao levantamento de 2025. Não fabrique credencial: um escudo com "Compra totalmente segura" desenhado pela agência não atesta nada. A marca Pix segue o manual do Banco Central, em paridade de altura com as demais bandeiras, como detalha localização e cultura.

Formulário: erro com ícone, texto e cor, e ajuda que não some

No formulário de inscrição, o ícone tem três funções e nenhuma delas substitui a frase. O erro precisa de símbolo de alerta, mensagem que diga o que corrigir e cor como reforço, porque a WCAG 2.2 exige no critério 3.3.1, nível A, identificação do erro, que o erro seja descrito em texto, e no critério 1.4.1, nível A, uso da cor, que a cor não seja o único meio. A ajuda fica visível perto do campo; a dica que só aparece no passar do mouse não chega a quem usa toque.

<label for="email">E-mail</label>
<input id="email" type="email" autocomplete="email"
  aria-invalid="true" aria-describedby="email-erro">
<p id="email-erro" class="erro">
  <svg class="icon" width="16" height="16" aria-hidden="true" focusable="false">
    <use href="#i-circle-alert"/>
  </svg>
  Falta o @. Exemplo: nome@loja.com.br
</p>

<label for="senha">Senha</label>
<input id="senha" type="password" autocomplete="new-password">
<button type="button" class="ver-senha" aria-controls="senha" aria-pressed="false">
  <svg class="icon" width="20" height="20" aria-hidden="true" focusable="false">
    <use href="#i-eye"/>
  </svg>
  Mostrar senha
</button>

<script>
  const botao = document.querySelector('.ver-senha');
  botao.addEventListener('click', () => {
    const campo = document.getElementById('senha');
    const visivel = campo.type === 'text';
    campo.type = visivel ? 'password' : 'text';
    botao.setAttribute('aria-pressed', String(!visivel));
    // troca o desenho entre olho e olho riscado; o texto do botão não muda
    botao.querySelector('use').setAttribute('href', visivel ? '#i-eye' : '#i-eye-off');
  });
</script>

Tabela de preços: marca de verificação e X sempre com a palavra

Numa tabela de planos, o símbolo resume e a palavra decide. Escreva "Incluído", "Não incluído" ou "Só no plano completo" em cada célula, com o ícone como apoio visual. A regra protege três públicos: quem usa leitor de tela, que ouviria "imagem" ou nada; quem não distingue verde de vermelho; e quem lê a convenção de outro jeito. No Japão, o X marca errado ou cancelado e a marca de verificação pode marcar erro em provas escolares, segundo as fontes de divulgação reunidas em localização e cultura.

E-mail: ícone em PNG repetindo o texto, e a ação sempre escrita

No e-mail "Sua vaga está reservada", o ícone decora e o texto informa, nesta ordem de importância. Clientes de e-mail podem bloquear imagens e tratam SVG de forma diferente conforme o aplicativo e a versão, então o ícone vai como PNG com largura e altura declaradas, o texto ao lado diz a mesma coisa e o botão é texto com fundo colorido em vez de imagem. Como o ícone repete a frase, o atributo alt fica vazio, para o leitor de tela não anunciar duas vezes.

Na primeira versão da Mirante, os ícones eram PNG de traço preto com fundo transparente, e alguns aplicativos escureceram o fundo do e-mail sem inverter a imagem. Camila exportou os ícones com uma placa clara arredondada atrás do traço, que dá fundo próprio ao desenho em qualquer tema, e conferiu o envio de teste nos aplicativos da audiência. A oficina do e-mail sem imagem repete o teste com as imagens desligadas.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding:0 8px 0 0;vertical-align:top;">
      <!-- PNG com placa clara atrás do traço: aparece nos dois temas -->
      <img src="https://cdn.exemplo.com.br/icones/calendario-check-48.png"
        width="24" height="24" alt="" style="display:block;border:0;">
    </td>
    <td style="font:16px/1.5 Arial,sans-serif;color:#1a1a1a;">
      Sua vaga está reservada para a turma de 10 de novembro.
    </td>
  </tr>
</table>

<!-- a ação é texto: continua legível com imagens bloqueadas -->
<a href="https://exemplo.com.br/aula-1"
  style="display:inline-block;padding:12px 20px;background:#99264a;color:#ffffff;
  font:bold 16px Arial,sans-serif;text-decoration:none;">Assistir à primeira aula</a>

WhatsApp e Instagram: nenhum ícone de interface, só texto, emoji com função e marca conforme o titular

Mensagem de WhatsApp e legenda de Instagram não recebem ícones da família da página, porque não há onde colocá-los: o canal só aceita texto, emoji e mídia. O símbolo que sobra é o emoji, e ele segue as regras da seção sobre emoji: entra quando acrescenta contexto, nunca para enfeitar, e nunca carrega sozinho uma informação como data ou preço. O NN/g mediu em 2020, no estudo sobre assuntos de e-mail, que o emoji não aumentou a chance de seleção e elevou em 26% o sentimento negativo, e esse resultado é motivo suficiente para economizar emoji também em mensagem de lembrete. Na página e no e-mail, as marcas WhatsApp e Instagram aparecem com os arquivos e regras dos titulares, como descreve publicar.

Painel de operação: estados com forma, ações nomeadas e vazio que instrui

Foi no painel interno da Mirante que a troca de família mais custou: os desenhos preenchidos deixaram parecidos os botões de duplicar, salvar e arquivar, e a equipe passou a abrir o menu errado. A correção voltou à família original e manteve o texto nas ações primárias. Mantenha o rótulo visível nas ações que aparecem uma vez por tela; nas repetidas em cada linha, ícone sozinho é aceitável quando o nome acessível inclui o objeto e a ação passou no teste de compreensão.

Estados de campanha pedem uma forma por estado; a cor sozinha falha no teste sem cor. O menu de três pontos ganha nome que diga de qual linha ele é, e a tela vazia diz o que fazer em seguida.

<tr>
  <th scope="row">Fotografe para vender: boas-vindas</th>
  <td>
    <!-- estado: forma própria + palavra; a cor só reforça -->
    <span class="estado estado-falha">
      <svg class="icon" width="16" height="16" aria-hidden="true" focusable="false">
        <use href="#i-circle-x"/>
      </svg>
      Envio falhou
    </span>
  </td>
  <td>
    <!-- três pontos com nome que diz a linha -->
    <button type="button" class="acao-linha" aria-haspopup="menu" aria-expanded="false"
      aria-label="Mais ações para a campanha Fotografe para vender: boas-vindas">
      <svg class="icon" width="20" height="20" aria-hidden="true" focusable="false">
        <use href="#i-ellipsis-vertical"/>
      </svg>
    </button>
  </td>
</tr>

<style>
  /* alvo de 24 px no mínimo, conforme a WCAG 2.2, critério 2.5.8 */
  .acao-linha { min-width: 32px; min-height: 32px; }
</style>

O botão de três pontos acima mede 32 px, acima dos 24 por 24 CSS px da WCAG 2.2, critério 2.5.8, nível AA, tamanho do alvo (mínimo). Em tabela densa, 32 px é um meio-termo razoável; em painel usado no celular, suba para 44 px.

Área de membros e curso: cadeado com data, progresso em número e certificado com condição

Na área de membros do curso, o cadeado é o ícone que mais gera mensagem ao suporte quando aparece sem explicação, porque a pessoa não sabe se pagou pouco, se errou de conta ou se a aula ainda não saiu. Ponha a data de liberação ao lado do cadeado. O progresso vai em número de aulas, e não só numa barra colorida, e o certificado diz a condição para ser emitido.

Notificações e toasts: quatro estados, quatro formas e uma frase em cada

Sucesso, aviso, erro e informação precisam de formas diferentes porque a notificação some em segundos e a pessoa olha de relance. Círculo com marca de verificação, triângulo, círculo com X e círculo com "i" separam os quatro estados mesmo sem cor, e a frase diz o que aconteceu e o que fazer. A mensagem precisa ser anunciada por leitores de tela sem mover o foco, como pede a WCAG 2.2 no critério 4.1.3, nível AA, mensagens de status; a oficina de estados mostra a região role="status". Erro que exige ação não deveria sumir sozinho: deixe-o na tela até a pessoa fechar.

Navegação de celular: barra inferior com rótulo em todos os itens e hambúrguer com a palavra Menu

Esconder a navegação custa uso. No estudo "Hamburger Menus and Hidden Navigation Hurt UX Metrics", de Kara Pernice e Raluca Budiu, publicado pelo NN/g em 2016 com 179 participantes, a navegação oculta foi usada em 27% dos casos no desktop e em 57% dos casos no celular, contra 86% da navegação combinada no celular. A descoberta de conteúdo caiu mais de 20% com a navegação oculta, no mesmo estudo de 2016. Por isso a área de membros da Mirante usa barra inferior com quatro destinos, cada um com ícone e rótulo, e reserva o menu de três linhas para o que é raro.

Fluxos e anúncios: o ícone nomeia a etapa e a palavra explica a passagem

Quando a página ou o material de venda explica uma sequência, os ícones identificam as etapas e as palavras nas conexões dizem o que passa de uma para a outra. O fluxo abaixo é didático e não representa uma integração instalada.

Em anúncios e carrosséis, um símbolo pode marcar a ideia de cada quadro, mas título e informação continuam em texto legível. No e-mail, conserve a ação em texto mesmo com imagens bloqueadas. Um arquivo que funciona no navegador precisa de nova conferência no cliente de e-mail.

O que a Mirante entregou e o que você faz na segunda-feira

A segunda versão das três peças manteve a família original, e a "modernização" ficou na cor de destaque e no espaçamento. A página ganhou três benefícios com três desenhos, garantia com prazo escrito e o símbolo Pix original em paridade com as bandeiras. O e-mail passou a usar PNG com placa clara e botão em texto, e voltou a aparecer no modo escuro. No painel, as três ações confundidas recuperaram o rótulo e os estados ganharam forma própria. Nada disso exigiu desenho novo.

Para repetir no seu projeto, escolha uma peça de cada superfície que você mantém (uma página, um e-mail, uma tela de painel) e passe cada ícone por três perguntas: a ação está escrita ao lado; o estado continua claro sem cor; o arquivo funciona no canal real, inclusive no modo escuro e com imagens bloqueadas. O critério de pronto é uma pessoa de fora da equipe concluir a tarefa da peça sem perguntar o que um símbolo significa. Registre as respostas no contrato visual antes de aplicar a regra às outras telas.

Emoji é vocabulário de conversa e fica fora dos botões, porque cada aparelho desenha o seu

Na primeira versão do e-mail de boas-vindas da Mirante (exemplo didático, agência fictícia), o assunto "Sua vaga está reservada" ganhou uma câmera fotográfica (U+1F4F7) no fim, e o botão do painel que dispara o lembrete aos alunos ganhou um foguete (U+1F680) no lugar do ícone. Camila aprovou o assunto para teste e vetou o botão no mesmo dia. O motivo do veto organiza esta seção: emoji é texto que cada sistema operacional desenha com a própria fonte e que cada público lê com o próprio repertório. Em WhatsApp, Instagram e, com teste, no assunto de e-mail, isso dá tom de voz. Em botão, estado ou instrução, onde o símbolo precisa ter o mesmo desenho e o mesmo significado para todos, a variação vira erro de operação.

Um código, vários desenhos

O Unicode define o código e o nome de cada emoji, e deixa o desenho para quem fabrica a fonte. O Unicode 17.0, publicado em 09/09/2025, chega a 3.953 emojis na tabela oficial "Emoji Counts, v17.0"; o total foi obtido em resultado de busca e precisa ser conferido na página do consórcio antes de ir para material de cliente, e a busca feita em outubro de 2026 não encontrou uma versão 18.0 publicada. Cada um desses códigos é desenhado pela fonte do sistema de quem recebe a mensagem: Apple Color Emoji no iPhone e no Mac, Noto Color Emoji no Android do Google e no ChromeOS, o conjunto próprio da Samsung nos aparelhos Galaxy, Segoe UI Emoji com desenho Fluent no Windows 11. O WhatsApp acrescenta uma camada, com conjunto próprio no Android e o da Apple no iOS, segundo as fichas por fornecedor da Emojipedia, que esta pesquisa não abriu uma a uma.

A expressão do rosto, a cor e até a leitura de ironia mudam de um aparelho para outro, e o remetente nunca escolhe a fonte do destinatário. Emoji recém-aprovado chega aos sistemas cerca de seis meses depois do anúncio, prazo também obtido em resultado de busca, e até lá aparece como retângulo vazio em parte dos celulares.

Neste guia, emoji é citado por nome e código, como a chama (U+1F525), e nunca reproduzido. Adote a convenção no briefing e no pedido ao agente de código: o caractere colado chega com o desenho da máquina de quem colou, e a revisão aprova uma imagem que o assinante não verá.

O que o assunto do e-mail ganha e perde

O único estudo com grupo de controle encontrado nesta pesquisa não mostra ganho de abertura. Em "Emojis in Email Subject Lines: Advantage or Impediment?", Kate Flaherty comparou no NN/g, em 2020, versões com e sem emoji de 13 e-mails reais de comércio eletrônico, com cerca de 50 respondentes por grupo, e não encontrou diferença significativa na chance de cada e-mail ser escolhido. O mesmo estudo do NN/g de 2020 mediu 26% mais sentimento negativo em relação ao e-mail quando o assunto tinha emoji, com a média passando de 0,81 para 1,02 na escala usada.

Um detalhe do segundo experimento explica por que o emoji parece funcionar para quem olha a caixa de entrada. Na caixa mista montada pelo NN/g em 2020, os e-mails com emoji concentraram 33% das escolhas contra 9% dos sem emoji, mas 58% das oportunidades terminaram sem escolha nenhuma. O emoji atrai o olho e não garante a abertura. O estudo mede intenção declarada, e não abertura real, e usou só e-mails de varejo.

Os números favoráveis que circulam têm base mais fraca. O Adobe Emoji Trend Report de 2019, publicado no blog oficial da Adobe, ouviu 1.000 usuários de emoji nos Estados Unidos, e 58% deles disseram estar mais propensos a abrir e-mail de marca com emoji no assunto; o dado foi lido em resultado de busca e é autodeclaração de quem já gosta de emoji, sem taxa de abertura medida. O "56%" atribuído à Experian em 2012 só aparece de segunda mão, em blogs como o da Campaign Monitor, e circula em duas leituras que não cabem juntas: 56% das marcas viram abertura maior, ou a abertura cresceu 56%. O relatório original não foi localizado, e número sem origem não sustenta decisão de campanha.

Na Mirante, a decisão virou teste A/B na base do cliente, com a câmera no fim do assunto numa metade e o assunto sem emoji como controle. Quando a base for pequena demais para separar dois grupos com segurança, fique sem emoji: o estudo controlado mostra custo de percepção e nenhum ganho medido.

Leitor de tela lê o nome do emoji

Para quem ouve a tela, o emoji é lido pelo nome que o sistema traduziu. O assunto "Sua vaga está reservada" seguido do rosto sorridente com olhos sorridentes (U+1F60A) chega ao ouvido com seis palavras a mais no fim. Colocado no meio da frase, o mesmo nome interrompe a leitura entre o sujeito e o verbo. Emoji usado como marcador de lista, recurso comum em legenda de Instagram, faz cada item começar por "seta para a direita" antes do conteúdo.

A regra prática tem três partes, e todas cabem num checklist de revisão:

1. Emoji vai no fim da frase, depois da informação, nunca entre sujeito e verbo.
2. Emoji nunca é marcador de lista; a lista usa a marcação de lista do canal ou numeração escrita.
3. Emoji nunca se repete para dar ênfase; a ênfase vem da escolha da palavra.

Quando o emoji carrega um sentido que a frase não diz, a frase está incompleta, e o conserto é escrever a palavra. O nome lido muda entre leitores de tela, por isso o teste inclui ouvir a mensagem no VoiceOver do iPhone e no TalkBack do Android; o procedimento está na oficina de teste de compreensão.

Conjuntos abertos e licenças

Quando a peça precisa de emoji com desenho fixo, como numa capa de post, use um conjunto aberto como imagem, com texto alternativo e a licença respeitada. A situação de cada conjunto, como esta pesquisa conseguiu confirmar em outubro de 2026, é desigual:

• Noto Color Emoji, do Google: fonte sob SIL OFL 1.1 e código sob Apache 2.0, segundo comentário de 2023 num ticket do WordPress. A licença foi lida em fonte secundária; confira no repositório googlefonts/noto-emoji antes de distribuir.
• Twemoji: criado pelo Twitter e mantido desde 2022 por ex-funcionários no fork jdecked/twemoji, que acompanha as versões novas do Unicode. Os gráficos estão sob CC BY 4.0, que exige atribuição, e o código sob MIT, conforme o pacote @twemoji/api, também lido em fonte secundária.
• OpenMoji e Fluent Emoji, da Microsoft: licença não verificada nesta pesquisa. Não use nenhum dos dois antes de abrir o arquivo de licença no repositório oficial e registrar o que ele exige.

Conjunto sob CC BY pede crédito visível; registre-o no pacote do arquivo, como descreve a seção Preparar e conferir.

Regra da Mirante para redes e WhatsApp

Use emoji quando o canal é de conversa e o público já escreve com ele: atendimento por WhatsApp, legenda de Instagram, resposta a comentário. Deixe-o fora sempre que a pessoa precisa agir ou entender um estado: botão, status, aviso de erro, instrução de pagamento. A tabela resume a regra da Mirante por canal.

O botão do foguete voltou para a família do painel como com o rótulo "Enviar lembrete". A câmera (U+1F4F7) só vira padrão do e-mail "Sua vaga está reservada" se a metade com emoji abrir mais que o controle; até lá, a equipe copia a versão sem emoji.

Exporte o ícone da marca como uma família de arquivos, com versão simplificada para os tamanhos pequenos

A marca do curso que a Mirante refaz (exemplo didático, agência fictícia) é uma câmera de traço fino com a palavra "Fotografe" escrita embaixo, em letra leve. No arquivo de apresentação, a 1024 px, ela é bonita. Quando Otávio exportou a mesma arte para a aba do navegador, a palavra virou uma faixa cinza de dois pixels; no ícone de instalação do Android, o círculo da máscara cortou as pontas da lente. O arquivo era um só, e os destinos eram cinco, cada um com tamanho, formato e corte próprios. A conclusão desta seção é que favicon e ícone de app são uma família de arquivos, com uma versão completa da marca para os tamanhos grandes e uma versão simplificada, só a câmera, para tudo abaixo de 48 px e para qualquer superfície que aplica máscara.

O que cada destino pede, com o número oficial

Os números vêm das páginas de cada plataforma, consultadas em outubro de 2026; o que não foi confirmado na página oficial vem marcado na própria linha.

Dois detalhes da página do Google Search Central mudam o trabalho de quem herda checklists antigos. A regra de "múltiplo de 48 px", repetida em muitos guias, saiu da página: hoje o texto pede quadrado de no mínimo 8 × 8 px e recomenda arte acima de 48 × 48 px. E o Google mostra uma favicon por site, entendendo site como hostname, de modo que um subdomínio de captação conta como site separado e precisa da própria favicon declarada e rastreável.

SVG na aba, ICO na raiz e o que ficou para trás

A favicon em SVG passou a valer em todos os navegadores principais quando o Safari 26, no desktop e no iOS, adotou o formato; o caniuse registra cobertura global de 92,06% em 2026, com Chrome e Edge desde a versão 80 e Firefox desde a 41. O SVG resolve a aba em qualquer densidade de tela e aceita prefers-color-scheme dentro do arquivo, para trocar a cor no tema escuro. O ICO continua necessário como reserva e na raiz do domínio, porque leitores de feed, agregadores e navegadores antigos pedem /favicon.ico sem ler o HTML, prática de mercado que esta pesquisa não mediu.

Com vários links rel="icon", a MDN explica que o navegador escolhe por media, type e sizes, descarta o formato que não entende e, no empate, fica com o último declarado. A mesma página classifica rel="shortcut icon" como não conforme: autores não devem usá-lo. E registra que o iOS ignora rel="icon" e o atributo sizes para o ícone da tela inicial, e lê apenas o link não padronizado apple-touch-icon.

<!-- ICO de reserva, com 16, 32 e 48 px dentro do mesmo arquivo -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- SVG para navegadores atuais; declarado depois, vence o empate -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- iPhone e iPad: PNG quadrado, fundo opaco, sem cantos arredondados -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Manifesto com os ícones de instalação -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#17191f">

App Store e Google Play cortam a arte por conta própria

As duas lojas recebem um quadrado cheio e aplicam a forma final. A Apple Human Interface Guidelines pede 1024 × 1024 px para iOS, iPadOS, macOS e visionOS, com camadas quadradas e fundo opaco que vai até a borda, porque o sistema arredonda os cantos; a página atual não traz a frase "sem transparência" de forma literal, mas a exigência de fundo opaco chega ao mesmo resultado. A HIG limita texto no ícone ao caso indispensável à marca.

No Google Play, o ícone da loja tem 512 × 512 px em PNG de 32 bits com alfa e no máximo 1.024 KB. A especificação de design do Android Developers, de 2019 e ainda vigente, informa que a loja aplica a máscara com raio equivalente a 30% do tamanho do ícone e pede que o arquivo final não tenha sombra nem cantos arredondados. Fundo transparente aparece com a cor da interface da loja.

Ícone de instalação: a zona segura do maskable

Quando a página de captação vira aplicativo instalável, o Android encaixa o ícone em círculo, quadrado arredondado ou outra forma escolhida pelo fabricante. O artigo do web.dev sobre ícones maskable, atualizado em 2019, define a zona segura como um círculo central com raio de 40% da largura do ícone, o que dá 80% de diâmetro, e avisa que os 10% externos podem ser cortados. Tudo que identifica a marca precisa caber nesse círculo. O mesmo artigo desaconselha declarar "any maskable" no mesmo arquivo: o ícone "any" é a arte sem margem extra, usada como favicon, e o "maskable" é outra exportação, com fundo cheio e o desenho recolhido ao centro.

{
  "name": "Fotografe para vender",
  "short_name": "Fotografe",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#17191f",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Para conferir o corte antes de publicar, abra o painel Application do Chrome DevTools, que mostra o ícone com a máscara aplicada, ou a ferramenta Maskable.app, citada pelo próprio web.dev.

O erro clássico: texto fino na marca pequena

Letra leve e traço fino somem em dois lugares ao mesmo tempo. A 16 px, na aba, cada traço de 1 px da arte original vira fração de pixel e desaparece no antisserrilhado. No círculo do Android, o que estava perto da borda cai fora da zona segura. A escada abaixo mostra como a mesma câmera perde detalhe a cada degrau; a marca com a palavra embaixo perderia antes, porque a letra é o elemento mais fino do conjunto.

A recomendação é manter duas artes. A versão completa, com câmera e palavra, vai para a App Store, para a página de vendas e para tudo acima de 48 px. A versão simplificada, só com a câmera, traço mais grosso e sem a palavra, vai para favicon, apple-touch-icon e maskable. Quando a marca é só tipográfica, a versão pequena costuma ser a inicial sobre fundo cheio, aprovada pelo cliente como variação oficial.

A Mirante saiu da revisão com seis entregas: favicon.svg com a câmera simplificada e cor trocada no tema escuro, favicon.ico com 16, 32 e 48 px, apple-touch-icon.png com fundo opaco, o par 192 e 512 em "any", o par maskable com a câmera recolhida à zona segura e a arte de 1024 px com a palavra, guardada para as lojas. Otávio registrou no repositório qual arte gera cada arquivo, para que a próxima troca de marca refaça todos de uma vez.

Entregue o ícone pelo caminho que preserva cor, nome acessível e cache, e escolha esse caminho pela quantidade de repetições

O painel de campanhas da Mirante (exemplo didático, agência fictícia) tem uma tabela com 40 linhas, e cada linha carrega quatro ações: duplicar, arquivar, filtrar por essa campanha e abrir o relatório. Na primeira versão, o agente de código de Otávio colou o SVG completo de cada ação em cada linha. A página funcionava, mas o mesmo desenho aparecia 40 vezes no HTML, e a troca da família pedida pelo cliente exigiu substituir 160 trechos. A segunda versão usou um sprite com quatro símbolos e linhas de uma só referência cada. O desenho era o mesmo; a forma de entrega mudou o custo de manutenção, o peso da página e a facilidade de dar nome acessível a cada botão.

A recomendação desta seção é condicional, e a condição é a contagem. Use SVG inline quando a página tem até cerca de dez símbolos que mudam de cor e de estado. Passe para sprite com <use> quando o mesmo símbolo se repete dezenas de vezes ou quando várias páginas compartilham o conjunto. Use <img> para ilustração e logotipo que não mudam de cor. Use máscara CSS para ícone decorativo em lista e em classe utilitária. Fonte de ícones fica restrita a sistema legado que ainda não pôde migrar.

Cinco formas de entregar o mesmo desenho

As cinco formas diferem em três propriedades que decidem o uso: se o arquivo entra no cache do navegador separado da página, se a cor acompanha currentColor (a cor do texto ao redor) e se o desenho aceita nome acessível sem truque. A tabela reúne o que a MDN e o artigo de Chris Coyier no CSS-Tricks documentam.

A linha do sprite tem a ressalva que mais derruba projetos. A página da MDN sobre <use> avisa que, por segurança, navegadores podem aplicar a política de mesma origem e recusar um href que aponte para outro domínio, e que não existe forma definida de configurar uma política de origem cruzada para o elemento. Na prática, o sprite mora no mesmo domínio da página: um sprite servido de CDN de terceiro funciona no teste local e quebra em produção. A mesma página marca xlink:href como obsoleto desde o SVG 2 (quando os dois atributos coexistem, vale href) e desaconselha carregar o sprite por data: URI no href, também por segurança.

A fonte de ícones perdeu a disputa em 2014, quando Chris Coyier listou no CSS-Tricks as falhas que o formato acumulava: glifos guardados na área de uso privado do Unicode aparecem como emoji em alguns sistemas, o usuário que força fonte própria ou bloqueia fontes vê um quadrado vazio, proxies como Opera Mini e UC Browser declaram suporte a @font-face sem aplicá-lo, e a caixa do glifo depende da altura de linha e do alinhamento vertical, o que torna o posicionamento imprevisível. Os navegadores citados no artigo envelheceram; a conclusão, preferir SVG, segue como recomendação corrente.

A máscara CSS é a saída para o desenho decorativo que se repete em lista, porque mantém o DOM enxuto e herda a cor do texto. Iconoir e Tabler distribuem classes prontas nesse formato.

/* Ícone decorativo por máscara: a cor vem do texto ao redor */
.icon-check {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: url("/icons/check.svg") center / contain no-repeat;
}

/* Marcador de lista: o nome acessível fica no texto do item */
.lista-beneficios li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.5em;
  background-color: currentColor;
  mask: url("/icons/check.svg") center / contain no-repeat;
}

Três papéis, três marcações

A marcação certa depende do papel do ícone, e o tutorial de imagens do W3C WAI fornece as três categorias que interessam aqui. A imagem decorativa não acrescenta informação e deve ser ignorada pela tecnologia assistiva. A informativa transmite um dado curto que o texto ao redor não diz. A funcional é link ou botão, e seu texto alternativo descreve a ação que será iniciada em vez da aparência do desenho; o exemplo do próprio tutorial é a lupa usada como botão, nomeada "Search", e a impressora isolada, nomeada "Print this page".

Os critérios da WCAG 2.2 que cobram isso são dois. O critério 1.1.1, nível A, conteúdo não textual, exige alternativa em texto com o mesmo propósito, nome que descreva a finalidade quando o conteúdo é um controle, e implementação que permita à tecnologia assistiva ignorar a decoração. O critério 4.1.2, nível A, nome, função e valor, exige que todo componente de interface tenha nome e função determináveis por programa. As falhas documentadas que atingem o botão de ícone são a F68, controle sem nome programático, e a F89, link cujo único conteúdo é uma imagem sem nome acessível.

O caso decorativo é o mais comum no material de agência: o desenho reforça um texto que já diz tudo. O SVG sai da árvore de acessibilidade com aria-hidden="true", e o leitor de tela anuncia só o texto do link.

<!-- O texto já diz a ação; o desenho só reforça -->
<a class="btn" href="/checklist-luz-natural.pdf">
  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24">
    <use href="/icons/sprite.svg#mir-download"></use>
  </svg>
  Baixar checklist
</a>

No botão só com ícone, o nome vai no botão. Sara Soueidan, em "Accessible Icon Buttons" (2019), compara cinco técnicas e recomenda tratar o SVG como decorativo e nomear o botão por aria-label ou por texto visualmente oculto dentro dele; as técnicas que põem o nome no próprio SVG falham em algumas combinações de navegador e leitor de tela, segundo a autora. A ressalva dela vale para a WCAG 2.2, critério 2.5.3, nível A, rótulo no nome: quando há texto visível, o nome acessível precisa contê-lo.

<!-- Técnica 1: nome no botão por aria-label -->
<button type="button" aria-label="Arquivar campanha">
  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24">
    <use href="/icons/sprite.svg#mir-archive"></use>
  </svg>
</button>

<!-- Técnica 2: texto visualmente oculto dentro do botão -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24">
    <use href="/icons/sprite.svg#mir-copy"></use>
  </svg>
  <span class="visually-hidden">Duplicar campanha</span>
</button>

<style>
  /* Esconde da tela e mantém para o leitor de tela */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
</style>

O ícone informativo é o que transmite um dado sozinho, como o estado de pagamento numa coluna estreita da tabela. A página da MDN sobre role="img" recomenda colocar o papel no elemento <svg> mais externo e dar a ele um nome, para que o leitor de tela trate o conjunto como uma só imagem, em vez de tentar percorrer os nós internos; o nome vem de aria-labelledby quando há rótulo visível e de aria-label nos demais casos.

<!-- O desenho é a única indicação do estado: precisa de nome -->
<svg role="img" aria-labelledby="mir-status-pago" width="20" height="20" viewBox="0 0 24 24">
  <title id="mir-status-pago">Pagamento confirmado</title>
  <use href="/icons/sprite.svg#mir-circle-check"></use>
</svg>

<!-- Variante com aria-label, como no exemplo da MDN -->
<svg role="img" aria-label="Pagamento confirmado" width="20" height="20" viewBox="0 0 24 24">
  <use href="/icons/sprite.svg#mir-circle-check"></use>
</svg>

<!-- Arquivo externo em img: o alt carrega o mesmo nome -->
<img src="/icons/circle-check.svg" alt="Pagamento confirmado" width="20" height="20">

O atributo focusable="false" aparece nos três exemplos por herança. A única justificativa documentada no artigo de Sara Soueidan de 2019 é o Internet Explorer, que parava o Tab dentro do SVG. Bibliotecas como Font Awesome e Lucide ainda emitem o atributo; mantê-lo não custa nada, e removê-lo não traz ganho, então a escolha fica com o padrão da biblioteca.

Sprite: montagem, ids e o que o SVGO apaga

O sprite é um arquivo SVG com um <symbol> por ícone, cada um com id e viewBox próprios. Cada uso na página é um <svg> pequeno com um <use> apontando para o id. Dois cuidados de montagem evitam a maior parte dos defeitos. O primeiro é o prefixo nos ids: "mir-archive" em vez de "archive", porque a página pode ter outro elemento com id "archive", e ids duplicados quebram tanto o <use> quanto o aria-labelledby. O segundo vale para o sprite embutido no início do <body>: posicione-o fora da tela com tamanho zero, em vez de display:none, porque gradientes, máscaras e filtros referenciados por id dentro de um SVG oculto com display:none deixam de ser desenhados em alguns navegadores, relato recorrente de implementação que esta pesquisa não conferiu navegador a navegador.

<!-- sprite.svg, servido na mesma origem da página -->
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- Prefixo "mir-" evita colisão com outros ids da página -->
  <symbol id="mir-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect width="20" height="5" x="2" y="3" rx="1"/>
    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/>
    <path d="M10 12h4"/>
  </symbol>
  <symbol id="mir-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
  </symbol>
</svg>

<!-- Variante embutida: no início do body, fora da tela, sem display:none -->
<svg class="sprite-host" aria-hidden="true" focusable="false">
  <!-- os mesmos symbol acima -->
</svg>
<style>
  .sprite-host { position: absolute; width: 0; height: 0; overflow: hidden; }
</style>

O SVGO, otimizador que quase todo pipeline de ícones usa, liga por padrão um conjunto de plugins chamado preset-default, e alguns deles apagam exatamente o que a acessibilidade e o sprite precisam. O cleanupIds renomeia ou remove ids, o que desliga o aria-labelledby que aponta para o <title> e o <use> que aponta para o símbolo; o README do projeto mostra como desligá-lo. Os plugins removeTitle e removeDesc apagam o texto acessível embutido. A situação do removeViewBox no preset, que já apagou o viewBox e quebrou o redimensionamento por CSS em versões anteriores, ficou não verificada nesta pesquisa: confira a lista da página do preset-default para a versão instalada antes de confiar no padrão.

// svgo.config.mjs
export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Mantém ids usados por aria-labelledby e por <use href="#...">
          cleanupIds: false,
        },
      },
    },
  ],
};

Bibliotecas e o que fixar

A biblioteca escolhida decide grade, espessura de traço e licença de todos os ícones do projeto, por isso a escolha vem antes do primeiro desenho e a versão fica registrada no repositório. As quantidades abaixo são as declaradas por cada projeto na consulta de 22/10/2026 e mudam a cada versão; o guia escreve "mais de N" quando a própria página faz isso. O critério de escolha está na última coluna, e a seção Família explica como manter uma só família por projeto.

Duas linhas pedem leitura atenta. A Remix Icon deixou a Apache 2.0 em janeiro de 2026 e adotou licença própria, que permite uso comercial e alteração de cor, tamanho e traço, mas proíbe vender os ícones como pacote, montar biblioteca concorrente mesmo com mudanças superficiais e usar o desenho como logotipo ou marca. A Simple Icons libera os arquivos em CC0, e o aviso legal do projeto lembra que a marca desenhada continua pertencendo à empresa e que a obtenção de permissão é responsabilidade de quem usa; a seção Preparar e conferir resume as regras de WhatsApp, Instagram e LinkedIn.

O que fixar no repositório é curto: nome da biblioteca, versão exata do pacote, espessura de traço adotada e lista dos ícones em uso com a função de cada um. Na Mirante, foi a falta dessa lista que permitiu trocar a família inteira sem perceber que arquivar, duplicar e filtrar dependiam de silhuetas que a equipe já tinha aprendido.

Iconify e o símbolo que falta

Toda família tem lacunas, e a tentação é misturar duas bibliotecas. O Iconify agrega mais de 300.000 ícones de conjuntos abertos sob um formato único, e oferece o web component iconify-icon, que busca o desenho na Iconify API e o desenha como SVG dentro de shadow DOM; desde a versão 2.0.0 ele só desenha o ícone quando o elemento fica visível na tela. Para quem compila o projeto, o caminho que dispensa a chamada à API em tempo de execução é o unplugin-icons, que gera os componentes no build, plugin citado aqui por conhecimento prévio e não conferido nas páginas lidas nesta pesquisa.

A regra da Mirante para o Iconify tem duas partes. A família principal cobre o conjunto, e o Iconify entra só para o símbolo ausente nela, escolhido num conjunto com grade e traço próximos. E o símbolo emprestado é registrado no build, com o arquivo copiado para o repositório e a licença do conjunto de origem anotada, para que a página não dependa de uma requisição externa nem herde uma obrigação que ninguém leu.

Peso e cache

O argumento a favor do sprite externo é o cache: o arquivo é baixado uma vez e reaproveitado em todas as páginas, enquanto o SVG inline viaja dentro de cada HTML, ponto que o CSS-Tricks registra desde 2014. Os números de bytes por ícone e por referência que circulam são estimativas. Um ícone otimizado de 24 × 24 com traço 2 ocupa algumas centenas de bytes, e cada <use> ocupa algumas dezenas, ordem de grandeza não medida nesta pesquisa. A compressão gzip ou brotli reduz bem a repetição do mesmo trecho no HTML, mas cada SVG inline continua virando nós no DOM, com custo de interpretação, memória e cálculo de estilo que cresce com o número de linhas da tabela.

Para decidir sem número inventado, meça na própria página: compare o tamanho transferido e a contagem de nós no painel de desempenho do navegador com as duas versões. No painel da Mirante, as 40 linhas com quatro ações cada foram para o sprite externo; os oito ícones da página de captação, que mudam de cor no hover e no tema escuro, ficaram inline; a ilustração da janela com luz natural ficou em <img> com alt.

Oficina: separe desenho, rótulo e área de toque

Um desenho de 20 px pode ocupar um botão de 44 px, e a pessoa que toca no botão nunca mede o desenho. Nesta oficina você altera as duas medidas separadamente, compara o botão com e sem texto e confere que o nome para leitores de tela continua "Baixar checklist" nos dois casos. A WCAG 2.2 exige, no critério 2.5.8 (nível AA), alvos de 24 × 24 CSS px ou uma das exceções previstas, como espaçamento suficiente; o critério 2.5.5 (nível AAA) usa 44 × 44. Adotar 44 px aqui é uma escolha de projeto; isso não certifica a página inteira como AAA.

Cenário de exercício

Quem

Camila, designer da agência Mirante (exemplo didático), e Otávio, desenvolvedor que monta a página de captação do curso de fotografia de produto com agente de código.

Tarefa

Entregar o botão "Baixar checklist" da página e a versão só com ícone da barra de ações do painel de campanhas, com a mesma família e o mesmo nome acessível.

Falha vista

Na primeira versão, o ícone de 16 px foi colocado num botão de 28 px de altura no celular. Os toques erravam o alvo, e o leitor de tela anunciava apenas "botão", porque o SVG decorativo não tinha nome e o texto tinha sido retirado para "ganhar espaço".

Resultado esperado

Desenho e alvo medidos separadamente, área exibida de pelo menos 44 × 44 CSS px, texto visível na página e aria-label idêntico ao rótulo na versão só com ícone do painel.

O desenho identifica; o controle recebe o toque; o rótulo explica

Três medidas convivem num botão com ícone: o tamanho do desenho, a caixa clicável e o espaço até o vizinho. A WCAG mede a segunda e aceita a terceira como exceção, porque dois alvos de 20 px separados por 24 px de vazio funcionam como alvos de 44 px. O desenho não entra na conta. Quando Otávio pediu ao agente "aumente o ícone para caber no dedo", o agente escalou o SVG para 40 px e deixou o botão do mesmo tamanho: o desenho ficou grande, o alvo continuou pequeno e o rótulo sumiu atrás do desenho.

Com texto visível, o próprio texto nomeia o botão; o SVG decorativo recebe aria-hidden="true". Sem texto, o botão precisa de um nome, por exemplo aria-label="Baixar checklist". Esse atributo atende à tecnologia assistiva, mas não esclarece o símbolo para quem enxerga a tela; a seção Evidência mostra que só três símbolos dispensam rótulo, e o download não está entre eles.

Demonstração: altere o desenho e o alvo sem misturar os dois

Os três controles abaixo mudam uma medida cada. A linha de status informa o desenho escolhido, o alvo mínimo e a área que o navegador exibiu, porque o preenchimento interno e o texto podem deixar o botão maior que o mínimo. Dados de exercício: desenhos de 16, 20, 24 e 32 px; alvos de 24, 44 e 48 px; rótulo visível ou só ícone.

Teclado: Tab chega ao botão, Enter ou Espaço aciona e a linha de resultado confirma. Sem JavaScript, o botão aparece com 20 px de desenho e 44 px de alvo, e o código de referência abaixo corresponde a esse estado.

Execute a sequência que costuma falhar

1. Escolha 16 px de desenho, 24 px de alvo e "Somente ícone". A área exibida fica em 24 × 24 px: cabe no critério 2.5.8 por pouco e não deixa margem para o dedo.
2. Volte para 20 px e 44 px com "Ícone e texto". A área exibida passa de 44 px na largura por causa do texto; a altura fica em 44.
3. Escolha 32 px de desenho com alvo de 24 px. A área exibida sobe para cerca de 34 × 34 px, porque o desenho empurra a caixa: o mínimo declarado e o resultado medido são números diferentes, e o que vale é o medido.
4. Pressione Tab até o botão e Enter. O contorno de foco aparece com 3 px e o resultado abaixo muda de texto; o SVG não recebe foco próprio.

Investigar as falhas

Use a ferramenta de inspeção do navegador para ler a caixa do botão (não a do SVG) e a árvore de acessibilidade para ler o nome calculado. As linhas abaixo usam esses dois instrumentos.

Quando uma dica encobre conteúdo, permita dispensá-la sem mover foco ou ponteiro, por exemplo com Escape, observadas as exceções da WCAG 1.4.13. A dica complementa o rótulo; o toque também precisa oferecer acesso à informação.

Código de referência

O bloco abaixo acompanha os controles: cada mudança reescreve o HTML e o CSS de um documento completo, com os avisos de licença dos desenhos, pronto para abrir num arquivo local.

<button type="button" class="action">
  <svg width="20" height="20" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2"
       aria-hidden="true" focusable="false">
    <path d="M12 3v12m-5-5 5 5 5-5M3 15v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/>
  </svg>
  Baixar checklist
</button>
<style>
.action { min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; gap:8px; padding:8px 16px;
  background:#99264a; color:#fff; border:2px solid transparent; }
.action:focus-visible { outline:3px solid #111827; outline-offset:3px; box-shadow:0 0 0 3px #fff; }
</style>

Critérios de aceite

• O texto explica o que será baixado, com formato e tamanho do arquivo quando houver.
• O desenho e a área clicável foram medidos separadamente no inspetor.
• A área exibida tem pelo menos 44 × 44 CSS px, ou o projeto registrou por escrito a exceção de 24 px com espaçamento.
• Tab alcança o botão, o foco fica visível e Enter e Espaço acionam o controle.
• O nome acessível corresponde ao rótulo visível; na versão só com ícone, aria-label repete o mesmo texto.
• Com zoom de 200%, o botão cresce e o desenho continua dentro da borda.
• O botão permanece compreensível sem o ícone, com a imagem bloqueada ou o SVG ausente.

Levar para o projeto

Em React ou Next, trate o ícone como componente que recebe size e já sai com aria-hidden="true"; o nome fica sempre no botão, por texto ou por aria-label, nunca no SVG. Um teste com getByRole("button", { name: "Baixar checklist" }) falha quando alguém remove o rótulo e esquece o atributo. Em Tailwind, declare min-h-11 min-w-11 (44 px) na classe base do botão com ícone e deixe o tamanho do desenho num token separado, como o guia de Tailwind e tokens mostra. Na Mirante, Otávio gravou os dois tokens no contrato da oficina de contrato visual e o agente parou de escalar o SVG quando o pedido era "aumentar o botão".

Oficina: comunique estados sem depender da cor

Rascunho, processamento, sucesso e falha precisam continuar diferentes quando a cor some, porque um em cada 12 homens não distingue algumas cores, segundo o National Eye Institute em 2025, e porque a impressão em preto e branco, o tema escuro e o reflexo na tela tiram a cor de todo mundo em algum momento. Nesta oficina você troca o estado de uma campanha, ativa a versão neutra e confere que forma, frase e cor comunicam o mesmo resultado. A interface deve dizer também o que a pessoa pode fazer em seguida.

Cenário de exercício

Quem

Otávio, da agência Mirante (exemplo didático), e a operadora do painel de campanhas que acompanha os envios do e-mail "Sua vaga está reservada".

Tarefa

Mostrar o estado de cada envio na lista de campanhas e no cartão de detalhe, com a mesma linguagem nos dois lugares e nos dois temas.

Falha vista

A primeira versão usava só um ponto verde ou vermelho ao lado do nome da campanha. A operadora, que usa o tema escuro, não distinguia o vermelho do marrom do fundo, e "Envio concluído" aparecia assim que o botão era clicado, antes da confirmação do provedor de envio.

Resultado esperado

Quatro estados com símbolo, frase e cor próprios; a frase diz o que aconteceu e o que fazer; a versão sem cor mantém a distinção; a conclusão só aparece depois da confirmação real.

Forma, frase e cor fazem o mesmo trabalho por três caminhos

O critério 1.4.1 da WCAG 2.2 (nível A) proíbe a cor como único meio de transmitir informação, e a forma mais barata de cumprir isso é dar a cada estado um símbolo distinto e uma frase específica. "Envio concluído" confirma uma etapa operacional; não comprova leitura, clique ou venda. Um selo de sucesso só deve aparecer após a confirmação correspondente, o que no caso da Mirante significava esperar o retorno do provedor em vez de reagir ao clique. Em falha, a interface preserva o conteúdo e oferece uma recuperação possível, como corrigir o endereço e tentar novamente.

Meça separadamente texto e desenho: texto comum precisa de contraste mínimo de 4,5:1 (critério 1.4.3, nível AA). Informação gráfica necessária à compreensão e identificação de controles exige 3:1 contra as cores adjacentes (critério 1.4.11, nível AA), com as exceções previstas. Um traço muito fino ainda pode ficar difícil de enxergar mesmo com contraste alto, como a seção Cor e contraste mostra.

Demonstração: troque o estado e retire a cor

O cartão abaixo é uma região de status: ele já existe no documento e só troca o conteúdo, o que permite ao leitor de tela anunciar a mudança sem mover o foco. Dados de exercício: quatro estados de uma campanha de e-mail e uma paleta neutra.

Execute a sequência que revela o problema

1. Passe de "Rascunho" para "Envio falhou". O símbolo muda de lápis para círculo com ponto de exclamação, a frase diz o que foi preservado e o que fazer, e a cor muda por último.
2. Marque "sem cores de estado" e percorra os quatro estados. Se dois ficarem iguais, a cor estava fazendo o trabalho sozinha.
3. Troque o tema do portal no topo da página e repita. Os tokens escuros preservam o contraste, e o traço continua visível.
4. Com um leitor de tela ativo, mude o estado sem tocar no cartão: a frase nova é anunciada e o foco fica onde estava.

Investigar as falhas

Código de referência

O bloco acompanha o estado escolhido e a paleta ativa; o documento gerado inclui os tokens do tema escuro e os avisos de licença dos desenhos.

<div role="status" aria-live="polite" aria-atomic="true">
  <span>Rascunho</span>
  <p>Revise a mensagem antes de programar o envio.</p>
</div>

Critérios de aceite

• Cada estado tem uma frase específica que diz o que aconteceu e o que fazer.
• A versão sem cores mantém os quatro estados distintos por forma e texto.
• Texto e ícone têm contraste medido nos dois temas, sobre o fundo real do cartão.
• A atualização é anunciada pelo leitor de tela sem deslocar o foco.
• O processamento continua claro com movimento reduzido.
• A conclusão só aparece depois da confirmação do sistema.
• A mensagem de falha orienta uma recuperação possível e preserva o conteúdo.

Levar para o projeto

Em React, mantenha um único componente de status com o mapa de estados em um objeto congelado (símbolo, frase, tokens) e nunca troque o elemento raiz, porque o leitor de tela só anuncia o que muda dentro de uma região viva já existente. Em listas longas do painel, a região viva fica fora da tabela e anuncia só a última mudança, para não ler 40 linhas. O guia de React mostra o padrão de operação cancelável que combina com estes estados, e a oficina da paleta de séries aplica a mesma regra de "sem cor" a gráficos. Na Mirante, o ponto colorido virou símbolo com frase, e a operadora passou a ler o estado no tema escuro sem precisar abrir o detalhe.

Oficina: transforme a escolha em um contrato visual

O pedido do cliente da Mirante por "ícones mais modernos" custou uma semana porque não havia contrato: a família foi trocada inteira, três ações do painel deixaram de ser reconhecidas e o e-mail perdeu os ícones no modo escuro. Registre a família, as medidas, o significado e as exceções em um contrato que a equipe possa repetir e que o agente de código consiga ler. Escolha um contexto abaixo para ver uma proposta inicial, adapte a especificação ao seu projeto e use o mesmo texto para orientar o designer ou o agente.

Cenário de exercício

Quem

Camila e Otávio, da agência Mirante (exemplo didático), com o cliente do curso de fotografia de produto, que pediu uma aparência mais atual.

Tarefa

Escrever um contrato de iconografia para as três peças (página de captação, painel de campanhas, e-mail de boas-vindas) que sobreviva à troca de designer e oriente o agente de código.

Falha vista

Sem contrato, o agente substituiu a família Lucide por desenhos preenchidos de outra biblioteca a partir de um pedido vago. "Duplicar" virou dois quadrados cheios parecidos com "colar", "arquivar" ganhou uma caixa igual à de "download" e o PNG escuro do e-mail sumiu no tema escuro do Outlook. Três símbolos saíram do reconhecimento num só commit.

Resultado esperado

Um texto com dez itens (família e versão, tamanho, alvo, função, rótulos, cor, estados, arquivo, acessibilidade, entrega) por contexto, versionado junto com o código, com a lista de exceções e o procedimento de revisão.

Uma especificação repetível liga o contexto ao teste da entrega

Token é um valor nomeado, como a cor de texto ou o tamanho do controle. Ao usar currentColor, o traço do SVG acompanha a cor calculada do elemento, o que facilita a troca de tema; ainda é necessário medir o contraste em cada fundo onde o ícone aparece. O contrato amarra esses tokens ao contexto: a página de captação trabalha com desenhos de 24 px e botões com texto; o painel denso usa 20 px com traço de 1,5 px e aceita ação secundária só com ícone, desde que nomeada e testada; o e-mail troca SVG por PNG e exige teste nos clientes do público.

O contrato também define o que o agente faz quando um símbolo falta. Em vez de inventar um desenho ou trocar de biblioteca, ele lista o símbolo ausente e pede decisão; a seção de família descreve a única exceção aceita, o símbolo isolado buscado em um agregador e registrado no build. Na Mirante, essa cláusula teria evitado o commit que trocou a família inteira.

Demonstração: escolha o contexto e leia o contrato gerado

Dados de exercício: três contextos com tamanhos de 24, 20 e 24 px e a mesma família, os mesmos números que a seção de referências globais justifica. A prévia de e-mail informa que não representa a renderização dos clientes de correio.

Execute a sequência e leia o que muda

1. Escolha "Painel de operação". O tamanho cai para 20 px e a regra de rótulo passa a aceitar ação secundária só com ícone, com nome acessível e teste de compreensão como condição.
2. Escolha "E-mail de relacionamento". O formato muda para PNG exportado a 48 px e exibido a 24, e a regra de alt aparece; a prévia avisa que não reproduz os clientes.
3. Copie o contrato com o botão do bloco de código e cole no arquivo DESIGN.md do projeto, ao lado dos tokens de cor, como o hub de Design recomenda.
4. Peça ao agente: "Aplique este contrato aos botões de baixar, agendar e enviar. Mantenha o texto visível, preserve o foco e mostre os estados de falha. Liste qualquer símbolo ausente da família antes de criar uma exceção". Revise a tela produzida com as tarefas reais, porque o contrato não testa a implementação sozinho.

Investigar as falhas

Código de referência

O contrato gerado é texto, para caber num DESIGN.md, num ticket ou no prompt do agente.

Família: Lucide, versão fixada no projeto.
Contexto: página de campanha.
Desenho: 24 px; traço de 2 px em grade 24 × 24.
Botões: área mínima de 44 × 44 CSS px e rótulo visível.
Significado: download para baixar; calendário para agendar; envelope para mensagem.
Cor: token do texto ou do estado, conferido nos temas claro e escuro.
Acessibilidade: SVG redundante oculto; botão nomeado pelo texto; foco visível.
Estados: forma e texto; cor como reforço. Movimento opcional.
Arquivo: SVG local; carregar apenas os símbolos usados.
Licença: preservar os avisos exigidos na distribuição.
Conferência: teclado, toque, zoom, contraste e entendimento da tarefa.

Critérios de aceite

• A família e a versão estão registradas no contrato e no gerenciador de pacotes.
• Tamanho do desenho e tamanho do alvo têm valores próprios por contexto.
• Os símbolos recorrentes têm função definida e a lista de exceções está escrita.
• Cores vêm de tokens e foram medidas nos dois temas sobre os fundos reais.
• Formato e licença correspondem ao canal de uso, com os avisos preservados.
• O contrato diz o que fazer com símbolo ausente e com pedido de troca de família.
• Uma pessoa de fora consegue executar a tarefa na tela entregue sem explicação do autor.

Levar para o projeto

Grave o contrato no DESIGN.md do repositório, ao lado dos tokens, como a oficina de DESIGN.md e tokens ensina, e acrescente uma verificação no build que falhe quando um SVG novo aparecer fora da pasta da família ou quando duas bibliotecas de ícones forem importadas; este portal usa um gate desse tipo para conferir os ícones Lucide. Em Figma, o mesmo contrato vira a descrição do componente de ícone, com as variantes de tamanho travadas nos valores do contrato. Na Mirante, o pedido por "ícones mais modernos" foi respondido com cantos mais arredondados e outro peso de traço dentro da mesma família, registrado como revisão do contrato, e os três símbolos do painel voltaram a ser reconhecidos no teste de compreensão.

Oficina: monte o sprite e dê o papel certo a cada uso

O mesmo desenho de envelope pode ser decoração ao lado da palavra "Enviar", o único conteúdo de um botão ou a informação inteira de um estado, e cada papel pede uma marcação diferente para o leitor de tela. Nesta oficina você escolhe os símbolos, gera um sprite SVG com <symbol>, troca o papel e lê a marcação correta de cada caso, com a conta de bytes entre repetir o SVG inline e referenciar o sprite com <use>. A seção Entrega técnica explica quando cada forma vale a pena; aqui você vê o resultado.

Cenário de exercício

Quem

Otávio, desenvolvedor da agência Mirante (exemplo didático), que entrega o painel de campanhas com 40 linhas, cada uma com três ações, e a página de captação com oito ícones de benefício.

Tarefa

Servir os mesmos oito desenhos nas duas páginas sem repetir o SVG 120 vezes no HTML do painel e sem perder o nome acessível de cada botão.

Falha vista

O agente de código inseriu o SVG inline em cada linha da tabela: o HTML do painel cresceu, e cada ícone trazia um <title> com o nome da ação ao lado de um botão que também tinha texto, de modo que o leitor de tela anunciava "Duplicar, Duplicar campanha". Na página, um SVGO com as regras padrão renomeou os ids do sprite e os <use> deixaram de encontrar os símbolos.

Resultado esperado

Um sprite com os símbolos usados, posicionado fora da tela, ids com prefixo próprio; marcação decorativa nas ações com texto, aria-label nos botões só com ícone e role="img" com título nos ícones informativos; SVGO configurado para não apagar ids.

Três papéis, uma regra para cada

O tutorial de imagens da WAI separa imagem decorativa, informativa e funcional, e a distinção decide a marcação. Decorativo ao lado de texto: o SVG recebe aria-hidden="true" e focusable="false", porque o texto já nomeia a ação. Funcional sem texto visível: o nome vai no controle, por aria-label ou texto visualmente oculto, e o SVG continua decorativo; essa é a recomendação de Sara Soueidan em 2019 para botões só com ícone. Informativo sem texto ao lado: o próprio SVG vira imagem nomeada, com role="img" e um <title> ligado por aria-labelledby, porque sem a ligação alguns leitores ignoram o título.

O sprite muda a forma de entregar o desenho; o papel continua o mesmo. Um <svg> escondido no início do documento reúne os <symbol>; cada uso aponta para o id com <use href="#i-download">. A MDN registra que a referência a um arquivo externo pode esbarrar na política de mesma origem sem forma de configurar CORS, e que xlink:href ficou obsoleto no SVG 2; por isso o exemplo usa href e o sprite no próprio documento ou no mesmo domínio.

Demonstração: escolha os símbolos, o papel e as repetições

Dados de exercício: oito símbolos da família Lucide 1.27.0, três papéis e três cenários de repetição (uma vez, cinco vezes, 20 vezes por símbolo). A prévia desenha os símbolos a partir do sprite abaixo em vez de SVGs inline; inspecione um deles para ver o <use>.

Execute a sequência e compare as marcações

1. Com três símbolos e "1 vez", leia a medida: o sprite custa mais bytes que o inline, porque o sprite paga o cabeçalho dos símbolos sem reaproveitar nada. Troque para "20 vezes": o sprite passa a custar uma fração.
2. Mude o papel para "Funcional". A marcação de uso ganha aria-label no botão e o SVG continua aria-hidden; a prévia mostra o nome acessível de cada botão.
3. Mude para "Informativo". O SVG recebe role="img", um <title> com id e aria-labelledby apontando para ele; sem texto ao lado, é o único nome disponível.
4. Marque "Concluído" e "Atenção" no papel informativo: são os casos em que o ícone comunica estado sem frase, o que a oficina de estados recomenda evitar; aqui ele serve para mostrar a marcação correta quando o espaço não permite texto.

Investigar as falhas

A árvore de acessibilidade do navegador mostra o nome calculado de cada botão e de cada imagem; o painel de rede mostra se o sprite externo foi buscado e cacheado. As linhas abaixo usam esses dois instrumentos.

Código de referência

O primeiro bloco é o sprite com os símbolos marcados, pronto para salvar como arquivo ou colar no início do <body>; ele começa pelos avisos de licença dos desenhos. O segundo é a marcação de uso no papel escolhido. Os dois acompanham os controles.

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true" focusable="false">
  <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">...</symbol>
</svg>

<a href="#" class="acao">
  <svg class="icone" width="20" height="20" aria-hidden="true" focusable="false"><use href="#i-download"></use></svg>
  Baixar checklist <small>(PDF, 240 KB)</small>
</a>

// Configuração do SVGO para sprites e SVGs com aria-labelledby:
// os ids são parte do contrato, não lixo a remover.
module.exports = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          cleanupIds: false,   // preserva i-download, t-check etc.
          removeViewBox: false // o viewBox permite redimensionar por CSS
        }
      }
    }
  ]
};

Critérios de aceite

• O sprite contém só os símbolos usados nas páginas, com ids prefixados.
• O sprite fica escondido por posicionamento fora da tela em vez de display:none.
• Ícone ao lado de texto tem aria-hidden="true" e focusable="false".
• Botão só com ícone tem nome no próprio botão, igual ao rótulo que a interface usaria.
• Ícone informativo sem texto tem role="img" e title ligado por aria-labelledby.
• Nenhuma cor fixa dentro dos símbolos; o uso declara currentColor e o tema escuro foi conferido.
• O SVGO do projeto preserva ids e viewBox; o teste de build falha se um <use> apontar para id inexistente.

Levar para o projeto

Gere o sprite no build a partir da pasta de símbolos, em vez de editá-lo à mão: um script lê os SVGs escolhidos, prefixa os ids, remove cores fixas e grava o arquivo; outro confere que cada <use> das páginas aponta para um id existente, o que este portal faz com o gate de ícones Lucide. Em React, o componente de ícone recebe o nome e o papel e produz a marcação certa; um teste de acessibilidade com a árvore de nomes pega o título duplicado antes do deploy. Na Mirante, Otávio trocou os 120 SVGs inline do painel por um sprite de oito símbolos e um componente com a propriedade papel, e o leitor de tela parou de anunciar "Duplicar, Duplicar campanha".

Oficina: o ícone do e-mail quando a imagem não carrega

No e-mail, o ícone é uma imagem que pode não aparecer, e a mensagem precisa continuar inteira sem ela. Nesta oficina você simula três condições do cliente de correio (imagens carregadas, bloqueadas e modo escuro com fundo invertido), três escolhas de texto alternativo e três formas de exportar o PNG, e lê o que a pessoa vê e o que o leitor de tela anuncia em cada combinação. O Can I email registrou em 16 de setembro de 2026 que SVG vinculado em <img> chega a 97,62% de suporte com o Gmail convertendo para PNG, enquanto fontes de ícones por @font-face ficam em 24,39%; o caminho seguro continua sendo PNG exportado a 2x com texto ao lado.

Cenário de exercício

Quem

Camila, designer da agência Mirante (exemplo didático), e a pessoa que monta o e-mail de boas-vindas "Sua vaga no curso de fotografia de produto está reservada".

Tarefa

Entregar a lista de três benefícios com ícone ao lado e o botão de confirmação, de modo que a mensagem funcione com imagens bloqueadas, no modo escuro e com leitor de tela.

Falha vista

A primeira versão exportou os ícones com traço escuro em fundo transparente, a 1x, sem alt. No Outlook com fundo escuro os ícones sumiram; no celular com tela de alta densidade ficaram borrados; com imagens bloqueadas o leitor de tela anunciava "icone-calendario.png" antes de cada linha.

Resultado esperado

PNG exportado a 48 × 48 px e exibido a 24 × 24, com o próprio fundo claro dentro da imagem, alt="" quando o texto ao lado já diz tudo, width e height declarados, botão em texto sobre célula colorida e teste nos clientes do público antes do envio.

O que muda entre a página e a caixa de entrada

Na página, o SVG inline herda cor, escala sem perder nitidez e responde ao tema. No e-mail, o Gmail converte o SVG vinculado em PNG, o Outlook para Windows troca fontes desconhecidas por Times New Roman e os clientes escurecem o fundo sem avisar. O Litmus descreveu em 27 de fevereiro de 2025 dois comportamentos: inversão parcial em Outlook.com, aplicativos Outlook e Gmail para Android, e inversão total em Outlook 2021 para Windows e Gmail para iOS. Um PNG transparente com traço escuro desaparece nos dois casos. A saída que o Litmus recomenda e esta oficina aplica: declarar color-scheme no cabeçalho e dar ao ícone um fundo próprio dentro da imagem.

O texto alternativo tem três estados, e dois deles estão certos em situações diferentes. Quando a imagem repete o texto ao lado, alt="" faz o leitor de tela pular a imagem (tutorial de imagens da WAI, imagem decorativa). Quando a imagem traz informação própria, o alt diz essa informação. Sem o atributo, o cliente e o leitor de tela decidem por você, e a decisão costuma ser o nome do arquivo.

Demonstração: combine condição, alt e arquivo

Dados de exercício: um e-mail de boas-vindas com três benefícios, botão de confirmação e três arquivos de ícone da mesma família. A prévia simula o comportamento descrito pelas fontes; o envio de teste nos clientes reais continua obrigatório.

Execute a sequência que o cliente de correio impõe

1. Mantenha o arquivo "traço escuro, fundo transparente" e escolha "Modo escuro com fundo invertido". Os três ícones somem: é o que o Litmus descreveu para a inversão total.
2. Troque para "traço escuro sobre círculo claro" na mesma condição. O ícone volta, porque carrega o próprio fundo; esse arquivo também funciona no modo claro.
3. Escolha "Imagens bloqueadas" com "alt vazio". Nada ocupa o lugar dos ícones e as três frases continuam legíveis; a linha de leitura diz que o leitor de tela pula a imagem.
4. Troque para "sem atributo alt". O nome do arquivo aparece no lugar do ícone em alguns clientes, e o leitor de tela pode anunciá-lo antes de cada linha.
5. Escolha "alt descritivo" e repare na repetição: "Calendário" seguido de "Lembrete 24 horas antes de cada aula". O alt descritivo só vale quando a imagem diz algo que o texto não diz.

Investigar as falhas

Código de referência

O bloco acompanha os três controles: a variante do arquivo vai no comentário, o alt na tag e a tabela mantém a célula da imagem separada da célula do texto. Os endereços são fictícios.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="40" valign="top">
      <img src="https://exemplo.invalid/icone-calendario@2x.png" width="24" height="24" alt="" style="display:block;border:0">
    </td>
    <td valign="top" style="font:16px/1.5 Arial,sans-serif;color:#20242c">Lembrete 24 horas antes de cada aula ao vivo.</td>
  </tr>
</table>

Critérios de aceite

• Cada ícone é PNG exportado a 2x, com width e height declarados no tamanho de exibição.
• O arquivo carrega o próprio fundo quando o público usa modo escuro, e o cabeçalho declara color-scheme.
• Imagem que repete o texto tem alt vazio; imagem com informação própria tem alt que a comunica.
• Com imagens bloqueadas, benefícios e botão continuam legíveis e acionáveis.
• Nenhum SVG inline nem fonte de ícones no corpo do e-mail.
• O envio de teste cobriu os clientes mais usados pelo público, nos modos claro e escuro.
• O leitor de tela percorre a lista sem anunciar nome de arquivo.

Levar para o projeto

Descubra os clientes do seu público no relatório de aberturas do provedor de envio e teste nesses, com um serviço de prévia por cliente ou com contas reais nos aparelhos do time; a prévia desta oficina reproduz o comportamento descrito pelas fontes; o cliente em si só o envio de teste mostra. Guarde os PNGs exportados ao lado do sprite da página, com o mesmo nome de símbolo e o sufixo "@2x", para que o contrato da oficina de contrato visual aponte para um arquivo por canal. Na Mirante, Camila reexportou os três ícones sobre círculo claro, a 48 px, e o e-mail passou a mostrar os benefícios no Outlook escuro da cliente, que foi quem reclamou primeiro.

Oficina: teste de compreensão em cinco minutos

Zero de 107 pessoas associou o ícone de brilhos à inteligência artificial no estudo do NN/g em 2024, e o time que escolheu o símbolo tinha certeza do contrário. Um teste de compreensão separa a certeza da equipe do entendimento do público, e cabe em cinco minutos por pessoa. Nesta oficina você responde o que seis símbolos significam, primeiro isolados e depois em contexto, vê a taxa de acerto por símbolo e exporta a tabela para repetir o teste com dez pessoas do público. O resultado de uma pessoa serve para aprender o método; a decisão sobre o símbolo vem da amostra.

Cenário de exercício

Quem

Camila, designer da agência Mirante (exemplo didático), e dez pessoas da base do curso de fotografia de produto que aceitaram responder a um teste curto.

Tarefa

Decidir se seis ícones do painel e da página (salvar material, filtrar, notificações, compartilhar, duplicar, gerar com IA) podem aparecer sem rótulo em ações secundárias.

Falha vista

A decisão anterior foi tomada numa reunião do time, que reconheceu todos os símbolos. Depois da troca de família, "duplicar" passou a ser lido como "colar" e "filtrar" como "funil de vendas" por quem usava o painel, e ninguém mediu.

Resultado esperado

Tabela com acerto por símbolo, isolado e em contexto, numa amostra do público; símbolos abaixo do ponto de corte ganham rótulo visível; os demais podem ficar só com nome acessível em ações secundárias, com a decisão registrada no contrato.

Isolado, em contexto e o ponto de corte

O NN/g recomenda duas rodadas: o símbolo sozinho mede o reconhecimento da forma, e o símbolo na tela mede a compreensão da função, que é o que importa. Um ícone que ninguém reconhece isolado pode funcionar ao lado de "Campanhas (32)" e de um botão "Nova campanha", porque o contexto fecha o significado; o contrário também acontece, quando o contexto sugere outra função.

O ponto de corte que esta oficina adota é 85% de acertos, o critério da ANSI Z535.3 de 2022 para símbolos de segurança, que também exige no máximo 5% de confusões críticas, isto é, respostas que levariam à ação oposta. A ISO 9186-1:2014 descreve o método de teste de compreensão, e o limiar numérico dela não foi confirmado na pesquisa deste guia. Para ícones de interface comuns, a equipe pode fixar outro ponto, desde que registrado no contrato; para ação destrutiva ou de cobrança sem texto, a barra de 85% da ANSI Z535.3 (2022) é a recomendação deste guia.

Demonstração: responda às duas rodadas

Dados de exercício: seis símbolos da família Lucide 1.27.0, cada um com um significado pretendido pelo projeto e três alternativas plausíveis. Escolha a rodada, comece e responda sem procurar o significado no restante da página. Nada é enviado nem guardado.

Execute a sequência e compare as rodadas

1. Faça a rodada isolada inteira. Anote qual símbolo você respondeu com "Não sei" ou com uma alternativa: é o que acontece com um público que nunca viu o painel.
2. Troque para "Símbolo em contexto" e comece de novo. O cartão "Campanhas (32)" com o botão "Nova campanha" costuma fechar o significado de filtrar; o cartão com "Editar" e "Excluir" fecha o de duplicar.
3. Leia o resumo: as duas taxas aparecem lado a lado com o ponto de corte de 85%. Com uma pessoa, qualquer erro derruba a taxa para 83%; é por isso que a decisão precisa da amostra.
4. Copie a tabela gerada e cole numa planilha; repita com dez pessoas do público e calcule a taxa por símbolo.

Protocolo manual para aplicar com o público

1. Recrute dez pessoas do público real, fora do time; registre o canal onde elas usam o produto.
2. Rodada isolada: mostre cada símbolo sozinho, a 32 px, por até cinco segundos, e pergunte "o que você acha que isso faz?" com resposta livre; anote a resposta literal.
3. Rodada em contexto: mostre o mesmo símbolo na tela ou no protótipo, sem rótulo, e repita a pergunta.
4. Classifique cada resposta como acerto, erro ou confusão crítica (ação oposta ou destrutiva), conforme a ANSI Z535.3.
5. Calcule a taxa por símbolo e por rodada; abaixo do ponto de corte, o símbolo ganha rótulo visível; acima, pode ficar só com nome acessível em ação secundária, com a decisão no contrato.

Investigar as falhas

Código de referência

O primeiro bloco recebe a tabela da sua rodada, separada por ponto e vírgula, para colar numa planilha. O segundo é o modelo do protocolo, para copiar no documento do projeto.

simbolo;significado_pretendido;modo;resposta;acerto

# Teste de compreensão de ícones

Produto e tela: painel de campanhas (exemplo didático)
Participantes: 10 pessoas do público, sem contato prévio com a tela
Ponto de corte: 85% de acertos e no máximo 5% de confusões críticas
  (ANSI Z535.3, 2022; a equipe pode registrar outro ponto no contrato)

## Rodada 1: símbolo isolado (32 px, fundo neutro, até 5 s)
Pergunta: "O que você acha que isto faz?"

## Rodada 2: símbolo em contexto (tela ou protótipo, sem rótulo)
Pergunta: "O que acontece se você tocar aqui?"

## Registro por resposta
simbolo;participante;rodada;resposta_literal;classificacao
(classificacao: acerto | erro | nao_sei | confusao_critica)

## Decisão por símbolo
abaixo do ponto de corte: rótulo visível
acima do ponto de corte: nome acessível em ação secundária, registrado no contrato

Critérios de aceite

• Os participantes vieram do público do canal, fora do time.
• Cada símbolo foi testado isolado e em contexto, com pergunta aberta.
• "Não sei" e confusão crítica foram registrados como categorias próprias.
• A taxa de cada símbolo vem acompanhada da quantidade de respostas.
• Símbolos abaixo do ponto de corte receberam rótulo visível na tela entregue.
• O ponto de corte adotado e a decisão por símbolo estão escritos no contrato visual.
• O teste será repetido quando a família ou o contexto do símbolo mudar.

Levar para o projeto

Transforme o protocolo num formulário com uma pergunta aberta por símbolo e uma imagem por pergunta, envie para dez pessoas da base e classifique as respostas na planilha; o custo é uma hora de leitura. Repita sempre que a família mudar, porque o resultado pertence ao desenho testado em vez do conceito. Na Mirante, o teste com dez alunos mostrou "duplicar" em 60% de acertos isolado e 90% em contexto (números do exemplo didático, outubro de 2026), e Camila manteve o rótulo visível na página, onde não há contexto de tabela, e só o nome acessível na linha do painel, onde "Editar" e "Excluir" ao lado fecham o sentido.

Prepare os arquivos para cada canal e confira a tarefa com outra pessoa antes de publicar

O defeito mais caro da primeira versão da Mirante (exemplo didático, agência fictícia) apareceu no lugar que ninguém abriu antes do envio: o e-mail "Sua vaga está reservada" num celular em modo escuro, com os ícones de traço escuro sumindo sobre o fundo escurecido pelo aplicativo. O arquivo era o mesmo da página de captação, que estava certa. Cada canal pede um formato, um tamanho e um teste próprios, e a preparação termina quando uma pessoa que não participou do projeto consegue executar a tarefa sem explicação do autor.

Na web, SVG com os desenhos usados

Na web, prefira SVG para símbolos simples e carregue só os desenhos usados. SVG é um formato vetorial, que preserva a nitidez ao ampliar. Reaproveitar o conjunto local evita baixar uma biblioteca inteira apenas para apresentar alguns ícones; a seção Entrega técnica mostra quando cada forma de entrega compensa.

Um SVG inserido no HTML permite ajustar cor e tamanho por CSS. Como arquivo em <img>, ele precisa de texto alternativo quando transmite informação; se repete o texto próximo, use alt="". Uma figura informativa independente precisa de nome e descrição adequados, em vez de ser escondida da tecnologia assistiva.

Para ilustrações maiores, escreva o objetivo antes do pedido visual: "Explique o caminho do cadastro à confirmação usando três etapas". Mantenha as palavras em texto da página, fora da imagem, e evite inventar interfaces ou resultados do produto. Para uma sequência que precisa ser lida e editada, use o material de diagramas.

E-mail: PNG a 2x, alt e modo escuro

No e-mail, diferencie SVG incorporado de SVG vinculado como imagem, porque a compatibilidade muda por aplicativo e versão. A matriz do Can I email, com último teste em 16/09/2026, dá ao SVG vinculado em <img> suporte estimado de 97,62%, somando 88,10% de suporte total e 9,52% de parcial. O parcial é o Gmail, que na web e nos aplicativos converte o SVG em PNG antes de exibir. O desenho chega sem a nitidez vetorial e sem as regras de cor do arquivo. A matriz não substitui o envio de teste.

Fonte de ícones fica fora do e-mail. O Can I email registra para @font-face suporte estimado de 24,39%, com último teste em 19/12/2023: o Gmail não aceita fontes externas, e o Outlook para Windows, nas versões de 2007 a 2016, ignora a pilha de fontes e cai para Times New Roman. Um ícone de fonte nessas caixas vira uma letra solta no meio do botão.

O modo escuro é o terceiro filtro, e o Litmus, em guia atualizado em 27/02/2025, separa três comportamentos. Apple Mail, Gmail no desktop e Yahoo não mexem nas cores. Outlook.com, os aplicativos Outlook para iOS e Android e o aplicativo Gmail para Android fazem inversão parcial: o claro vira escuro e o escuro fica como está. Outlook 2021 para Windows, Office 365 para Windows e o aplicativo Gmail para iOS fazem inversão total, inclusive das áreas escuras. Um PNG transparente com traço escuro, como o da Mirante, some quando o fundo escurece e o desenho não.

A preparação que atravessa os três filtros é PNG exportado em 2x, ou seja, um arquivo de 48 × 48 px exibido a 24 × 24 px, com largura e altura declaradas no HTML, alt vazio quando o texto ao lado já diz a ação e alt descritivo quando o ícone é o único portador da informação. Para o modo escuro, o Litmus recomenda dar ao PNG transparente um contorno translúcido claro ou uma forma de fundo, e declarar no <head> que a mensagem aceita os dois esquemas de cor. Botão e mensagem continuam em texto, para que a ação sobreviva ao bloqueio de imagens.

<head>
  <!-- Declara que a mensagem foi preparada para claro e escuro -->
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
</head>

<!-- PNG em 2x: arquivo de 48 px exibido a 24 px, com contorno claro translúcido -->
<img src="https://exemplo.com/email/icone-calendario-48.png"
     width="24" height="24" alt=""
     style="display:block; border:0;">
<!-- A ação continua em texto; o ícone ao lado é decorativo -->
<a href="https://exemplo.com/aula-1">Ver a data da primeira aula</a>

A oficina de e-mail sem imagem percorre o mesmo e-mail com as imagens bloqueadas.

Licenças que viajam com o arquivo

Preserve avisos de licença junto aos ativos distribuídos. A licença ISC do Lucide permite uso, alteração e distribuição sob suas condições, e o arquivo de licença do projeto carrega também o aviso do Feather, conjunto do qual o Lucide derivou; os dois avisos acompanham o sprite quando ele sai do repositório. "Gratuito" não significa ausência de obrigações, e cada biblioteca cobra uma coisa diferente:

• Font Awesome Free: ícones sob CC BY 4.0, fontes sob SIL OFL 1.1 e código sob MIT, com atribuição obrigatória; os arquivos baixados já trazem a atribuição em comentário, que não pode ser apagado na otimização.
• Remix Icon License v1.0, vigente desde janeiro de 2026: permite uso comercial e alteração, proíbe revender os ícones como pacote, montar biblioteca concorrente e usar o desenho como logotipo ou marca.
• SF Symbols: conforme a licença da Apple, o uso fica restrito às interfaces de aplicativos para plataformas Apple, então o símbolo não entra em página web, e-mail ou peça de rede de uma agência.

Símbolos de marca, fotos e ilustrações podem ter termos próprios. Não transforme ícone de escudo, medalha ou selo em uma credencial inexistente.

Marcas de terceiros

Ícone de rede social no rodapé de e-mail ou de página é uso permitido quando aponta para o perfil oficial do cliente e segue o manual de cada marca. As páginas oficiais lidas nesta pesquisa coincidem no núcleo da regra: WhatsApp, Instagram e LinkedIn aceitam só o arquivo distribuído pela própria empresa, vetam recolorir, alterar a forma ou combinar a marca com outros elementos, e não deixam que ela seja o elemento mais destacado da peça nem sugira parceria. Versão "estilizada", com contorno, gradiente ou forma alterada, viola o manual.

Fora do rodapé, a regra fica mais estreita. O WhatsApp exige aprovação prévia por escrito para mercadoria, e o Instagram pede permissão para peça impressa maior que A4, para mídia exterior e para televisão, com pedido em inglês, maquete e prazo de revisão que pode passar de duas a três semanas. O LinkedIn só admite usos fora das diretrizes com permissão expressa de um representante autorizado. Para o Pix, a referência é o Manual de Uso da Marca publicado pelo Banco Central do Brasil como anexo do regulamento; os números de área de proteção e redução máxima estão na seção Cultura.

Checklist por canal

A tabela resume o que cada canal recebe e o teste sem o qual a peça não sai. O nome acessível segue os três papéis da seção Entrega técnica: decorativo, funcional e informativo.

Cinco testes antes de ampliar

1. Teste significado. Mostre o símbolo isolado e peça a interpretação. Em seguida, apresente a interface e observe uma tarefa, como encontrar campanhas ativas.
2. Teste operação. Use teclado, toque e zoom. Confira foco, área clicável e ausência de sobreposição; repita em tela estreita.
3. Teste percepção. Compare temas claro e escuro, estados sem cor e movimento reduzido. Meça texto e formas separadamente.
4. Teste ausência. Bloqueie a imagem ou desligue JavaScript. A instrução principal e o destino da ação devem continuar compreensíveis.
5. Registre o resultado. Anote tarefa, interpretação, erro e correção. Corrija a ambiguidade antes de ampliar a aplicação para outras telas.

O pacote de entrega da Mirante

Na segunda versão, a Mirante entregou ao cliente um pacote com quatro peças em vez de uma pasta de ícones. O sprite.svg do painel e da página, com ids prefixados, os avisos de licença do Lucide e do Feather no topo e o arquivo de configuração do SVGO que preserva os ids. Os PNG em 2x do e-mail, com contorno claro, cada um com o alt que deve receber. O contrato visual de uma página, com família, versão, espessura de traço, tamanhos e a função de cada símbolo, descrito na oficina de contrato visual. E a tabela de teste, com as três ações do painel que a troca de família tinha quebrado e a interpretação de cada pessoa antes e depois da correção.

O e-mail "Sua vaga está reservada" passou no modo escuro do Gmail para iOS e do Outlook para Windows no envio de teste, e duplicar, arquivar e filtrar voltaram a ser reconhecidos por quem usa o painel todos os dias. Escolha hoje um botão, um estado e um card do projeto. Aplique o contrato e peça a outra pessoa para usá-los sem orientação; ajuste o que ela interpretar de forma diferente.

Comece por quatro perguntas e por um botão real do projeto

Quatro perguntas, feitas nesta ordem, cobrem quase tudo o que este guia examinou, e cada uma tem uma oficina ou seção que a confere. Use-as antes de aprovar qualquer troca de família, novo pictograma ou ícone sem texto, inclusive quando o pedido vier formulado como gosto ("deixa mais moderno"), porque foi esse tipo de pedido que abriu o caso da agência Mirante, exemplo didático deste material.

A decisão em quatro perguntas

1. A pessoa reconhece a forma? Mostre o desenho isolado e peça que ela diga o que vê. Fora da lista curta de casa, impressora e lupa, a resposta não é garantida. Confira com a oficina de teste de compreensão e com os números da seção Evidência.
2. Ela entende a função nesta tela? Reconhecer um envelope não diz se o botão envia, lê ou assina. A matriz de frequência e familiaridade da seção Escolher o elemento decide se o rótulo fica, e a oficina de rótulo e alvo mostra como mantê-lo sem perder espaço.
3. Ela consegue acionar com dedo, teclado e zoom? O desenho pode ter 20 px e o botão precisa de área própria, foco visível e contraste medido nos dois temas. Use a mesma oficina de rótulo e alvo e a seção Cor e contraste.
4. A peça sobrevive sem a imagem? Bloqueie as imagens do e-mail, desligue o JavaScript da página e retire as cores dos estados. A ação principal e o destino precisam continuar legíveis. A oficina do e-mail sem imagem e a oficina de estados visuais fazem essa conferência.

Responda "não" a qualquer uma e a decisão volta um passo: o ícone ganha rótulo, o alvo cresce, o estado ganha forma e palavra, ou a ação vira texto. Nenhuma das quatro perguntas depende de estilo, e é por isso que o estilo pode mudar depois delas sem quebrar a tarefa.

A segunda-feira da Mirante

Na volta do incidente, Camila e Otávio dividiram a semana em três artefatos, cada um com seu critério de pronto. Camila começou pelo contrato visual: família de contorno mantida, versão fixada, desenho de 20 px nos botões, traço de referência, rótulo visível nas ações do painel e a regra de frequência e familiaridade anexada. O contrato ficou pronto quando Otávio conseguiu colá-lo no agente de código e receber, sem pergunta adicional, os botões de duplicar, arquivar e filtrar com texto, foco visível e a lista de símbolos sem correspondente na família.

Otávio montou em seguida o sprite acessível, carregando só os símbolos usados nas três peças e ocultando dos leitores de tela os desenhos redundantes. Para o e-mail, gerou versões em PNG com fundo próprio, claro e opaco, em vez do traço escuro sobre transparência que havia desaparecido no modo escuro. O sprite ficou pronto quando o nome acessível de cada botão passou a coincidir com o rótulo visível e o e-mail de teste mostrou os ícones nos clientes de correio da lista da agência, nos dois temas.

O terceiro artefato foi a tabela de teste: cada ícone sem texto, a pergunta aberta feita às pessoas, as respostas classificadas em corretas, erradas e confusões críticas, e a barra de aprovação declarada antes da primeira sessão. A equipe usou como referência o critério da ANSI Z535.3, registrado pelo IIID em 1991, de 85% de acertos, contando os acertos em unidades porque o grupo era pequeno.

O estado da Mirante no fim da semana é diferente do da abertura. As três ações do painel voltaram a ser reconhecidas no segundo teste, agora com rótulo e com o traço da família original; o e-mail "Sua vaga está reservada" passou a levar o ícone com fundo próprio e a ação "Acessar a primeira aula" em texto, legível com imagens bloqueadas; e o cliente recebeu a sensação de novidade pelos cantos e pelo peso do traço, sem perder uma única silhueta conhecida. Faça o mesmo com um botão, um estado e um card do seu projeto nesta semana, e considere a tarefa pronta quando outra pessoa usar os três sem que você explique nada.

Fontes para conferir e aprofundar

As recomendações combinam documentação oficial de sistemas de design e de bibliotecas, estudos de usabilidade com autor e data, normas técnicas e os critérios da WCAG 2.2. As aplicações ao trabalho de agência são propostas deste material, identificadas como exemplos didáticos. Consulta em 22 de outubro de 2026; páginas de documentação mudam, por isso cada fonte traz o endereço completo.

Voltar aos materiais de Design