Icon Reference
The documentation theme provides access to thousands of icons from multiple packs. Every pack uses the same pattern: import the pack’s Icon.astro component and reference icons by name.
Available Icon Packs
Section titled “Available Icon Packs”| Pack | Count | Usage | Page |
|---|---|---|---|
| Starlight Built-in | ~200 | <Icon name="star" /> | Starlight Built-in |
| 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 |
Rendering Method
Section titled “Rendering Method”All icon packs use per-package Icon.astro components that render inline SVGs. Each pack has its own import:
---// Starlight built-inimport { Icon } from '@astrojs/starlight/components';
// Other packs — each has its own importimport LucideIcon from '@f5xc-salesdemos/icons-lucide/Icon.astro';import MdiIcon from '@f5xc-salesdemos/icons-mdi/Icon.astro';import F5xIcon from '@f5xc-salesdemos/icons-f5xc/Icon.astro';---
<Icon name="star" /><LucideIcon name="rocket" /><MdiIcon name="database" /><F5xIcon name="bot-defense" />Icons use currentColor and automatically adapt to light and dark mode with no special handling needed.
Starlight Built-in
Section titled “Starlight Built-in”Lucide
Section titled “Lucide”Dark/Light Mode Behavior
Section titled “Dark/Light Mode Behavior”All Icon components render inline SVGs using currentColor. They automatically adapt to the current theme — no special CSS or class handling is needed.
F5 XC service icons use CSS custom properties that automatically adapt to light and dark mode — no special class handling is needed. For other multi-color icons (like HashiCorp Flight color variants), the no-invert class on .icon-card-image preserves original colors in dark mode.
Which Pack Should I Use?
Section titled “Which Pack Should I Use?”| Use Case | Recommended Pack | Why |
|---|---|---|
| General UI (arrows, close, search) | Starlight Built-in | Zero config, always available |
| F5 product diagrams | F5 Brand | Domain-specific networking/security art |
| Modern stroke icons | Lucide | Clean, consistent 1,600+ icons |
| Filled/outlined icons at scale | Material Design (mdi) | Largest set with 7,638 icons |
| IBM design language | Carbon | 2,582 enterprise-grade icons |
| Flexible weight options | Phosphor | 9,161 icons with six weight variants |
| Crisp line icons | Tabler | 6,034 icons with consistent 2px stroke |
| F5 XC service diagrams | F5 XC Services | 30 Distributed Cloud service icons |
| Brand/company logos | Simple Icons | 3,200+ brand icons for vendors and services |
| Cloud/infra vendor logos | HashiCorp Flight | AWS, GCP, Azure, K8s vendor icons |
| AWS architecture diagrams | AWS Architecture | 885 color service icons for AWS infrastructure |
| Azure architecture diagrams | Azure Architecture | 606 color service icons for Azure infrastructure |
| GCP architecture diagrams | GCP Architecture | 216 color service icons for Google Cloud infrastructure |