跳转到内容
Icons

Iconify 图标包概览

多个 Iconify 图标包以 npm 包的形式提供，并配有 Astro Icon 组件。每个图标包都有各自的导入方式，并使用相同的基于 name 的 API。

图标包比较

Section titled “图标包比较”
图标包前缀图标数量风格最适用于页面
Material Designmdi7,638填充 + 轮廓通用场景，覆盖范围最广Material Design
Carboncarbon2,582轮廓企业/IBM 设计，线条简洁Carbon
Phosphorph9,161多种粗细灵活的粗细选项（从细到填充）Phosphor
Tablertabler6,034描边风格清晰的线条图标，一致的描边Tabler

使用方法

Section titled “使用方法”

每个图标包都有自己的 Icon.astro 组件：

---
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import CarbonIcon from '@f5-sales-demo/icons-carbon/Icon.astro';
import PhIcon from '@f5-sales-demo/icons-phosphor/Icon.astro';
import TablerIcon from '@f5-sales-demo/icons-tabler/Icon.astro';
---


<MdiIcon name="database" />
<CarbonIcon name="cloud" />
<PhIcon name="globe" />
<TablerIcon name="shield" />

图标以内联 SVG 的形式渲染，使用 currentColor — 它们会自动适配亮色和暗色模式。

选择图标包

Section titled “选择图标包”
  • 覆盖范围最广：Material Design Icons 拥有最多的图标（7,638 个），提供填充和轮廓变体，几乎涵盖所有使用场景。
  • 企业级设计：Carbon 遵循 IBM 的设计语言，具有简洁一致的轮廓风格，适合商业应用。
  • 粗细灵活性：Phosphor 提供六种粗细变体（thin、light、regular、bold、fill、duotone），可精细调节视觉粗细。
  • 一致的描边：Tabler 在所有 6,034 个图标上使用统一的 2px 描边宽度，呈现统一的视觉效果。

请参阅各图标包的专属页面，了解精选图标网格和浏览链接。