# Icons

<details>

<summary>✅ Atualizado (04/02/2025)  - Ver detalhes</summary>

## Janeiro 2025

* **04/02/2025**\
  Finalização da documentação base
* **30/01/2025**\
  WIP da documentação de ícones (pendente finalização)

</details>

## Estrutura

<figure><img src="/files/DCy7uaC3Yo6pUHHiETyg" alt=""><figcaption><p>⭐ tamanho e stroke base para criação de ícones</p></figcaption></figure>

### ↳ Tamanho

Para garantir a consistência e padronização na criação de iconografias, foram estabelecidos 5 tamanhos de ícones de forma que atenda todo o produto Cifra Club e seus subprodutos, sendo eles `32px, 24px, 20px, 16px e 12px`.

### ↳ Espessura

Para que a consistência visual dos ícones permaneça harmônico em relação a outros elementos como tipografia por exemplo, foi necessário definir uma espessura (*stroke*) para cada tipo de tamanho de icone, sendo eles:

| iconSize | Stroke |
| -------- | ------ |
| 32px     | 2.4px  |
| 24px     | 1.8px  |
| 20px     | 1.5px  |
| 16px     | 1.2px  |
| 12px     | 0.9px  |

<figure><img src="/files/rh3ECAGPyHwfBSiPtpy2" alt=""><figcaption><p>Exemplo de ícones aplicados ao lado de labels mantendo a consistência visual.</p></figcaption></figure>

## Construção (Figma)

### ↳ Icon grid

<figure><img src="/files/H23JPlEx5ENRdYDtolFo" alt=""><figcaption></figcaption></figure>

O Icon grid são linhas guias (e também um componente no Figma) que formam a base do grid de uma iconografia. São como a estrutura esquelética que sustenta todo o conjunto de ícones. Essas linhas guias garantem que cada ícone seja projetado respeitando os mesmos tamanhos, bordas e peso visual em relação aos demais elementos do sistema.

Ao iniciar a construção de um ícone é recomendado utilizar o componente <mark style="color:purple;">❖ icon-grid</mark> presente no arquivo do Figma dentro do frame do ícone para garantir que todos pareçam ter o mesmo tamanho.

{% hint style="info" %}

As propriedades do componente <mark style="color:purple;">❖ icon-grid</mark>, permitem ocultar/revelar as formas individuais.

Formas quadradas e redondas possuem proporções diferentes, pois causam sensações diferentes de tamanho.

Nem todo ícone é formado por formas básicas. Neste caso, tente encontrar a melhor guia dentro do grid, comparando a outros ícones consolidados, por meio do ❖ icon-tester acima.
{% endhint %}

Exemplo real de aplicação utilizando os grids:

<figure><img src="/files/g3PnAA0O3CJ018Pr6pLX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Embora estas sejam recomendações importantes para garantir a consistência e a referência visual em nossos ícones, não devem ser interpretadas como regras inflexíveis.

Em certas circunstâncias, pode ser necessário realizar ajustes ópticos nas bordas, tamanho e outras características do ícone para alcançar um resultado visual mais equilibrado e funcional.
{% endhint %}

### ↳ Regras gerais

Na construção de um novo ícone, é obrigatório seguir conter as seguintes definições:

{% stepper %}
{% step %}

### Tamanho: <mark style="color:orange;">24px</mark>

Nosso ícones devem ser construídos em um frame de **24 x 24px** como base. Não se preocupe em construir todos os tamanhos, pois utilizando as próximas regras a seguir o ícone redimensionará para cada tamanho pré-definido no Compasso.

<div align="left"><figure><img src="/files/qLJPlc09X4Zp7sPup4vB" alt="" width="234"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Stroke: <mark style="color:orange;">1.8px, Round e Center</mark>

1. **Espessura:** Como utilizamos por base o tamanho de **24 x 24px** logo o stroke padrão deverá ser **1.8px**, como já descrito em [estrutura](#estrutura).

<div align="left"><figure><img src="/files/5sYSzMAbADFTSvUP5fbC" alt="" width="234"><figcaption></figcaption></figure></div>

2. **End point:** Configure o end point para "**round**", para deixar as extremidades do traçado arredondadas.
3. **Posição:** Utilize a posição "**center**" para que o traçado expanda sua espessura para os lados.

<div align="left" data-full-width="true"><figure><img src="/files/SGKHmX43yEpgV3ByyzjP" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Padding: <mark style="color:orange;">2px</mark>

Salvo exceções, é expressamente recomendado manter todo conteúdo do ícone dentro da área útil e respeitando a margem de segurança de **2px** para cada lado.

<div align="left"><figure><img src="/files/ExCdXhrtrkYS1hmvJRen" alt="" width="234"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Position: <mark style="color:orange;">Center</mark> e <mark style="color:orange;">Scale</mark>

**Layer externo:** o frame de 24px que abrange todo o ícone com seus espaçamentos deverá estar em "**center**" de forma que o ícone sempre permaneça centralizado em todas suas aplicações.

**Layer interno:** o frame que comporta até a extremidade do vetor deverá possuir os constraints em “**scale**”. Isso possibilita escalar o ícone para diferentes tipos de tamanho de forma consistente.
{% endstep %}

{% step %}

### Estrutura das layers

1. **Variantes:** Para cada ícone é necessário duas variantes: uma com o ícone visível (<mark style="color:purple;">◇ Fill=Off</mark>) e outra como um placeholder (<mark style="color:purple;">◇ Fill=On</mark>). Esse padrão é necessário para que todos os ícones se comportem da mesma forma, até quando aplicado de modo placeholder.

<figure><img src="/files/qTgLhOtOYz44TcEL4ZMx" alt=""><figcaption></figcaption></figure>

2. **Camadas**:&#x20;

   1. <mark style="color:purple;">◇ Fill=Off</mark>: na camada principal onde aparece o ícone, é necessário que possua o componente de Icon Grid + o vetor do ícone final + versão do ícone editável (com a possibilidade de alteração do vetor em linha).

   <figure><img src="/files/cQpo1sEb0l5QvIANXxsA" alt=""><figcaption></figcaption></figure>

   b. <mark style="color:purple;">◇ Fill=On:</mark> a camada de placeholder com apenas um shape com uma imagem aplicada.

<figure><img src="/files/rIoqCCadrG3MSuwEpapm" alt=""><figcaption></figcaption></figure>

3. **Nomenclatura:** é expressamente recomendado nomear o ícone da forma mais genérica possível para que ele não fique limitado à uma função apenas.

   *Ex.:* Se é um ícone de utilizado para referenciar o blog, nomeá-lo como "*newspaper*" será mais indicado, pois este mesmo ícone pode aparecer em outro contexto.

   Utilizar sempre nomes em inglês para manter o padrão.

   Incluir o novo ícone na ordem alfabética das layers e do arquivo.

<figure><img src="/files/2kS5X37CF8UP1Icvm9oi" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Cor: ![](/files/DYlYfQY8kArTh9ybvggD) <mark style="color:blue;">base-neutral-foreground-dynamic-10</mark>

Ao finalizar a construção do ícone, garanta que a cor utilizada esteja com o token de cor `base-neutral-foreground-dynamic-10` . Só é recomendado utilizar a troca de cores durante a aplicação em uma tela, caso o componente utilizado já não pré defina a cor especifica.
{% endstep %}
{% endstepper %}

## Boas práticas

* Priorizar colocar os **pontos do vetor no meio da linha** - dessa forma ajuda a não borrar o ícone dependendo da densidades de pixels nas principais resoluções de dispositivos.
* `Cmd/CTRL + SHIFT + P`: pré-visualização de pixels no Figma, ajuda a entender como o pixel será exibido quando renderizado na tela em densidades menores.

<figure><img src="/files/vsH92AAPViUsOs60wATV" alt=""><figcaption></figcaption></figure>

#### Resources

{% embed url="<https://www.designsystems.com/iconography-guide/>" %}

{% embed url="<https://m3.material.io/styles/icons/designing-icons>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://compasso.studiosol.com.br/styles/icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.