Referência de Ícones

O tema de documentação fornece acesso a milhares de ícones de múltiplos pacotes. Todos os pacotes seguem o mesmo padrão: importe o componente Icon.astro do pacote e referencie os ícones pelo nome.

Pacotes de Ícones Disponíveis

Pacote	Quantidade	Uso	Página
Starlight Integrado	~200	`<Icon name="star" />`	Starlight Integrado
F5 Brand	665	`<Icon name="ai-admin" />`	F5 Brand
Lucide	~1.600	`<Icon name="rocket" />`	Lucide
Material Design	7.638	`<Icon name="database" />`	Material Design
Carbon	2.582	`<Icon name="cloud" />`	Carbon
Phosphor	9.161	`<Icon name="globe" />`	Phosphor
Tabler	6.034	`<Icon name="shield" />`	Tabler
F5 XC Services	30	`<Icon name="bot-defense" />`	F5 XC Services
Simple Icons	3.200+	`<Icon name="cloudflare" />`	Simple Icons
HashiCorp Flight	672	`<Icon name="cloud" />`	HashiCorp Flight
AWS Architecture	885	`<Icon name="lambda" />`	AWS
Azure Architecture	606	`<Icon name="virtual-machine" />`	Azure
GCP Architecture	216	`<Icon name="cloud-storage" />`	GCP

Método de Renderização

Todos os pacotes de ícones utilizam componentes Icon.astro por pacote que renderizam SVGs inline. Cada pacote possui sua própria importação:

---
// Starlight integrado
import { Icon } from '@astrojs/starlight/components';

// Outros pacotes — cada um tem sua própria importação
import LucideIcon from '@f5-sales-demo/icons-lucide/Icon.astro';
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import F5xIcon from '@f5-sales-demo/icons-f5xc/Icon.astro';
---

<Icon name="star" />
<LucideIcon name="rocket" />
<MdiIcon name="database" />
<F5xIcon name="bot-defense" />

Os ícones utilizam currentColor e se adaptam automaticamente aos modos claro e escuro sem necessidade de tratamento especial.

Starlight Integrado

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

Comportamento no Modo Escuro/Claro

Todos os componentes Icon renderizam SVGs inline usando currentColor. Eles se adaptam automaticamente ao tema atual — nenhum tratamento especial de CSS ou classes é necessário.

Os ícones de serviços F5 XC utilizam propriedades personalizadas CSS que se adaptam automaticamente aos modos claro e escuro — nenhum tratamento especial de classes é necessário. Para outros ícones multicoloridos (como variantes coloridas do HashiCorp Flight), a classe no-invert em .icon-card-image preserva as cores originais no modo escuro.

Qual Pacote Devo Usar?

Caso de Uso	Pacote Recomendado	Por quê
UI geral (setas, fechar, busca)	Starlight Integrado	Configuração zero, sempre disponível
Diagramas de produtos F5	F5 Brand	Arte específica de redes/segurança
Ícones modernos com traço	Lucide	Limpos, consistentes, mais de 1.600 ícones
Ícones preenchidos/contornados em escala	Material Design (mdi)	Maior conjunto com 7.638 ícones
Linguagem de design IBM	Carbon	2.582 ícones de nível empresarial
Opções flexíveis de espessura	Phosphor	9.161 ícones com seis variantes de espessura
Ícones de linha nítidos	Tabler	6.034 ícones com traço consistente de 2px
Diagramas de serviços F5 XC	F5 XC Services	30 ícones de serviços Distributed Cloud
Logos de marcas/empresas	Simple Icons	Mais de 3.200 ícones de marcas para fornecedores e serviços
Logos de fornecedores de nuvem/infraestrutura	HashiCorp Flight	Ícones de fornecedores AWS, GCP, Azure, K8s
Diagramas de arquitetura AWS	AWS Architecture	885 ícones coloridos de serviços para infraestrutura AWS
Diagramas de arquitetura Azure	Azure Architecture	606 ícones coloridos de serviços para infraestrutura Azure
Diagramas de arquitetura GCP	GCP Architecture	216 ícones coloridos de serviços para infraestrutura Google Cloud