Lucide for Astro

Astro components for Lucide icons that work perfectly with Astro's island architecture and multi-framework support. Each icon is an Astro component that renders as an inline SVG, providing excellent performance for static sites and server-side rendering scenarios.

List of features:

• Easy to Use: Import icons as Astro components and use them directly in your Astro application.
• Customizable: Adjust size, color, and other properties via props.
• Tree-shakable: Integrate seamlessly with Astro's component islands and partial hydration
• TypeScript Support: Fully typed components for better developer experience.

Overview

Getting startedLearn how to get started with Lucide for Astro.Migration from v0Learn how to migrate from v0 to v1 of Lucide Astro.

Basics

ColorAdjust the color of your iconsSizingAdjust the size of your iconsStroke widthAdjust the stroke width of your icons

Advanced

TypescriptAll exported types and how to use themAccessibilityMaking your icons accessibleGlobal stylingApply global styles to all iconsWith Lucide LabUsing lucide-lab with @lucide/astro