Referencia de Iconos

El tema de documentación proporciona acceso a miles de iconos de múltiples paquetes. Cada paquete utiliza el mismo patrón: importar el componente Icon.astro del paquete y hacer referencia a los iconos por nombre.

Paquetes de Iconos Disponibles

Paquete	Cantidad	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 Renderizado

Todos los paquetes de iconos utilizan componentes Icon.astro por paquete que renderizan SVGs en línea. Cada paquete tiene su propia importación:

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

// Otros paquetes — cada uno tiene su propia importación
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" />

Los iconos utilizan currentColor y se adaptan automáticamente al modo claro y oscuro sin necesidad de ningún manejo especial.

Starlight Integrado

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

Comportamiento en Modo Oscuro/Claro

Todos los componentes Icon renderizan SVGs en línea utilizando currentColor. Se adaptan automáticamente al tema actual — no se necesita ningún manejo especial de CSS o clases.

Los iconos de servicios F5 XC utilizan propiedades personalizadas de CSS que se adaptan automáticamente al modo claro y oscuro — no se necesita ningún manejo especial de clases. Para otros iconos multicolor (como las variantes de color de HashiCorp Flight), la clase no-invert en .icon-card-image preserva los colores originales en modo oscuro.

¿Qué Paquete Debería Usar?

Caso de Uso	Paquete Recomendado	Por Qué
UI general (flechas, cerrar, buscar)	Starlight Integrado	Sin configuración, siempre disponible
Diagramas de productos F5	F5 Brand	Arte específico de dominio para redes/seguridad
Iconos modernos de trazo	Lucide	Limpios, consistentes, más de 1,600 iconos
Iconos rellenos/contorneados a escala	Material Design (mdi)	El conjunto más grande con 7,638 iconos
Lenguaje de diseño IBM	Carbon	2,582 iconos de nivel empresarial
Opciones flexibles de grosor	Phosphor	9,161 iconos con seis variantes de grosor
Iconos de línea nítidos	Tabler	6,034 iconos con trazo consistente de 2px
Diagramas de servicios F5 XC	F5 XC Services	30 iconos de servicios Distributed Cloud
Logos de marcas/empresas	Simple Icons	Más de 3,200 iconos de marca para proveedores y servicios
Logos de proveedores cloud/infraestructura	HashiCorp Flight	Iconos de proveedores AWS, GCP, Azure, K8s
Diagramas de arquitectura AWS	AWS Architecture	885 iconos de servicios a color para infraestructura AWS
Diagramas de arquitectura Azure	Azure Architecture	606 iconos de servicios a color para infraestructura Azure
Diagramas de arquitectura GCP	GCP Architecture	216 iconos de servicios a color para infraestructura Google Cloud