Projetar uma linguagem de ícones e ilustração

Um ícone Lucide ao lado de uma engrenagem de outra família denuncia um site montado às pressas em três segundos de olhar. Uma família de ícones só, uma ilustração na paleta exata da marca e a fonte servida do próprio site separam esse site de uma marca reconhecível.

Quem monta o cabeçalho e o estado vazio do produto ganha o pedido certo para as três peças e o fluxo de licença que evita retirada de imagem.

O Lucide é a família padrão do shadcn/ui, com licença ISC, sem exigir crédito no uso comercial. A versão 1.0, a primeira estável, saiu em junho de 2026 com mais de 1.600 ícones na mesma grade, marcas registradas removidas e pacotes menores. No Iconify soma 1.791 ícones, e três propriedades resolvem tudo: size, strokeWidth e color.

As duas regras do hub de design: uma família por projeto, e cor por token ou por currentColor, nunca hexadecimal fixo. Token é o valor guardado com nome, como a etiqueta na lata de tinta. currentColor é a cor herdada do texto ao redor, e resolve o passar do mouse e o desabilitado sem variável extra.

#1a1a1a cravado vira preto sobre preto no tema escuro, e quem revisa só no claro nunca vê. Troque de família só por identidade, e troque inteira: Phosphor com seis pesos, Heroicons, Tabler, Material Symbols em fonte variável, Radix Icons, Iconoir, Remix Icon e Hugeicons. O Iconify agrega mais de 200 conjuntos e entra só para o símbolo que falta.

Sino do Lucide ao lado de engrenagem alheia tem traço e proporção diferentes; a barra parece montada às pressas. O tooltip (a dica que aparece ao passar o mouse) prende-se ao ícone por anchor positioning, visto na aula sobre menu sem script. Peça o ícone com quatro amarras: família, tamanho em pixels, espessura do traço e cor por token.

Ilustração vetorial vem de catálogo aberto antes de vir de encomenda. unDraw (MIT, com cor customizável) e Storyset, nos estilos Rafiki, Bro, Amico e Pana, cobrem cena e personagem. Humaaans, Open Peeps, Open Doodles, DrawKit, Blush, Ouch! e SVG Repo completam o acervo. DiceBear e Boring Avatars geram avatar por nome, sem foto de terceiro.

O fluxo de licença tem três degraus, nesta ordem: CC0 (uso livre sem crédito), depois atribuição obrigatória, depois as proibições de cada catálogo. Logotipo e revenda são as proibições mais comuns. Guarde o link da licença junto do arquivo; a retirada de imagem chega meses depois, quando ninguém lembra de onde veio.

Fundo e padrão têm gerador próprio: Haikei e BGJar produzem SVG generativo, Hero Patterns e Pattern Monster dão padrão repetido, Shape Divider corta a divisa. Foto vem de Unsplash e Pexels. Para mover a ilustração, LottieFiles tem catálogo e editor, Rive faz peça interativa e SVGator anima um SVG sem código. O critério de movimento fica na aula sobre animação.

Quando o catálogo mais próximo fica a dois tons da paleta, chegou a hora do SVG inline sob medida. O caso típico é o estado vazio, a tela sem dado que todo cliente novo vê primeiro. Peça cor por variável em cada <path>, porque SVG não herda fill do CSS ao redor, e role="img" com <title> descritivo.

A fonte da marca é a terceira peça própria: variável, servida pelo Fontsource com font-display: swap, sem chamada ao Google Fonts, como na aula sobre tokens. Sem o swap, o texto fica invisível enquanto a fonte carrega, e no celular fraco isso dura segundos.

Geração por IA entra para explorar e para o primeiro rascunho. O critério profissional de 2026 pede SVG limpo, consistência de estilo entre as peças do mesmo conjunto e licença comercial clara. Adobe Firefly, integrado ao Illustrator e ao Photoshop, Iconify AI e SVGMaker têm esse perfil. Os termos variam por plano, então leia antes de publicar.

A titularidade varia por plataforma (OpenAI, Midjourney, Firefly), e o vácuo da Lei 9.610 persiste: obra gerada sem autoria humana não tem dono claro no Brasil. Adote o C2PA, os Content Credentials (o selo de procedência gravado no arquivo, como a nota fiscal da imagem), na geração e verifique o selo antes de publicar.

Para uma peça de arte própria, as skills canvas-design e algorithmic-art do repositório anthropics/skills dão dois caminhos. O pôster estático e a arte generativa em p5.js, a biblioteca de desenho por código cuja versão 2.0 vira padrão do editor após agosto de 2026. Servem ao cabeçalho da campanha e à capa do relatório, sem licença de terceiro.

Numa academia com aplicativo de treino, o cabeçalho tem três ícones, agenda, notificações e perfil, pedidos juntos com 20px, strokeWidth de 1,75 e currentColor. O estado vazio de nenhum treino é um SVG inline na cor da marca. A ilustração da página de planos, gerada por IA, só entra depois de o selo C2PA ser conferido.

Peça os ícones do cabeçalho numa frase só, com as quatro amarras juntas; pedido um a um é o jeito mais fácil de o traço variar sem ninguém perceber. Antes de publicar uma imagem gerada por IA, verifique o Content Credentials no arquivo e leia a licença do plano: sem selo ou sem licença comercial, a peça não sobe.