跳转到内容
Icons

图标参考

文档主题提供了来自多个图标包的数千个图标。每个图标包都使用相同的模式：导入该图标包的 Icon.astro 组件，并通过名称引用图标。

可用图标包

Section titled “可用图标包”
图标包数量用法页面
Starlight 内置~200<Icon name="star" />Starlight 内置
F5 品牌665<Icon name="ai-admin" />F5 品牌
Lucide~1,600<Icon name="rocket" />Lucide
Material Design7,638<Icon name="database" />Material Design
Carbon2,582<Icon name="cloud" />Carbon
Phosphor9,161<Icon name="globe" />Phosphor
Tabler6,034<Icon name="shield" />Tabler
F5 XC 服务30<Icon name="bot-defense" />F5 XC 服务
Simple Icons3,200+<Icon name="cloudflare" />Simple Icons
HashiCorp Flight672<Icon name="cloud" />HashiCorp Flight
AWS 架构885<Icon name="lambda" />AWS
Azure 架构606<Icon name="virtual-machine" />Azure
GCP 架构216<Icon name="cloud-storage" />GCP

渲染方式

Section titled “渲染方式”

所有图标包都使用各自包的 Icon.astro 组件来渲染内联 SVG。每个图标包都有自己的导入方式：

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


// Other packs — each has its own import
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" />

图标使用 currentColor，会自动适应浅色和深色模式，无需任何特殊处理。

Starlight 内置

Section titled “Starlight 内置”
star
rocket
setting
heart

Lucide

Section titled “Lucide”
rocket
mdi/database
carbon/cloud
tabler/shield

深色/浅色模式行为

Section titled “深色/浅色模式行为”

所有 Icon 组件都使用 currentColor 渲染内联 SVG。它们会自动适应当前主题——无需特殊的 CSS 或类处理。

F5 XC 服务图标使用 CSS 自定义属性，可自动适应浅色和深色模式——无需特殊的类处理。对于其他多色图标（如 HashiCorp Flight 的颜色变体），在 .icon-card-image 上使用 no-invert 类可以在深色模式下保留原始颜色。

应该使用哪个图标包？

Section titled “应该使用哪个图标包？”
使用场景推荐图标包原因
通用 UI（箭头、关闭、搜索）Starlight 内置零配置，始终可用
F5 产品图表F5 品牌专用的网络/安全领域图标
现代描边图标Lucide简洁一致的 1,600+ 图标
大规模填充/描边图标Material Design (mdi)最大图标集，拥有 7,638 个图标
IBM 设计语言Carbon2,582 个企业级图标
灵活的粗细选项Phosphor9,161 个图标，支持六种粗细变体
清晰的线条图标Tabler6,034 个图标，统一 2px 描边
F5 XC 服务图表F5 XC 服务30 个分布式云服务图标
品牌/公司标志Simple Icons3,200+ 个供应商和服务的品牌图标
云/基础设施供应商标志HashiCorp FlightAWS、GCP、Azure、K8s 供应商图标
AWS 架构图AWS 架构885 个用于 AWS 基础设施的彩色服务图标
Azure 架构图Azure 架构606 个用于 Azure 基础设施的彩色服务图标
GCP 架构图GCP 架构216 个用于 Google Cloud 基础设施的彩色服务图标