@agentable/icons-astro

Lightweight, modern Astro icon library providing a massive collection of carefully designed SVG icons with zero runtime JS by default, perfect for SSR and Tree-Shaking.

Features

• 🚀 Ready to Use: Each icon is an independent Astro component, directly render with <Icon />
• 📦 Tree-Shakable: Only bundle the icons you actually import
• 🎨 Fully Customizable: Supports all native SVG attributes + additional props
• 🔧 TypeScript: Complete type definitions with IDE smart suggestions

Installation

::: code-group

pnpm add @agentable/icons-astro

yarn add @agentable/icons-astro

npm install @agentable/icons-astro

:::

Quick Start

1. Named Import (Recommended)

---
import { Home, User } from '@agentable/icons-astro';
---

<Home />
<User color='tomato' size={32} />

2. Direct Path Import (Fastest Build)

---
import Home from '@agentable/icons-astro/icons/Home';
---

<Home />

Props

| Name | Type | Default | Description | | --------------------- | ------------------ | -------------- | ------------------------------------ | | size | number \| string | 24 | Width & height (in px) | | color | string | currentColor | Stroke color | | strokeWidth | number | 2 | Stroke width | | absoluteStrokeWidth | boolean | false | Auto-scale stroke based on icon size |

Supports all SVG Presentation Attributes.

Custom Icons (IconNode)

---
import Icon from '@agentable/icons-astro/Icon.astro';
import type { IconNode } from '@agentable/icons-astro';

const heartNode: IconNode = [
  [
    'path',
    {
      d: 'M12 21l-1-1C5 14 2 11 2 7a5 5 0 0 1 8-4 5 5 0 0 1 8 4c0 4-3 7-9 13l-1 1z',
    },
  ],
];
---

<Icon iconNode={heartNode} color='red' />

Migration from Lucide Astro

APIs are compatible, just replace the package name:

-import { Home } from '@lucide/astro';
+import { Home } from '@agentable/icons-astro';

Made with ❤️ by Agentable