1.1 Ícone, ilustração, logo, pictograma

Um ícone de "lixeira" pode aparecer em 200 telas; um logo aparece em uma marca. Ícone é vocabulário; logo é nome próprio. Ver a apostila Logótipos & Lettering.

1.2 Para que serve um ícone

• Acelerar o reconhecimento de uma função já conhecida (o "🔍" para busca).
• Economizar espaço onde o rótulo não cabe (barra de ferramentas, mobile).
• Ancorar visualmente um item numa lista, um tipo de conteúdo, um status.
• Dar personalidade e ritmo visual (com parcimônia).

1.3 O mito do ícone universal

Pouquíssimos ícones são realmente entendidos sem aprendizado: lupa (busca), casa (início), engrenagem (configurações), X (fechar), setas. A maioria — o disquete de "salvar", o "hambúrguer", os três pontinhos, o coração vs estrela vs marcador — é convenção aprendida, e varia por plataforma, cultura e faixa etária. Um ícone ambíguo sem rótulo é uma adivinhação.

1.4 Quando NÃO usar um ícone

• Quando não existe uma metáfora clara (muitos conceitos abstratos não têm) — um rótulo é melhor que um ícone que ninguém entende.
• Quando o ícone só "decora" e compete com a informação.
• Quando cada item de uma lista ganha um ícone diferente e o conjunto vira ruído — ícone ajuda a distinguir tipos, não a enfeitar linhas.

2.1 Canvas, live area e trim

• Canvas / artboard: a caixa total do ícone (ex.: 24×24). É o viewBox do SVG.
• Padding / margem de segurança: uma faixa em volta que o desenho normalmente não toca (ex.: 2px num grid de 24) — dá respiro e evita cortes ao alinhar com texto.
• Live area: a área central onde o ícone vive (ex.: 20×20 dentro de 24).
• Trim/bounding box: a caixa real do desenho — varia por ícone; é o que o ajuste óptico equaliza (Módulo 5).

2.2 Keyline shapes

Um conjunto de formas de referência — quadrado, círculo, retângulo em pé, retângulo deitado — cada uma com uma área visual equivalente (não a mesma medida). Você encaixa cada ícone na keyline que melhor lhe serve: um ícone "quadrado" (câmera) usa o quadrado; um "redondo" (relógio) usa o círculo, que é um pouco maior para compensar o overshoot (ver Logótipos & Lettering, Módulo 5). É isso que faz uma câmera e um relógio parecerem do mesmo tamanho na barra.

2.3 O grid de pixels

• Ícones de UI são vistos em tamanhos pequenos e fixos: alinhar os traços ao grid de pixels evita bordas borradas (anti-aliasing indesejado).
• Desenhe no tamanho-alvo (ou num múltiplo exato): um ícone pensado em 24 e usado em 24 fica nítido; o mesmo desenho escalado para 19px fica mole.
• Traços em número inteiro de pixels (1, 1.5, 2), posicionados em coordenadas inteiras (ou em .5 para traços de largura ímpar centrados).

2.4 Densidades / a escala de tamanhos

Famílias sérias entregam desenhos otimizados por tamanho (o de 16 não é o de 24 encolhido) — é o "optical size" da tipografia aplicado a ícone.

3.1 Os estilos

Padrão comum: line para o repouso, solid para o estado ativo (a mesma metáfora, dois pesos) — como a tab bar do iOS.

3.2 Os parâmetros que definem a família

• Largura de traço (stroke): um valor (1.5 ou 2px em 24). É a decisão de estilo mais visível.
• Terminação (line cap): reta (butt), arredondada (round) ou quadrada (square) — escolha uma.
• Junção (line join): miter (canto vivo), round, bevel — coerência.
• Raio de canto: uma unidade (0 = geométrico duro; 2px = amigável; grande = "bolha").
• Ângulos: restringir a 0/45/90 (e talvez 30/60) — nada de ângulos avulsos.
• Nível de detalhe / densidade: quantos elementos por ícone; menos é mais legível em pequeno.
• Metáfora: a mesma ideia representada do mesmo jeito em toda a família (um "documento" é sempre a mesma folha).

3.3 Famílias públicas de referência

• Lucide (fork mantido do Feather): line, 24px, traço 2px, cantos redondos — ótimo default open source.
• Phosphor: 6 pesos (thin → fill, incluindo duotone), muito grande.
• Material Symbols (Google): variável — eixos weight, fill, grade, optical size.
• SF Symbols (Apple): integrado ao sistema, pesos alinhados à fonte, só para plataformas Apple.
• Heroicons (Tailwind): outline + solid + mini; Tabler: enorme, line; Radix Icons: 15px, minimalistas.
• Para escolher: estilo alinhado à marca, cobertura de conceitos, licença (a maioria é MIT/OFL/Apache — confira), formato (SVG, componentes), e se tem pesos/variantes.

4.1 Da ideia à forma

• Escolha a metáfora certa: a mais convencional para a função (não a mais criativa). Veja como 5 famílias resolvem aquele conceito antes de inventar.
• Reduza ao essencial: o que, removido, faz o ícone deixar de ser reconhecível? Tudo além disso é ruído.
• Uma metáfora por ícone: "compartilhar por e-mail" não é um envelope + uma seta + um @ — escolha.

4.2 Construção no vetor

• Trabalhe no grid do Módulo 2, com snapping ligado.
• Formas primitivas + booleanas: construa a partir de retângulos, círculos e linhas, unindo/subtraindo — mais preciso e regular que desenhar tudo com a Pen. Ver a apostila Adobe Illustrator.
• Traço vs contorno: desenhe com stroke para iterar (fácil mudar a espessura); ao final, expanda o traço em forma (outline stroke) para o SVG de produção — assim o ícone escala sem o traço engrossar/afinar de forma indesejada e aceita fill.
• Curvas limpas: poucos nós, alças ortogonais nos extremos (mesma disciplina de Logótipos & Lettering, Módulo 4).
• Ângulos consistentes: diagonais sempre a 45° (ou o ângulo que a família adotou).

4.3 Encaixe óptico no grid

• Traços colados nos pixels: um traço de 2px vive entre linhas inteiras da grade; um de 1px, centrado em .5.
• Formas simétricas de verdade (espelhe, não desenhe os dois lados).
• Elementos que "encostam" na borda da live area por decisão (o ícone parece maior) vs elementos com respiro — coerência dentro da família.

4.4 Testar

• Veja o ícone em 16, 20 e 24px reais, em preto sobre branco e branco sobre preto, ao lado de texto.
• Coloque-o na grade com os vizinhos da família — é aí que se vê inconsistência de peso e tamanho (Módulo 5).
• Mostre para alguém sem contexto: "o que este ícone faz?".

5.1 Peso visual uniforme

• Um ícone com muitos traços (um calendário com grade) parece mais escuro/pesado que um com poucos (uma gota). Compense: menos densidade interna, ou traço levemente mais fino nos "cheios".
• Um ícone solid tem muito mais massa que um line do mesmo tamanho — por isso a variante solid de uma família às vezes é um pouco menor na live area.
• O olho compara a quantidade de preto na caixa. O alvo é: em uma grade da família inteira, nenhum ícone "salta" por ser mais pesado ou mais leve.

5.2 Tamanho percebido

• Formas redondas e pontudas precisam de overshoot: o círculo do relógio ultrapassa levemente a live area para parecer do tamanho do quadrado da câmera.
• Ícones horizontais (uma seta deitada) podem precisar ser um pouco mais largos, e os verticais um pouco mais altos, do que a keyline sugere, para "encher o olho" igual.
• Uma forma isolada e magra (um raio, uma pena) pode ser ampliada além da keyline para não parecer perdida na caixa.

5.3 Junções, contraformas e detalhes

• Onde traços se cruzam, a massa acumula e escurece — afine perto da junção (ver Logótipos & Lettering, Módulo 5).
• Contraformas pequenas fecham em tamanho reduzido — abra-as (o buraco da chave, a janela da casa).
• Detalhes com menos de ~1.5px somem em 16px — remova ou funda com o traço principal.

5.4 Alinhamento e o teste da família

• Alinhamento vertical consistente ao lado do texto: defina onde o centro óptico do ícone cai em relação à linha de base / caixa do texto e repita.
• O teste definitivo: monte todos os ícones da família numa grade única, em tamanho pequeno. Escaneie com o olho meio fechado. O que pular de peso ou de tamanho precisa de ajuste. Refaça até a grade "vibrar" uniforme.

6.1 Anatomia do SVG de um ícone

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M10 11v6M14 11v6"/>
</svg>

• viewBox é o sistema de coordenadas — o que dá a escalabilidade. width/height são só o tamanho padrão.
• stroke="currentColor" (ou fill="currentColor"): o ícone herda a color do CSS — um só arquivo serve todas as cores e temas.
• Style line: fill="none" stroke="currentColor". Style solid: fill="currentColor" e sem stroke.
• Para produção, o traço geralmente é expandido em <path> preenchido — mais previsível ao escalar e permite fill.

6.2 Otimização

• SVGO (ou svgomg): remove metadados, comentários, atributos redundantes, achata transforms, arredonda coordenadas. Um ícone otimizado tem tipicamente 200–600 bytes.
• Mantenha viewBox; remova width/height fixos se for controlar por CSS; preserve currentColor.
• Não deixe <title>/IDs que o pipeline de a11y precisa serem removidos sem querer.

6.3 Como servir os ícones

Recomendação atual: SVG-as-component em apps com framework (só o que se usa entra no bundle) ou sprite em sites — nunca ícone-fonte novo.

6.4 Acessibilidade

• Ícone decorativo (ao lado de um rótulo que já diz tudo): esconda dos leitores de tela — aria-hidden="true" (ou role="presentation").
• Ícone que carrega sentido sozinho (botão só-ícone): o controle precisa de nome acessível — <button aria-label="Excluir">. O SVG em si pode ter role="img" + <title>Excluir</title> (com aria-labelledby), mas o nome no botão é o que importa.
• Alvo de toque ≥ 24px (WCAG 2.2) / ~44px (móvel) — o ícone pode ter 20px, mas a área clicável não.
• Contraste: ícone que transmite informação essencial ≥ 3:1 com o fundo (WCAG 1.4.11). Ver Acessibilidade Digital & WCAG.
• Não só cor: um ícone que muda só de cor entre estados falha para daltônicos — mude a forma também.

6.5 Alinhar ícone com texto

.icon{
  width: 1em; height: 1em;      /* escala com o font-size do contexto */
  fill: currentColor;            /* ou stroke */
  vertical-align: -0.125em;      /* ajuste fino à linha de base */
  flex: none;                    /* não deixa o ícone encolher num flex */
}

7.1 Nomenclatura

• Nome pela coisa, não pelo uso: trash, não delete-button; magnifying-glass/search, não find-orders. O mesmo ícone serve muitos usos.
• Aliases para sinônimos comuns (bin → trash) ajudam a busca e evitam duplicatas.
• kebab-case, categorias ou prefixos (arrow-, file-, brand-), e um padrão para variantes: chevron-down, chevron-down-filled, chevron-down-16.
• Um índice pesquisável com tags/keywords é parte do produto (quem procura "remover" precisa achar "trash").

7.2 Variantes

7.3 Ícones variáveis

Material Symbols e SF Symbols são fontes/ícones variáveis: eixos de weight (casando com o peso do texto), fill (0→1 entre line e solid), grade (ajuste fino de peso para dark mode, como o GRAD da tipografia) e optical size. Um arquivo, um espectro contínuo — menos assets, e o ícone "acompanha" a tipografia. Ver a apostila Tipografia, Módulo 7.

7.4 O pipeline

Figma (página de ícones, 1 component por ícone, no grid)
   │  plugin de export / API
   ▼
SVGs crus  ──►  SVGO (config do projeto)  ──►  validação
   │                                            (viewBox? currentColor? 1 cor? nome válido?)
   ▼
gerar saídas:
   • pacote SVG + sprite
   • componentes React/Vue/Web Components (SVGR)
   • índice pesquisável (JSON: nome, tags, categorias)
   ▼
publicar  @empresa/icons@x.y.z   (SemVer + changelog)

• Roda no CI a cada PR de ícone; a revisão inclui checagem visual (o ícone na grade da família) e de a11y (1 cor, sem texto embutido).
• Produtos consomem o pacote versionado, não copiam SVGs.
• Versionamento: adicionar ícone = minor; renomear/remover ou mudar a metáfora de um existente = major (com alias/codemod).

7.5 Integração com o design system

• Tamanhos de ícone como tokens (--icon-size-sm/md/lg) alinhados à escala tipográfica.
• A cor do ícone vem de tokens semânticos (--color-icon, --color-icon-muted), nunca hard-coded — via currentColor herdando ou variável.
• Os componentes do DS (Button, MenuItem, Alert) recebem ícones por prop icon e cuidam de tamanho/cor/espaçamento. Ver Design Systems & Design Tokens.
• Paridade Figma ↔ código: os nomes dos componentes de ícone no Figma == os nomes no pacote.

8.1 Quando animar um ícone

• Feedback de ação: o coração que "pulsa" ao favoritar, o check que se desenha ao concluir.
• Mudança de estado: hambúrguer ↔ X, play ↔ pause, chevron que rota ao expandir.
• Progresso: spinner, barra circular, upload.
• Atenção pontual: o sino que balança quando chega notificação (com muita parcimônia).
• Não anime ícones estáticos de navegação/lista sem motivo — vira ruído e custo.

8.2 Técnicas

8.3 Princípios

• Curto: 120–300ms para micro-interação; a animação não pode atrasar a tarefa.
• Easing com desaceleração no fim (ease-out); nada linear.
• Significado: o movimento deve reforçar o que aconteceu (o check "confirma", o X "cancela") — decoração pura envelhece rápido.
• Consistência: mesma duração/easing para a mesma classe de interação em todo o produto (motion tokens — ver a futura apostila de Motion de Interface).

8.4 prefers-reduced-motion

@media (prefers-reduced-motion: reduce){
  .icon-animate{ animation: none; transition: none; }
  /* troque o "desenhar o check" por ele já aparecendo */
}

• Ofereça a versão estática equivalente — o estado final sem a transição.
• Nunca faça um ícone piscar mais de 3×/s (risco de convulsão — WCAG 2.3.1).

9.1 Quantos ícones um produto precisa

• O core set de um produto costuma ter 60–150 ícones — navegação, ações CRUD, status, formatos de arquivo, mídia, setas, social. Bibliotecas gerais têm milhares; você usa uma fração.
• Cada ícone novo é custo: desenho, revisão, versões, manutenção, peso. Adicione com critério.
• Um conceito, um ícone. "Editar" é sempre o lápis, em toda a UI — não lápis aqui e caneta ali.

9.2 Duplicatas e sinônimos

• Sem governança, a biblioteca acumula três "usuário", dois "download", quatro setas quase iguais.
• Prevenção: um índice pesquisável com aliases, um dono da biblioteca, e a regra de propor antes de adicionar (Módulo 7).
• Auditoria periódica: ícones órfãos (não usados em nenhum produto — via scanner de código) e ícones fora do padrão (grid/traço divergente).

9.3 Múltiplas plataformas

• iOS tem convenções próprias (SF Symbols, que casam com a tipografia do sistema e trazem milhares de símbolos "de graça"); Android gravita para Material Symbols. Forçar o mesmo set em todas as plataformas pode parecer "estrangeiro".
• Estratégia comum: um set de marca compartilhado para os ícones específicos do produto + os símbolos do sistema para o que é convencional em cada plataforma.
• Web: total controle, mas cuide do bundle (tree-shaking; não importe a lib inteira).

9.4 Internacionalização

• RTL: ícones direcionais (setas, "responder", "próximo", barra de progresso, alguns "desfazer") devem espelhar em árabe/hebraico; ícones não-direcionais (relógio, lupa) não. Marque quais viram.
• Metáforas culturais: a "casinha" de início, o polegar para cima, gestos de mão, o cifrão $ para "dinheiro", a coruja para "sabedoria" — nem sempre viajam. Prefira formas neutras + rótulo.
• Ícones não substituem tradução: não coloque texto dentro do ícone.

9.5 Comprar/usar vs desenhar

10.1 Onde iconografia pesa

• Icon designer (raro como cargo isolado; comum em foundries de ícones e times de sistema grandes).
• Design systems designer / engineer: manter a biblioteca, o pipeline, os tokens, a governança.
• Product / UI designer: escolher e estender uma lib, desenhar ícones de domínio, garantir consistência e a11y.
• Brand designer: o estilo de ícone como parte da identidade (ver Branding, Logótipos & Lettering).
• Front-end / design technologist: a entrega (SVG, sprite, componentes), performance e acessibilidade.

10.2 Roadmap de estudo (5–7 semanas)

10.3 Banco de perguntas (com a resposta que aprova)

10.4 Projetos de portfólio que geram entrevista

1. Um set coeso de 24–36 ícones (âncora): um sistema documentado (grid, keyline shapes, traço, ângulos), os ícones equalizados na grade, e o antes/depois de 3 ajustes ópticos.
2. Um ícone do conceito ao SVG: um estudo de caso de um único ícone difícil — as metáforas testadas, os esboços, o encaixe no grid, o ajuste óptico, o SVG otimizado e o markup acessível.
3. Biblioteca com pipeline: um repo com SVGs → SVGO → sprite + componentes + índice pesquisável, publicado como pacote, com README de nomenclatura e versionamento.
4. Estudo de acessibilidade e i18n: os mesmos ícones com markup decorativo vs semântico, estados que não dependem de cor, e o mapa de quais espelham em RTL.
5. Contribuição real para uma lib open source (Lucide, Tabler, Phosphor) — um ou dois ícones aceitos, seguindo as guidelines delas.

10.5 Fontes para continuar

• Livros: The Icon Handbook (Jon Hicks); The Anatomy of Type/Thinking with Type para a disciplina de forma; catálogos como Symbol (Angus Hyland) e o AIGA/DOT Pictograms.
• Guidelines: Material Symbols / Material Design — Iconography; Apple HIG — SF Symbols; as seções de iconografia de Carbon (IBM), Polaris (Shopify), Atlassian.
• Bibliotecas para estudar o código: Lucide, Phosphor, Tabler, Radix Icons, Heroicons (repos + contribution guidelines).
• Ferramentas: SVGO / SVGOMG, SVGR, Nucleo, IcoMoon, Lottie / LottieFiles, Rive; The Noun Project e Streamline como referência de cobertura.
• Nesta trilha: Design Systems & Design Tokens, Logótipos & Lettering, Tipografia, Cor, Layout, Grade & Espaçamento; e Acessibilidade Digital & WCAG, Adobe Illustrator, Figma, CSS Avançado: Animações & SVG.