Lucide Icons Installation and Setup
Lucide Icons supports multiple platforms. Let us walk through the installation steps for HTML setups, React applications, and Astro projects.
1. Native HTML Implementation
For simple static HTML sites without build setups, you can load Lucide from a Content Delivery Network (CDN) and trigger the replacement engine using a script:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Static Page</title>
<!-- Load the Lucide CDN bundle -->
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<!-- Define icon placeholders -->
<i data-lucide="home"></i>
<i data-lucide="user"></i>
<script>
// Replace placeholders with SVG icons
lucide.createIcons();
</script>
</body>
</html>2. React Applications Integration
In React workspaces, install the official package:
# Install the React package
npm install lucide-reactOnce installed, import and render the icon components directly:
import { Home, User } from "lucide-react";
export default function Sidebar() {
return (
<nav>
<Home className="w-5 h-5" />
<User className="w-5 h-5" />
</nav>
);
}3. Astro Projects Integration
In Astro environments, using React components is supported, but you can also use native Astro packages like astro-icon to render Lucide without React overhead:
# Install the Astro Icon integration
npx astro add astro-iconThen, reference the Lucide icon pack dynamically:
---
// src/pages/index.astro
import { Icon } from "astro-icon/components";
---
<Layout>
<!-- Renders Lucide home icon -->
<Icon name="lucide:home" class="w-6 h-6 text-blue-600" />
</Layout>Published on Last updated: