Chapter 146: Lucide Version 1

Core Idea

After years of work and dedication, Lucide Version 1 has been officially released! This milestone marks a significant achievement in our journey to provide a comprehensive and versatile icon library for developers and designers alike.

Key Concepts

• Removed brand icons, see our brand logo statement for more details.
• Improved documentation, guides per framework.
• Improved accessibility, aria-hidden is now set by default on icons.
• Removed UMD build, only ESM and CJS now (exception for the lucide package).
• Package rename from lucide-vue-next to @lucide/vue.
• A modern, standalone implementation for Angular, @lucide/angular
• Support for context providers in React, Vue, Svelte, and Solid.
• Stable code points for Lucide font.

Code Examples

import { LucideProvider, Home } from 'lucide-react';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

• What it demonstrates: Lucide Version 1 usage pattern from the official Lucide docs.

Key Takeaways

1. Removed brand icons, see our brand logo statement for more details.
2. Improved documentation, guides per framework.
3. Improved accessibility, aria-hidden is now set by default on icons.
4. Removed UMD build, only ESM and CJS now (exception for the lucide package).
5. Package rename from lucide-vue-next to @lucide/vue.

Connects To

• General & Meta: part of the General & Meta section of the Lucide docs.
• Accessibility in depth: overview page for this section.