# Icon Um desenho pequeno, à mão, que acompanha uma palavra. Ele ajuda a reconhecer; quem explica é a palavra. ## Playground ```html calendar ``` ## 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 ``` Todos os ícones, com busca e o código de cada um, estão no [catálogo de ícones](/pt/resources/icones/). ## 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. ## Acessibilidade - 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-` Qual ícone.