# Iconografia e ilustração

As diretrizes dos ícones e das ilustrações, desenhados à mão e ligados ao processo: a mão de quem desenhou fica à vista. Os catálogos completos estão em Recursos.

## Ícones

Tudo desenhado à mão, do mesmo jeito que os cantos: a linha passa do canto, o círculo não fecha, o ponto não é redondo, e o desenho inteiro inclina um pouco.

tarefa

agenda

buscar

ajustes

criar

certo

fechar

atenção

informação

abrir

seguir

menu

[**Todos os ícones**O catálogo em Recursos: busca pelo nome e o código de cada ícone para copiar.](/pt/resources/icones/)

### Como se desenha um ícone do Feitio

Grade de 24

todo ícone num quadro de 24 por 24

Traço de 2,3

pontas e juntas arredondadas

Inclinado 3°

como quem desenha rápido

Cor do texto

nunca uma cor fixa

Só traços

nenhum círculo ou retângulo perfeito

### Nenhum ícone é uma linha só

Toda junção é um cruzamento de dois traços: as duas pernas do certo, os dois arcos do círculo, os dois lados da seta. Uma linha contínua tem cara de computador.

Faça assim

Duas pernas que se cruzam no vértice.

Não faça

Uma linha contínua, de canto perfeito: o certo de qualquer conjunto pronto.

### O ícone acompanha a palavra

Ele ajuda a reconhecer; quem explica é o texto. Sozinho, só onde o significado é universal, e com nome para o leitor de tela.

### Nada de ícones de outro conjunto

Um ícone geométrico pronto ao lado dos desenhados denuncia a costura. Ícone novo se desenha, com as regras acima.

### Marca de terceiros entra como é

O logo do GitHub, de uma loja de aplicativos, de um pagamento: nunca redesenhado à mão nem trocado por um ícone do Feitio, porque a marca é do dono e as regras dele pedem o desenho original. Só a cor pode seguir a tinta, quando a marca aceita uma cor só.

## Ilustração

Desenhos pequenos para telas vazias e erros grandes, na mesma mão dos ícones: tinta na cor do texto e um toque de laranja. Vão dentro da página, não como imagem, para seguirem o tema.

**Nenhum agendamento ainda**

Crie o primeiro e ele aparece aqui.

[**Todas as ilustrações**O catálogo em Recursos: o uso de cada desenho e o SVG para copiar.](/pt/resources/ilustracoes/)

-   **Quando:** tela vazia, erro grande, uma boas-vindas. Momentos sem conteúdo, em que o desenho faz companhia.
-   **Quando não:** como enfeite de cartão, de cabeçalho ou de cada item. O desenho é raro como o laranja.
-   Nas fachadas de fora, a ilustração é do cliente: os desenhos do Feitio não aparecem.