Pular para o conteúdo principal

Iconografia

Os ícones representam objetos, ações e estados, e são usados ​​para comunicar uma mensagem. Cada ícone foi projetado para ser simples, amigável e reduzido à sua forma mínima, expressando características essenciais.

Grid do ícone

O grid de ícones estabelece regras claras para o posicionamento consistente, mas flexível, dos elementos gráficos.

Tamanho da tela, preenchimento e área ativa

Tamanho e peso

Todos os ícones são construídos em um quadrado de 24px com 2px de preenchimento. Os ícones do sistema usam uma largura de traçado consistente de 2px, incluindo curvas e ângulos. Ao usar ícones, todos as áreas de clique precisam ter no mínimo 40 pixels. Ícones do mesmo tamanho devem ter o mesmo peso visual. Um ícone não deve parecer mais pesado ou mais claro que outro ícone do mesmo tamanho. Os glifos ou ícones de 16px devem sempre ser um ícone preenchido, isso garante que o ícone permaneça legível.

Tamanho do botão e glifo

Formas das linhas principais

Ao usar as formas principais baseadas no grid, é possível manter consistentes as proporções visuais nos ícones.

Tamanho da tela, preenchimento e área ativa

Perfeição de pixels

Para evitar distorcer um ícone, posicione os ícones “no pixel” transformando as coordenadas X e Y em números inteiros, sem decimais.

Exemplos

Exemplos de ícones