Tabler Icons Now Supports Astro

Starting today, Tabler Icons is available for Astro. Drop any of our 6,000+ free, open source icons straight into your Astro components with the new package — fully typed, tree-shakeable, and customizable out of the box.

Tabler Icons ❤️ Astro

Starting today, Tabler Icons officially supports Astro. You can now use the full collection of 6,000+ free, open source icons natively inside your Astro components — no wrappers, no workarounds.

The new @tabler/icons-astro package ships every icon as a first-class Astro component, so you get the same customizable size, color, and stroke width you already know from our React, Vue, Svelte, and SolidJS packages.

Installation

Install the package with your favorite package manager:

npm install @tabler/icons-astro

Usage

Import the icons you need and drop them straight into your markup:

---
import { IconHeart, IconBrandAstro } from '@tabler/icons-astro';
---

<IconHeart />
<IconBrandAstro size={48} stroke={1.5} color="#066FD1" />

Every icon accepts the familiar props:

• size — width and height in pixels
• stroke — stroke width
• color — stroke color

Because each icon is its own component, only the icons you actually use end up in your bundle—keeping your Astro site fast and lightweight.

Get Started

Browse the full set in the Tabler Icons library, grab the ones you need, and start building with Astro today. As always, everything is free and open source.

Have a request or spotted a bug? Open an issue—your feedback helps us make Tabler better for everyone.