ÍCONES/1179manual de linguagem visual
IdentidadeEfeitosIniciantesDesign System

MANUAL VISUAL · LINGUAGEM DE INTERFACE

Ícones não decoram.Eles orientam.

Um atlas vivo para entender o que cada símbolo informa, onde deve aparecer e qual ação pode executar dentro de um site.

[Para Iniciantes: ícones são pequenas imagens que ajudam a pessoa a entender um botão, aviso, menu ou informação sem precisar ler muito.]

Explorar os 1.179 ícones
19famílias funcionais
24×24grade vetorial
2 pxtraço padrão
SVGformato escalável

01 / FUNDAMENTOS

Quatro trabalhos de um ícone.

Antes de escolher um desenho, identifique o trabalho que ele precisa realizar. Um ícone sem função clara vira ruído visual.

01

Navegar

Leva a pessoa para outra página, seção ou etapa.

[Para Iniciantes: mostra para onde ir.]
02

Executar

Dispara uma ação como salvar, editar, buscar ou excluir.

[Para Iniciantes: faz alguma coisa quando clicado.]
03

Informar

Comunica sucesso, perigo, dúvida, progresso ou estado.

[Para Iniciantes: conta o que está acontecendo.]
04

Representar

Identifica objetos, conteúdos, serviços ou categorias.

[Para Iniciantes: substitui ou reforça uma palavra.]

02 / ANATOMIA

Consistência gera confiança.

Tamanho, área de toque, cor, espessura e rótulo trabalham juntos. O desenho sozinho não garante uma boa experiência.

24 px24 px
24 × 24
Grade padrão para interface
2 px
Espessura visual do traço
44 × 44
Área mínima confortável de toque
currentColor
Herda a cor do texto ou estado

[Para Iniciantes: o desenho pode ter 24 px, mas o botão ao redor deve ser maior para o dedo conseguir tocar sem erro.]

ÍCONE + TEXTO

Use rótulo quando o significado não for universal.

ÍCONE SOZINHO

Reserve para ações muito conhecidas e inclua nome acessível.

COR

Nunca dependa somente da cor para comunicar estado.

CHEVRON

Na Creativoo, controles direcionais usam chevrons grossos.

04 / ACESSIBILIDADE

O símbolo precisa ser compreendido.

Ícones visuais devem continuar claros para leitores de tela, teclado, baixa visão e pessoas que não conhecem o mesmo repertório cultural.

ARIA-LABEL

Dê um nome à ação

<button aria-label="Buscar">

[Para Iniciantes: o leitor de tela precisa ouvir o que o botão faz.]

ARIA-HIDDEN

Oculte o que é decorativo

<svg aria-hidden="true">

[Para Iniciantes: não faça o leitor repetir o texto e o desenho.]

TOOLTIP

Explique o desconhecido

title="Configurações"

[Para Iniciantes: ao parar o mouse, aparece uma explicação curta.]

CONTRASTE

Mantenha o traço visível

color: currentColor;

[Para Iniciantes: o ícone não pode sumir no fundo.]