Icon

Um desenho pequeno, à mão, que acompanha uma palavra. Ele ajuda a reconhecer; quem explica é a palavra.

Nesta página

Playground

calendar

Ícone

Fundo

HTML

<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>

Quando usar

Ao lado de uma palavra: num botão, num item de navegação, numa etiqueta de estado.
Sozinho, só quando o significado é universal (buscar, fechar) e o controle tem um nome para o leitor de tela.

Quando não usar

Para decorar um título ou um parágrafo.
Para ilustrar uma tela vazia: use as ilustrações (EmptyState).
De outro conjunto: nada de ícone pronto ao lado dos desenhados.

Exemplos

Três tamanhos

Pequeno (16px), o tamanho da letra em volta (sem o atributo) e grande (32px). Sempre na cor do texto.

Mostrar código

HTML

<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>

Todos os ícones, com busca e o código de cada um, estão no catálogo de ícones.

Bons e maus padrões

Faça assim

Agenda

Ícone e palavra juntos, na mesma cor.

Não faça

Configurações gerais

Ícone laranja enfeitando um título: não ajuda a reconhecer nada e gasta o laranja.

O ícone é sempre aria-hidden="true": a palavra ao lado, ou o aria-label do botão, dá o nome.
No React, o nome do ícone é conferido pelo TypeScript.

Atributos

Atributo	Valores	Para quê
`class="feitio-icon"`	obrigatório	Traço à mão, na cor do texto.
`data-size`	nenhum, `"small"`, `"large"`	O tamanho da letra (sem o atributo), 16px ou 32px.
`aria-hidden="true"`	sempre	O ícone acompanha; quem dá o nome é a palavra.
`use href`	`sprite.svg#feitio-<nome>`	Qual ícone.