Icons

O que é?

Os ícones são elementos visuais. São fundamentais em uma interface por proporcionar interatividade e chamar a atenção para informações importantes. Eles são utilizados tanto como reforço visual como para representar ações.

Como base, o Sirius utiliza o Font Awesome (FA) para gerar a sua própria biblioteca de ícones, o Sirius Icon Kit:

Anatomia

Nossos ícones utilizam uma grid que possibilita melhor aplicação na interface. Sempre respeite o espaçamento da grid e os tamanhos diferentes para cada tipo de uso.

Tipos de ícones

Categorias

O Icon Kit é organizado em 11 categorias de ícones, são elas:

• Action - Ícones de ação interativa;
• Arrows and Navigation - Setas e ícones de navegação;
• Business - Marcas, logotipos e representações de negócio;
• Communication - Conversas, chat, mensagem;
• Data - Gráficos de todos os tipos;
• File - Arquivos de todos os tipos;
• Object - Ícones com nome e formato literal que represente um objeto real;
• Security - Segurança e afins;
• Status - Feedback;
• Technology - Representa tecnologia, linhas de código e afins;
• User - Pessoa(s) usuária(s).

Tamanhos

Os ícones do Sirius são organizados em três tamanhos diferentes: small, medium (regular) e large. Para cada tipo de aplicação, existem diretrizes de uso. A seguir está a lista com as medidas de cada um:

Aplicação

Como usar

O Font Awesome possui várias famílias como light, regular, solid, duotone, etc. O kit que utilizamos é personalizado e representado pela letra ”k”. Os ícones são redesenhados pelo time de DesignOps antes de serem disponibilizados no FA.

Na aplicação de um ícone, a pessoa desenvolvedora sempre deve iniciar com ”fak fa-”, seguido do nome do ícone e do indicativo de stroke (-small, -medium ou -large). Ex.: fak fa-chart-circular-small ou fak-fa-search-medium.

<div class="columns">
  <div class="column is-narrow">
    <span class="icon is-small">
      <i class="fak fa-chart-circular-small"></i>
    </span>
    <p>small</p>
  </div>

  <div class="column is-narrow">
    <span class="icon is-medium">
      <i class="fak fa-chart-circular-medium"></i>
    </span>
    <p>medium</p>
  </div>

  <div class="column is-narrow">
    <span class="icon is-large">
      <i class="fak fa-chart-circular-large"></i>
    </span>
    <p>large</p>
  </div>
</div>

Os colaboradores da Zenvia, podem verificar a disponibilidade de um ícone em nossa planilha de acompanhamento e solicitar a inclusão de um ícone através do Slack.

Acessar planilha >

Cor

Além disso, os ícones do sistema podem ser interativos ou apenas para visualização. Ícones que ao clicar executam uma ação ou possuem tooltips de dica devem ser exibidos na cor primária. A seguir mais exemplos de de aplicação de cor:

Para saber mais sobre aplicação das cores na interface, acesse os fundamentos de Cores.

Acessar fundamentos de cores >

Acessibilidade

Não é aconselhável a subtituição da label por um ícone. Na incerteza, opte por uma boa descrição textual e isso determinará a boa compreensão da interface.

O critério de sucesso 1.1.1. Conteúdo não textual (nível A) do WCAG é válido para os ícones. Ele diz que todo conteúdo não textual deve conter um texto de identificação alternativo. Os conteúdos decorativos são exceções. Nesses casos, a implementação deve ser feita de forma que possam ser ignorados por tecnologias assistivas.

Acessar critério do WCAG >