Iconify-Pakete Übersicht

Mehrere Iconify-Icon-Pakete sind als npm-Pakete mit Astro Icon-Komponenten verfügbar. Jedes Paket hat seinen eigenen Import und verwendet die gleiche name-basierte API.

Paketvergleich

Paket	Präfix	Icons	Stil	Ideal für	Seite
Material Design	mdi	7.638	Gefüllt + umrandet	Allgemeine Nutzung, breiteste Abdeckung	Material Design
Carbon	carbon	2.582	Umrandet	Enterprise/IBM-Design, klare Linien	Carbon
Phosphor	ph	9.161	Mehrere Strichstärken	Flexible Strichstärkenoptionen (dünn bis gefüllt)	Phosphor
Tabler	tabler	6.034	Strichbasiert	Klare Linien-Icons, einheitliche Strichstärke	Tabler

Verwendung

Jedes Paket hat seine eigene Icon.astro-Komponente:

---
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 werden als Inline-SVGs mit currentColor gerendert — sie passen sich automatisch an den hellen und dunklen Modus an.

Ein Paket auswählen

• Breiteste Abdeckung: Material Design Icons bietet die meisten Icons (7.638) mit gefüllten und umrandeten Varianten für praktisch jeden Anwendungsfall.
• Enterprise-Design: Carbon folgt IBMs Designsprache mit klaren, einheitlichen Umrissen, die für Geschäftsanwendungen geeignet sind.
• Strichstärken-Flexibilität: Phosphor bietet sechs Strichstärkenvarianten (dünn, leicht, regulär, fett, gefüllt, Duoton) zur Feinabstimmung der visuellen Gewichtung.
• Einheitliche Striche: Tabler verwendet eine gleichmäßige Strichstärke von 2px über alle 6.034 Icons hinweg für ein einheitliches Erscheinungsbild.

Auf der jeweiligen Paketseite finden Sie kuratierte Icon-Raster und Links zum Durchsuchen.