Lucide Icon Library

Lucide for Angular is a standalone, signal-based, and zoneless implementation designed for easy integration into Angular projects.

Key features include:

• Standalone Components: Icons are used as standalone Angular components with full dependency injection support.
• Customizable: You can adjust icon properties like size and color via component inputs or by configuring a global Angular provider.
• Tree-shakable: The library is designed so that only the icons you explicitly import are included in your production bundle.
• TypeScript Support: Components are fully typed for a better developer experience.

Lucide provides a dedicated icon component library for Solid applications. It allows you to integrate icons as standalone Solid components using JSX.

Key features include:

• Easy to Use: Import icons as components and use them directly in JSX.
• Customizable: Adjust icon properties like size and color via props.
• Tree-shakable: Only the icons you explicitly import are included in your production bundle.
• TypeScript Support: Fully typed components for a better developer experience.

Lucide for React is a component library that provides icons as standalone React components. Each icon renders an optimized inline SVG.

Key features include:

• Easy to use: Import icons and use them directly in JSX.
• Customizable: Adjust properties like size, color, and strokeWidth via props.
• Tree-shakable: Only the icons you explicitly import are included in your production bundle.
• TypeScript support: Fully typed components for enhanced developer experience.

Lucide Static Assets provides icon implementations that do not require a JavaScript framework. This is ideal for static sites, server-side rendering (SSR), or projects using vanilla HTML/CSS.

Available formats include:

• Individual SVG files: Use as <img> sources or CSS background-image.
• SVG Sprites: Efficient for loading multiple icons in a single request in static sites.
• Icon Fonts: For CSS-based icon systems.
• JavaScript modules: Exporting SVG strings for use in Node.js applications or SSR environments.

Lucide provides a React Native icon component library designed for easy integration into React Native applications. Each icon is exported as a standalone React Native component.

Key features include:

• Easy to use: Import icons and use them directly in JSX.
• Customizable: Adjust properties like size, color, and strokeWidth via props.
• Tree-shakable: Only the icons you explicitly import are included in your application bundle.
• TypeScript support: Fully typed components for enhanced developer experience.

Lucide provides a Vue icon component library where each icon is available as a standalone Vue component. This allows for seamless integration, customization via props, and full TypeScript support. The library is tree-shakable, meaning only the icons you explicitly import will be included in your final production bundle.

<!-- Example of how icons are used as components -->
<script setup>
import { Camera } from 'lucide-vue-next'
</script>

<template>
  <Camera />
</template>

The lucide package is designed for vanilla JavaScript applications, allowing you to add scalable vector icons to any web project without framework dependencies. It is suitable for static websites, legacy applications, or lightweight integrations where you want to avoid the overhead of a full framework.

Key Capabilities:

• Add icons to HTML using data attributes.
• Dynamically create and insert SVG icons via JavaScript.
• Customize icon appearance using CSS classes or inline styles.
• Tree-shake unused icons to minimize bundle size.

When using Lucide icons in different programming environments, the icon name is transformed from its kebab-case identifier to match the language's standard naming convention:

• PascalCase: Used for component names (e.g., in React or Vue).
• camelCase: Used for variable or property names (e.g., in JavaScript/TypeScript).
• kebab-case: The standard identifier used in the Lucide documentation and icon metadata.

For example, if an icon is named arrow-right:

• PascalCase: ArrowRight
• camelCase: arrowRight
• kebab-case: arrow-right

Use lucide-static if:

• You need raw SVG files.
• You need a JavaScript library containing SVG strings (e.g., for Common.js usage).
• You specifically require icon fonts or SVG sprites.
• You are prototyping.

Avoid lucide-static for web applications if:

For production web applications, it is highly recommended to use framework-specific packages (like lucide-react, lucide-vue, lucide-angular, etc.) instead of lucide-static.

Reason: Framework-specific packages support tree-shaking. This ensures your bundler only includes the icons you actually use. Using lucide-static (especially via icon fonts or sprites) will load the entire icon library, which can significantly slow down your webpage loading speed.