# Ícones

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

O sistema usa **só Tabler Icons** (MIT), a mesma biblioteca da página Icons do Figma: grade de 24px, traço de 2px, pontas e junções arredondadas, 5.184 ícones outline (Tabler 3.49.0). Nenhuma outra biblioteca de ícones é permitida.

## Navegador e download

A seção Ícones do site (https://design.t2.com.br/#icones) permite buscar por nome ou tag (em inglês), filtrar por categoria, alternar outline/filled, escolher tamanho (16, 20, 24, 32, 48), traço (1, 1,5, 2) e cor (modos do Figma no tema atual), e baixar SVG, PNG (1x, 2x, 4x, fundo transparente), copiar SVG, JSX ou nome.

## Arquivos estáticos (para baixar por URL)

| URL | O que é |
| --- | --- |
| `https://design.t2.com.br/icons/tabler/outline/<nome>.svg` | SVG outline original do Tabler (24x24, stroke currentColor, stroke-width 2). Ex.: /icons/tabler/outline/arrow-right.svg |
| `https://design.t2.com.br/icons/tabler/filled/<nome>.svg` | SVG preenchido (só existe para parte dos ícones; fill currentColor) |
| `https://design.t2.com.br/icons/tabler/index.json` | Índice: version, count, categories e icons[] com name, category, tags[] e styles[] (outline, filled) |
| `https://design.t2.com.br/icons/tabler/tabler-outline.zip` | Todos os SVG outline em um zip |
| `https://design.t2.com.br/icons/tabler/tabler-filled.zip` | Todos os SVG filled em um zip |

`<nome>` é o nome em kebab-case do Tabler (`arrow-right`, `circle-check`, `brand-whatsapp`). Para achar o nome certo, busque no `index.json` por name ou tags (os termos são em inglês: search, trash, user, arrow).

## Como usar

- **Baixar:** na seção Ícones do site, escolha o ícone e use "Baixar SVG" ou "Baixar PNG" (1x, 2x, 4x, fundo transparente). Serve para apresentações, Figma e materiais.
- **Copiar SVG:** copia o SVG inline, com `currentColor`, para colar em HTML.
- **Copiar JSX (React):** copia um componente React com o SVG inline, sem importar nada. Exemplo gerado para `arrow-right`:

```tsx
export function IconArrowRight({ size = 24, stroke = 2, ...props }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  );
}
```

- **Pacote do Tabler (opcional, de terceiros):** quem preferir importar em vez de colar pode instalar o pacote oficial `@tabler/icons-react` (os nomes são os mesmos, com prefixo `Icon`: `arrow-right` vira `IconArrowRight`, variantes preenchidas terminam em `Filled`).

```tsx
import { IconArrowRight } from "@tabler/icons-react";

<IconArrowRight size={20} stroke={2} />
```

## Tamanhos (size/icon)

| Token | Valor | CSS |
| --- | --- | --- |
| `size/icon/xs` | 12px | `var(--midas-size-icon-xs)` |
| `size/icon/sm` | 16px | `var(--midas-size-icon-sm)` |
| `size/icon/md` | 20px | `var(--midas-size-icon-md)` |
| `size/icon/lg` | 24px | `var(--midas-size-icon-lg)` |
| `size/icon/xl` | 32px | `var(--midas-size-icon-xl)` |

O seletor do site oferece também 48px (uso em ilustração e estados vazios, fora da escala de componentes).

## Cor

O ícone usa `currentColor` e herda a cor do texto do elemento pai. Use sempre tokens de texto, nunca hex solto nem paleta padrão do Tailwind.

| Modo do Figma | Token de conteúdo | Variável CSS |
| --- | --- | --- |
| Default | `content/primary` | `var(--midas-content-primary)` |
| Muted | `content/secondary` | `var(--midas-content-secondary)` |
| On primary | `action/primary/content` | `var(--midas-action-primary-content)` |
| On accent | `action/accent/content` | `var(--midas-action-accent-content)` |
| On secondary | `action/secondary/content` | `var(--midas-action-secondary-content)` |
| On destructive | `action/destructive/content` | `var(--midas-action-destructive-content)` |
| On media | `material/on-media/content` | `var(--midas-material-on-media-content)` |
| On media solid | `material/on-media/bg-content` | `var(--midas-material-on-media-bg-content)` |
| Selected | `selection/content` | `var(--midas-selection-content)` |

Em CSS puro: `color: var(--midas-content-secondary)` no elemento pai (o SVG baixado usa `stroke="currentColor"`).

## Regras

- Traço 2 é o padrão do sistema. Traço 1 e 1,5 só para casos editoriais; o arquivo baixado respeita a espessura escolhida.
- Ícones de direção (setas, chevrons) espelham em RTL: `rtl:rotate-180`.
- Ícone decorativo ao lado de texto não precisa de rótulo; botão só com ícone precisa de `aria-label`.
- SVG baixado: use como imagem (`<img>`) só quando a cor fixa for aceitável; para herdar cor, use o SVG inline ou o JSX copiado.
- Licença: Tabler Icons é MIT (copyright Paweł Kuna). Mantenha o aviso de licença ao redistribuir o conjunto.