DOCSEARCHbyAlgolia
Submit Docs

Lucide Icons

website·Indexed 41 days ago

https://lucide.dev

A comprehensive icon library providing components for React, Vue, and vanilla JavaScript. Documentation covers installation, customization of color, sizing, and stroke width, accessibility best practices, and migration guides from v0 and react-feather.

Tokens
42.2K
Snippets
300
Records
389
Agent score
72%

What's inside Lucide

  1. Overview of Lucide for Angular

    Lucide for Angular is a standalone, signal-based, and zoneless implementation for integrating icons into Angular projects. Key features include:

    • Standalone Components: Icons are provided as standalone Angular components with full dependency injection support.
    • Customizability: Icon properties such as size and color can be adjusted via component inputs or configured globally using an Angular provider.
    • Tree-shaking: The library is designed to be tree-shakable, ensuring only the icons actually used in the project are included in the final production bundle.
    • TypeScript Support: Components are fully typed for improved developer experience.

  2. Overview of Lucide for React

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

    • Tree-shaking: Only imported icons are included in the final production bundle.
    • Customization: Icons can be styled via props (e.g., size, color, stroke width).
    • TypeScript Support: Components are fully typed for improved developer experience.

  3. Overview of Lucide for Astro

    Lucide provides dedicated Astro components for its icon library. These components render as inline SVGs, making them highly performant for static sites and server-side rendering (SSR) while fitting into Astro's island architecture. Key features include tree-shaking for partial hydration, full TypeScript support, and the ability to customize icon properties such as size and color via props.

  4. Overview of Lucide for Vue

    Lucide provides a Vue icon component library where each icon is available as a standalone Vue component. Key features include:

    • Tree-shaking: Only the icons explicitly imported are included in the final production bundle.
    • Customization: Icon properties such as size and color can be adjusted via component props.
    • TypeScript Support: Components are fully typed for improved developer experience.
    • Integration: Icons can be used directly within Vue components, including those using JSX.

  5. Overview of Lucide for Svelte

    Lucide provides a Svelte icon component library where each icon is available as a standalone Svelte component. Key features include:

    • Tree-shaking: Only the icons explicitly imported are included in the final production bundle.
    • Customization: Icons can be adjusted via props and global context for size, color, and other properties.
    • TypeScript Support: Components are fully typed for improved developer experience.
    • Integration: Icons are imported and used directly within Svelte components.

  6. Overview of Lucide for Preact

    Lucide provides a Preact icon component library where each icon is available as a standalone Preact component. This allows for seamless integration into Preact applications using JSX. Key features include:

    • Customizability: Icons can be adjusted via props for size, color, and other properties.
    • Tree-shaking: Only the icons explicitly imported are included in the final production bundle.
    • TypeScript Support: Components are fully typed for improved developer experience.

  7. Overview of Lucide for Solid

    Lucide provides a Solid icon component library where each icon is available as a standalone Solid component. This allows for seamless integration into Solid applications using JSX. Key features include:

    • Tree-shaking: Only the icons explicitly imported are included in the final production bundle.
    • Customization: Icons can be adjusted via props for size, color, and other properties.
    • TypeScript Support: Components are fully typed for improved developer experience.

  8. Overview of the Lucide icon library

    Lucide is an open-source icon library providing over 1600 vector (SVG) files. It is designed for use in both digital and non-digital projects, emphasizing consistency in style, recognizability, and readability across all sizes. The library supports community-driven growth, allowing users to request new icons via design requests.

  9. Overview of Lucide for React Native

    Lucide provides a React Native icon component library where each icon is available as a standalone React component. The library is tree-shakable, meaning only the imported icons are included in the final bundle, and it provides full TypeScript support for improved developer experience. Icons can be customized via props to adjust size, color, and stroke width.

  10. Use Lucide icons without a JavaScript framework

    Lucide provides a static assets package for developers who need to implement icons in environments without JavaScript frameworks (such as static site generators or server-side rendered apps). This package provides icons in several formats: individual SVG files, SVG sprites, icon fonts, and a JavaScript library that exports SVG strings for Node.js applications.

  11. Understand Lucide React Native icon naming aliases

    Lucide provides multiple names for the same icon to ensure consistency and prevent naming collisions with other libraries. For any given icon, there are typically three available import styles: the default name, a prefixed name, and a suffixed name.
    // These are all the same icon
import {
  House,       // Default
  HouseIcon,   // Suffixed
  LucideHouse, // Prefixed
} from "lucide-react-native";

  12. Understand Lucide icon accessibility defaults

    By default, Lucide icons are shipped with aria-hidden="true". This is intended to prevent decorative icons from creating unnecessary noise for screen reader users. Icons should only be made accessible if they convey essential meaning on their own.