# Ícones

Curadoria Tabler Icons com orientação por stack. Use componentes SVG em frameworks e webfont local apenas quando fizer sentido.

## Como usar

Tabler é a biblioteca de referência visual. Em apps React, Next, Vue ou Nuxt, prefira os pacotes SVG do framework; em HTML ou Astro estático, use a webfont que vem no CSS Sinapse (`icons.css` em `/css/<versão>/`).

React / Next

Instale com `pnpm install @tabler/icons-react` ([instalação React](https://www.npmjs.com/package/@tabler/icons-react)) e importe só o componente usado, como `IconHeartbeat`. Use `size={24}`, `stroke={2}` e `color="currentColor"`.

Vue / Nuxt

Instale com `pnpm install @tabler/icons-vue` ([instalação Vue](https://www.npmjs.com/package/@tabler/icons-vue)) e importe o componente SVG equivalente. Mantenha o mesmo padrão visual: `size=24`, `stroke=2` e cor herdada.

HTML / Astro

Para páginas estáticas simples, use a webfont que vem no CSS Sinapse (`icons.css` e `sinapse.min.css`): `ti ti-<nome>`. Fora do pacote Sinapse, instale a [webfont do Tabler](https://www.npmjs.com/package/@tabler/icons-webfont). Para aplicações com build e poucos ícones, SVG tende a ser mais previsível.

Nome

A grade abaixo usa nomes Tabler em kebab-case, como `heartbeat`. Na webfont vira `ti ti-heartbeat`; em componentes SVG vira `IconHeartbeat`. Clique em um ícone para copiar o nome base. Consulte o [catálogo oficial](https://tabler.io/icons) para buscar nomes fora da curadoria.

Acessibilidade

Ícone decorativo usa `aria-hidden="true"`. Em botões sem texto visível, o controle precisa de nome acessível.

## Saúde e medicina

Atendimento, vigilância, pesquisa biomédica.

`shield-plus` `pill` `vaccine` `heartbeat` `microscope` `flask` `mask` `mood-sick` `bandage` `first-aid-kit`

## Dados e análise

Dashboards, relatórios e visualização epidemiológica.

`layout-dashboard` `activity` `chart-histogram` `chart-dots-3` `bulb` `chart-pie` `chart-bar` `trending-up` `timeline` `chart-dots` `table`

## Geografia e tempo

Localização, períodos, calendário epidêmico.

`world` `map-pin` `map` `world-search` `clock` `calendar-month` `calendar` `history` `calendar-event`

## Ações e navegação

Operações comuns, busca, filtros, controles.

`search` `filter` `adjustments` `plus` `edit` `trash` `download` `upload` `refresh` `settings` `arrow-right` `x`

## Status e comunicação

Feedback, alertas, notificações, perfis.

`circle-check` `alert-circle` `alert-triangle` `info-circle` `bell` `mail` `message-circle` `speakerphone` `user` `users`