# Beautiful & consistent icons > Beautiful & consistent icon toolkit made by the community. Made by the community. ## Table of Contents - [Lucide for Vanilla JavaScript](/guide/lucide.md): The core Lucide package for vanilla JavaScript applications. Learn how to add scalable vector icons to any web project without framework dependencies. - [Getting started - Lucide](/guide/lucide/getting-started.md): This guide will help you get started with Lucide in your Vanilla JavaScript project. - [Migration from v0](/guide/lucide/migration.md) ### Basics - [Color - Lucide](/guide/lucide/basics/color.md): Learn how to customize the color of Lucide icons in your Vanilla JavaScript applications using the color attribute and CSS. - [Sizing - Lucide](/guide/lucide/basics/sizing.md): Learn how to adjust the size of Lucide icons in your Vanilla JavaScript applications using the width and height attributes and CSS. - [Stroke width - Lucide](/guide/lucide/basics/stroke-width.md): Learn how to customize the stroke width of Lucide icons in your Vanilla JavaScript applications using the strokeWidth and absoluteStrokeWidth attributes. ### Advanced - [Global styling - Lucide](/guide/lucide/advanced/global-styling.md): Learn how to apply global styles to Lucide icons in your Vanilla JavaScript applications using CSS or the attrs option in createIcons. - [Shadow DOM - Lucide](/guide/lucide/advanced/shadow-dom.md): Learn how to use Lucide icons within a shadow DOM in your Vanilla JavaScript applications. - [Content Template element - Lucide](/guide/lucide/advanced/content-template-element.md): Learn how to include Lucide icons inside HTML template elements using the inTemplates option. - [Accessibility - Lucide](/guide/lucide/advanced/accessibility.md): Best practices for accessible icons in your application. - [With Lucide Lab or custom icons - Lucide](/guide/lucide/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Vanilla JavaScript applications. - [Filled Icons - Lucide](/guide/lucide/advanced/filled-icons.md): Fills are not officially supported in Lucide, but you can still use the fill attribute on certain icons to create filled versions. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Lucide for React](/guide/react.md): Lucide provides a React icon component library that makes it easy to integrate icons into your React applications. Each icon is available as a standalone React component, allowing for seamless integration and customization. - [Getting started - React](/guide/react/getting-started.md): This guide will help you get started with Lucide in your React project. - [Migration from v0](/guide/react/migration.md) - [Migration Guide: react-feather → lucide-react](/guide/react/migration-from-feather.md) ### Basics - [Color - React](/guide/react/basics/color.md): Learn how to adjust the color of icons in your React application using the `color` prop or by using parent elements text color value. - [Sizing - React](/guide/react/basics/sizing.md): Learn how to adjust the size of icons in your React application using the `size` prop or by using CSS. - [Stroke width - React](/guide/react/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your React application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - React](/guide/react/advanced/typescript.md): Learn about the different types exported by the `lucide-react` package and how to use them in your React application. - [Accessibility - React](/guide/react/advanced/accessibility.md): Best practices for accessible icons in your React application. - [Global Styling - React](/guide/react/advanced/global-styling.md): Learn how to style all Lucide icons globally in your React application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - React](/guide/react/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your React applications using the Icon component. - [Filled Icons - React](/guide/react/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your React application, and the limitations of using fills with Lucide icons. - [Aliased Names - React](/guide/react/advanced/aliased-names.md): Learn about the different import name styles available for Lucide icons in your React project and how to choose the one that best fits your needs. - [Combining icons - React](/guide/react/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your React application. - [Dynamic Icon Component - React](/guide/react/advanced/dynamic-icon-component.md): Learn how to use the DynamicIcon component to load icons dynamically by name in your React application, and understand the caveats of using this approach. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Vue](/guide/vue.md): Lucide provides a Vue icon component library that makes it easy to integrate icons into your Vue applications. Each icon is available as a standalone Vue component, allowing for seamless integration and customization. - [Getting started - Vue](/guide/vue/getting-started.md): This guide will help you get started with Lucide in your Vue project. - [Migration from v0](/guide/vue/migration.md) ### Basics - [Color - Vue](/guide/vue/basics/color.md): Learn how to adjust the color of icons in your Vue application using the `color` prop or by using parent elements text color value. - [Sizing - Vue](/guide/vue/basics/sizing.md): Learn how to adjust the size of icons in your Vue application using the `size` prop or by using CSS. - [Stroke width - Vue](/guide/vue/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your Vue application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - Vue](/guide/vue/advanced/typescript.md): Learn about the different types exported by the `@lucide/vue` package and how to use them in your Vue application. - [Accessibility - Vue](/guide/vue/advanced/accessibility.md): Best practices for accessible icons in your Vue application. - [Global Styling - Vue](/guide/vue/advanced/global-styling.md): Learn how to style all Lucide icons globally in your Vue application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - Vue](/guide/vue/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Vue applications using the Icon component. - [Filled Icons - Vue](/guide/vue/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your Vue application, and the limitations of using fills with Lucide icons. - [Aliased Names - Vue](/guide/vue/advanced/aliased-names.md): Learn about the different import name styles available for Lucide icons in your Vue project and how to choose the one that best fits your needs. - [Combining icons - Vue](/guide/vue/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your Vue application. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Svelte](/guide/svelte.md): Lucide provides a Svelte icon component library that makes it easy to integrate icons into your Svelte applications. Each icon is available as a standalone Svelte component, allowing for seamless integration and customization. - [Getting started - Svelte](/guide/svelte/getting-started.md): This guide will help you get started with Lucide in your Svelte project. - [Migration from v0](/guide/svelte/migration.md) ### Basics - [Color - Svelte](/guide/svelte/basics/color.md): Learn how to adjust the color of icons in your Svelte application using the `color` prop or by using parent elements text color value. - [Sizing - Svelte](/guide/svelte/basics/sizing.md): Learn how to adjust the size of icons in your Svelte application using the `size` prop or by using CSS. - [Stroke width - Svelte](/guide/svelte/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your Svelte application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - Svelte](/guide/svelte/advanced/typescript.md): Learn about the different types exported by the `@lucide/svelte` package and how to use them in your Svelte application. - [Accessibility - Svelte](/guide/svelte/advanced/accessibility.md): Best practices for accessible icons in your Svelte application. - [Global Styling - Svelte](/guide/svelte/advanced/global-styling.md): Learn how to style all Lucide icons globally in your Svelte application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - Svelte](/guide/svelte/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Svelte applications using the Icon component. - [Filled Icons - Svelte](/guide/svelte/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your Svelte application, and the limitations of using fills with Lucide icons. - [Combining icons - Svelte](/guide/svelte/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your Svelte application. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Solid](/guide/solid.md): Lucide provides a Solid icon component library that makes it easy to integrate icons into your Solid applications. Each icon is available as a standalone Solid component, allowing for seamless integration and customization. - [Getting started - Solid](/guide/solid/getting-started.md): This guide will help you get started with Lucide in your Solid project. - [Migration from v0](/guide/solid/migration.md) ### Basics - [Color - Solid](/guide/solid/basics/color.md): Learn how to adjust the color of icons in your Solid application using the `color` prop or by using parent elements text color value. - [Sizing - Solid](/guide/solid/basics/sizing.md): Learn how to adjust the size of icons in your Solid application using the `size` prop or by using CSS. - [Stroke width - Solid](/guide/solid/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your Solid application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - Solid](/guide/solid/advanced/typescript.md): Learn about the different types exported by the `lucide-solid` package and how to use them in your Solid application. - [Accessibility - Solid](/guide/solid/advanced/accessibility.md): Best practices for accessible icons in your Solid application. - [Global Styling - Solid](/guide/solid/advanced/global-styling.md): Learn how to style all Lucide icons globally in your Solid application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - Solid](/guide/solid/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Solid applications using the Icon component. - [Filled Icons - Solid](/guide/solid/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your Solid application, and the limitations of using fills with Lucide icons. - [Aliased Names - Solid](/guide/solid/advanced/aliased-names.md): Learn about the different import name styles available for Lucide icons in your Solid project and how to choose the one that best fits your needs. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Astro](/guide/astro.md): Learn how to use Lucide icons in your Astro applications with our comprehensive guide. - [Getting started - Astro](/guide/astro/getting-started.md): This guide will help you get started with Lucide in your Astro project. - [Migration from v0](/guide/astro/migration.md) ### Basics - [Color - Astro](/guide/astro/basics/color.md): Learn how to customize the color of Lucide icons in your Astro applications using the color prop and CSS. - [Sizing - Astro](/guide/astro/basics/sizing.md): Learn how to adjust the size of Lucide icons in your Astro applications using the size prop and CSS. - [Stroke width - Astro](/guide/astro/basics/stroke-width.md): Learn how to customize the stroke width of Lucide icons in your Astro applications using the strokeWidth and absoluteStrokeWidth props. ### Advanced - [TypeScript Support - Astro](/guide/astro/advanced/typescript.md): Learn about the TypeScript types exported by the @lucide/astro package. - [Accessibility - Astro](/guide/astro/advanced/accessibility.md): Best practices for accessible icons in your application. - [Global Styling - Astro](/guide/astro/advanced/global-styling.md): Learn how to apply global styling to Lucide icons in your Astro applications using CSS. - [With Lucide Lab or custom icons - Astro](/guide/astro/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Astro applications using the Icon component. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Preact](/guide/preact.md): Lucide provides a Preact icon component library that makes it easy to integrate icons into your Preact applications. Each icon is available as a standalone Preact component, allowing for seamless integration and customization. - [Getting started - Preact](/guide/preact/getting-started.md): This guide will help you get started with Lucide in your Preact project. - [Migration from v0](/guide/preact/migration.md) ### Basics - [Color - Preact](/guide/preact/basics/color.md): Learn how to adjust the color of icons in your Preact application using the `color` prop or by using parent elements text color value. - [Sizing - Preact](/guide/preact/basics/sizing.md): Learn how to adjust the size of icons in your Preact application using the `size` prop or by using CSS. - [Stroke width - Preact](/guide/preact/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your Preact application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - Preact](/guide/preact/advanced/typescript.md): Learn about the different types exported by the `lucide-preact` package and how to use them in your Preact application. - [Accessibility - Preact](/guide/preact/advanced/accessibility.md): Best practices for accessible icons in your Preact application. - [Global Styling - Preact](/guide/preact/advanced/global-styling.md): Learn how to style all Lucide icons globally in your Preact application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - Preact](/guide/preact/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your Preact applications using the Icon component. - [Filled Icons - Preact](/guide/preact/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your Preact application, and the limitations of using fills with Lucide icons. - [Aliased Names - Preact](/guide/preact/advanced/aliased-names.md): Learn about the different import name styles available for Lucide icons in your project and how to choose the one that best fits your needs. - [Combining icons - Preact](/guide/preact/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your Preact application. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for React Native](/guide/react-native.md): Lucide provides a React Native icon component library that makes it easy to integrate icons into your React Native applications. Each icon is available as a standalone React Native component, allowing for seamless integration and customization. - [Getting started - React Native](/guide/react-native/getting-started.md): This guide will help you get started with Lucide in your React Native project. - [Migration from v0](/guide/react-native/migration.md) ### Basics - [Color - React Native](/guide/react-native/basics/color.md): Learn how to adjust the color of icons in your React Native application using the `color` prop or by using parent elements text color value. - [Sizing - React Native](/guide/react-native/basics/sizing.md): Learn how to adjust the size of icons in your React Native application using the `size` prop or by using CSS. - [Stroke width - React Native](/guide/react-native/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your React Native application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop. ### Advanced - [Typescript - React Native](/guide/react-native/advanced/typescript.md): Learn about the different types exported by the `lucide-react-native` package and how to use them in your React Native application. - [Global Styling - React Native](/guide/react-native/advanced/global-styling.md): Learn how to style all Lucide icons globally in your React Native application using CSS or the Lucide context provider. - [With Lucide Lab or custom icons - React Native](/guide/react-native/advanced/with-lucide-lab.md): Learn how to use Lucide Lab or custom icons in your React Native applications using the Icon component. - [Filled Icons - React Native](/guide/react-native/advanced/filled-icons.md): Learn how to use fills with Lucide icons in your React Native application, and the limitations of using fills with Lucide icons. - [Aliased Names - React Native](/guide/react-native/advanced/aliased-names.md): Learn about the different import name styles available for Lucide icons in your React Native project and how to choose the one that best fits your needs. - [Combining icons - React Native](/guide/react-native/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your React Native application. ### Resources - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Lucide for Angular](/guide/angular.md): A standalone, signal-based, zoneless implementation that makes it easy to integrate icons into your Angular projects. - [Getting started - Angular](/guide/angular/getting-started.md): This guide will help you get started with Lucide in your Angular project. - [Migrating from `lucide-angular` ⇒ `@lucide/angular`](/guide/angular/migration.md) ### Basics - [Color - Angular](/guide/angular/basics/color.md): Learn how to adjust the color of icons in your Angular application using the `color` input or by using parent elements text color value. - [Sizing - Angular](/guide/angular/basics/sizing.md): Learn how to adjust the size of icons in your Angular application using the `size` input or by using CSS. - [Stroke width - Angular](/guide/angular/basics/stroke-width.md): Learn how to adjust the stroke width of icons in your Angular application using the `strokeWidth` input or adjust the strokeWidth appearance using the `absoluteStrokeWidth` input. ### Advanced - [Typescript - Angular](/guide/angular/advanced/typescript.md): All exported types from the `@lucide/angular` package and how to use them in your Angular project. - [Accessibility - Angular](/guide/angular/advanced/accessibility.md): Best practices for accessible icons in your Angular application. - [Global Styling - Angular](/guide/angular/advanced/global-styling.md): Learn how to style all icons globally in your Angular application using CSS or the provideLucideConfig provider. - [Lucide Lab - Angular](/guide/angular/advanced/with-lucide-lab.md): Learn how to use icons from Lucide Lab in your Angular application. - [Filled Icons - Angular](/guide/angular/advanced/filled-icons.md): Fills are not officially supported, but can still be applied using standard SVG attributes. This may in some cases produce acceptable results. - [Combining icons - Angular](/guide/angular/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your Angular application. - [Icon provider - Angular](/guide/angular/advanced/icon-provider.md): Learn how to register icons globally using provideLucideIcons, including custom and legacy icons. ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. - [Overview](/guide/static.md) - [Getting started](/guide/static/getting-started.md) - [Migration from v0](/guide/static/migration.md) ### SVG Files & Sprite - [Link as Image](/guide/static/link-as-image.md): Learn how to use Lucide icons as images in your project. - [Using the SVG sprite](/guide/static/svg-sprite.md): Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options. ### Icon Font - [Icon Font](/guide/static/font.md): Using the web font version of Lucide icons in your project. Learn how to include the stylesheet and use the icons with CSS classes. - [Color the Lucide icon font](/guide/static/font/color.md): Learn how to customize the color of Lucide icons in your static projects using CSS. This guide covers how to change icon colors with CSS classes and inline styles for web font implementations. - [Size the Lucide icon font](/guide/static/font/sizing.md): Learn how to customize the color of Lucide icons in your static projects using CSS. This guide covers how to change icon colors with CSS classes and inline styles for web font implementations. ### SVG String JS modules - [Use Lucide in Node.js](/guide/static/js-modules/node.md) - [Use Lucide in Web](/guide/static/js-modules/web.md) ### Resources - [Accessibility](/guide/accessibility.md): Learn how to make your icons accessible to all users, including those with disabilities. - [Visual Studio Code](/guide/vscode.md): Learn how to use Lucide icons in Visual Studio Code, including tips on turning off autocomplete, viewing JS docs and icon previews, and exploring third-party plugins for enhanced functionality. ### About - [License](/license.md): Review the licensing terms for using Lucide icons and resources. - [Community Guide](/community.md) - [Contribution guide](/contribute.md): Guidelines and instructions for contributing to the Lucide project. ### Designing icons - [Icon Design Guide](/contribute/icon-design-guide.md): Guidelines and best practices for designing icons for the Lucide icon library. - [Illustrator Template Guide](/contribute/illustrator-guide.md) - [Icon Design Guide](/contribute/inkscape-guide.md) - [Figma Template Guide](/contribute/figma-guide.md) - [Affinity Designer Template Guide](/contribute/affinity-designer-guide.md) ### About - [License](/license.md): Review the licensing terms for using Lucide icons and resources. - [Community Guide](/community.md) - [Contribution guide](/contribute.md): Guidelines and instructions for contributing to the Lucide project. ### Designing icons - [Icon Design Guide](/contribute/icon-design-guide.md): Guidelines and best practices for designing icons for the Lucide icon library. - [Illustrator Template Guide](/contribute/illustrator-guide.md) - [Icon Design Guide](/contribute/inkscape-guide.md) - [Figma Template Guide](/contribute/figma-guide.md) - [Affinity Designer Template Guide](/contribute/affinity-designer-guide.md) ### About - [License](/license.md): Review the licensing terms for using Lucide icons and resources. - [Community Guide](/community.md) - [Contribution guide](/contribute.md): Guidelines and instructions for contributing to the Lucide project. ### Designing icons - [Icon Design Guide](/contribute/icon-design-guide.md): Guidelines and best practices for designing icons for the Lucide icon library. - [Illustrator Template Guide](/contribute/illustrator-guide.md) - [Icon Design Guide](/contribute/inkscape-guide.md) - [Figma Template Guide](/contribute/figma-guide.md) - [Affinity Designer Template Guide](/contribute/affinity-designer-guide.md) ### About - [License](/license.md): Review the licensing terms for using Lucide icons and resources. - [Community Guide](/community.md) - [Contribution guide](/contribute.md): Guidelines and instructions for contributing to the Lucide project. ### Designing icons - [Icon Design Guide](/contribute/icon-design-guide.md): Guidelines and best practices for designing icons for the Lucide icon library. - [Illustrator Template Guide](/contribute/illustrator-guide.md) - [Icon Design Guide](/contribute/inkscape-guide.md) - [Figma Template Guide](/contribute/figma-guide.md) - [Affinity Designer Template Guide](/contribute/affinity-designer-guide.md) ### About - [License](/license.md): Review the licensing terms for using Lucide icons and resources. - [Community Guide](/community.md) - [Contribution guide](/contribute.md): Guidelines and instructions for contributing to the Lucide project. ### Designing icons - [Icon Design Guide](/contribute/icon-design-guide.md): Guidelines and best practices for designing icons for the Lucide icon library. - [Illustrator Template Guide](/contribute/illustrator-guide.md) - [Icon Design Guide](/contribute/inkscape-guide.md) - [Figma Template Guide](/contribute/figma-guide.md) - [Affinity Designer Template Guide](/contribute/affinity-designer-guide.md) ### Other - [@lucide/icons](/guide/packages/icons.md) - [`@lucide/angular`](/guide/packages/angular.md) - [Combining icons - Solid](/guide/solid/advanced/combining-icons.md): Learn how to combine multiple icons into a single icon nested SVG elements in your Solid application. - [Comparison](/guide/comparison.md): A comparison between Lucide and Feather Icons, highlighting the differences and benefits of each. - [Installation](/guide/installation.md): A guide on how to install Lucide, an open-source icon library, for various platforms and frameworks. - [Lucide Angular](/guide/packages/lucide-angular.md) - [Lucide Astro](/guide/packages/lucide-astro.md) - [Lucide Preact](/guide/packages/lucide-preact.md) - [Lucide React Native](/guide/packages/lucide-react-native.md) - [Lucide Solid](/guide/packages/lucide-solid.md) - [Lucide Static](/guide/packages/lucide-static.md) - [Lucide Svelte](/guide/packages/lucide-svelte.md) - [Lucide Vue](/guide/packages/lucide-vue.md) - [Version 1 🚀](/guide/version-1.md): 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. - [What is Lucide?](/guide.md): An introduction to Lucide, an open-source icon library that provides 1600+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.