Na comunicação visual, um ícone carrega a essência dos objetos que representa. É, portanto, um elemento de informação, que significa algo e, por isso, deve ser usado com moderação.

A interpretação de um ícone depende de aspectos culturais, do contexto e das convenções que se construam em torno dele. Por isso, é preciso tomar alguns cuidados quanto à sua utilização no portal do Congresso Nacional:

• Neste guia, serão tratados como ícones apenas os símbolos que permitam interações com a interface; os demais casos serão vistos como ilustrações.
• Sempre se deve usar um mesmo ícone para representar a mesma função em uma mesma interface.
• A não ser que o ícone tenha uma leitura praticamente universal – como a lupa para indicar busca ou o "X" para fechar uma janela –, é recomendável o uso de texto de apoio para complementar ou delimitar o significado da imagem.
• Quando os ícones puderem ser entendidos pelo seu contexto (ex: botões em um player de vídeo), o texto explicativo é dispensável.
• Ícones não devem ser usados fora de sua função básica. Usar, por exemplo, o símbolo de exibição em tela cheia para função diferente cria ruídos e prejudica a experiência de quem navega pela página.

Definições básicas

• Tamanho: nenhuma dimensão do ícone (altura ou largura) deve ser menor que 44px, a fim de facilitar a interação em dispositivos móveis por meio do toque dos dedos.
• Cores: a aplicação de cores nos ícones também deve obedecer às orientações para o uso de cores/contraste previstas para o portal do Congresso.
• Estados (hover, active): ícones nos estados :hover (mouse sobre o ícone) e :active (ícone clicado/selecionado) devem ter as mesmas cores usadas nos textos nesses estados.
• Formato de arquivo: os ícones devem ser salvos preferencialmente em formato SVG vetorial, que permite a ampliação sem perda de qualidade. Caso não seja possível, recomendamos o uso do formato PNG.
• Acessibilidade: os ícones devem ter atributos alt e title com a descrição da função. Não é necessária a descrição da imagem.
• Bordas: os ícones não podem estar delimitados por círculos ou quadrados. Ou seja, não devem ter bordas.
  
• Fundos: Os ícones podem ser aplicados em versões negativas, isto é, com cores mais claras do que os fundos sobre os quais são usados. Neste caso deve-se optar por ícones no estilo Regular (ver abaixo), que ficarão “vazados”. As cores e formatos para os fundos precisam ser os mesmos em todo o site/grupo.
  

Estilo dos ícones

O Font Awesome é uma referência para inspiração, uso ou adaptação dos ícones usados no portal do Congresso. Oferece uma extensa coleção de ícones para download e é acessível por meio do framework web utilizado no Congresso Nacional, o Bootstrap.

É de lá que vem a definição dos dois únicos estilos de ícones que devem ser usados nos portais: sólido e regular. Vale ressaltar que é necessário optar por um dos estilos, jamais misturando-os no mesmo bloco de ícones.