Iconify Packs Overview

Multiple Iconify icon packs are available as npm packages with Astro Icon components. Each pack has its own import and uses the same name-based API.

Pack Comparison

Pack	Prefix	Icons	Style	Best For	Page
Material Design	mdi	7,638	Filled + outlined	General-purpose, broadest coverage	Material Design
Carbon	carbon	2,582	Outlined	Enterprise/IBM design, clean lines	Carbon
Phosphor	ph	9,161	Multiple weights	Flexible weight options (thin to fill)	Phosphor
Tabler	tabler	6,034	Stroke-based	Crisp line icons, consistent stroke	Tabler

Usage

Each pack has its own Icon.astro component:

---
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" />

Icons render as inline SVGs using currentColor — they automatically adapt to light and dark mode.

Choosing a Pack

• Broadest coverage: Material Design Icons has the most icons (7,638) with filled and outlined variants for virtually every use case.
• Enterprise design: Carbon follows IBM’s design language with clean, consistent outlines suited for business applications.
• Weight flexibility: Phosphor provides six weight variants (thin, light, regular, bold, fill, duotone) for fine-tuning visual weight.
• Consistent strokes: Tabler uses a uniform 2px stroke width across all 6,034 icons for a cohesive look.

See each pack’s dedicated page for curated icon grids and browsing links.