Vox Mente
Navegação

Fundamentos

Ícones

beta

Phosphor é a única família. Ícone herda a cor do texto ao redor.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

Uma família só

Phosphor é a única biblioteca de ícones do sistema. Ícone herda a cor do texto ao redor, então acompanha o tema sem ninguém pintá-lo.
// componente de servidor
import { GraduationCap } from "@phosphor-icons/react/dist/ssr"

// componente de cliente
import { GraduationCap } from "@phosphor-icons/react"

<GraduationCap className="size-4 text-muted-foreground" />

Pesos

regular é o padrão. fill marca estado ativo ou selecionado. Os demais existem para momentos de display — não misture pesos na mesma superfície.
thin
light
regular
bold
fill
duotone

Tamanhos

Dimensione com as utilidades de tamanho, não com a prop size — assim o ícone acompanha o componente que o contém.
size-3dentro de botão xs
size-4controles e menus
size-5ícone isolado
size-6destaque

Dentro de componentes

O espaçamento entre ícone e texto vem do atributo data-icon, não de margem manual. Em botão só de ícone, sempre defina aria-label.
<Button>
  <Plus data-icon="inline-start" />
  Nova turma
</Button>

<Button size="icon-md" variant="outline" aria-label="Adicionar">
  <Plus />
</Button>