Icons

Usamos Lucide como biblioteca oficial de ícones. Open source, 1400+ ícones, consistente, tree-shakeable.

Instalar

Escolhe a versão conforme a stack:

Stack	Package	Import
React / Next.js	`lucide-react`	import { Home } from 'lucide-react';
Vue / Nuxt	`lucide-vue-next`	import { Home } from 'lucide-vue-next';
Astro / Svelte / HTML	`lucide-static`	SVGs puros em `/icons/*.svg`
Laravel / Blade	`mallardduck/blade-lucide-icons`	`<x-lucide-home class="w-5 h-5" />`

Regras de uso

Tamanho

w-4 h-4 — dentro de botões small, inputs
w-5 h-5 — default, botões base, nav
w-6 h-6 — botões grandes, headings
w-8 h-8+ — empty states, features

Stroke

Lucide usa stroke 2 por default. Mantém.
Não misturar estilos (outline vs filled) na mesma UI
Cor via text-*. O SVG usa currentColor.

Acessibilidade

Ícone decorativo ao lado de texto: aria-hidden="true"
Ícone sozinho a funcionar como botão: aria-label="..."
Touch target mínimo: 44x44 (envolver num botão/link)

Cor

Neutros (text-slate-600/700) para ícones funcionais
Primária (text-rose-600) só quando é acção
Emerald para sucesso, rose/red para erro — matching do design system

Ícones recomendados

Ver todos na lucide.dev →

Subset do dia-a-dia (nav, acções, estados). Se precisas de outro, procura em lucide.dev/icons.

home

search

settings

user

users

bell

mail

calendar

clock

file

folder

download

upload

trash

pencil

plus

minus

x

check

chevron-down

chevron-right

arrow-right

arrow-left

external-link

menu

filter

sliders-horizontal

eye

eye-off

heart

star

bookmark

share-2

copy

link

info

triangle-alert

circle-alert

circle-check

circle-help

loader

refresh-cw

Exemplo de uso

// React
import { Download } from 'lucide-react';

<button class="inline-flex items-center gap-2 px-3 py-2 bg-rose-600 text-white rounded-md">
  <Download class="w-4 h-4" aria-hidden="true" />
  Descarregar
</button>

// Astro / HTML (via lucide-static)
import DownloadIcon from 'lucide-static/icons/download.svg?raw';
<span set:html={DownloadIcon} />