Files
lucide/docs/guide/index.md

37 lines
3.0 KiB
Markdown
Raw Normal View History

New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
---
title: What is Lucide?
nextPage:
- comparison
- installation
---
# What is Lucide?
Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](/packages).
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
## Available Icons
Lucide contains icons with different variants and states, allowing users to choose the most suitable icon for their needs. And if a desired icon isn't available yet, users can open a design request, and the Lucide community contributors will help provide new icons. With more icons to choose from, users have more options to work with in their projects.
### Complete Set of Icons
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
As new applications with specific features arise, Lucide aims to provide a complete set of icons for every project. The community follows a set of design rules when designing new icons. These rules maintain standards for the icons, such as recognizability, consistency in style, and readability at all sizes. While creativity is valued in new icons, recognizable design conventions are important to ensure that the icons are easily identifiable by users.
## Code Optimization
In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.
## Accessibility
Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.
However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./advanced/accessibility.md).
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
## Official Packages
2025-04-08 05:41:10 -04:00
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
## Community
feat(@lucide/astro): add lucide package for Astro (#2665) * feat(lucide-astro): initial commit * test: add test suite * fix module resolution issue * chore: update lock file * chore: update lock file * chore: fix precommit hook failing * sync icons generated by precommit hook * remove useless tab in template * style: add space for readability * docs: add bun installation instructions * fix `clean` script * fix testing setup * remove unnecessary `key` props in Astro icons * fix jest matchers types and undefined behavior * chore: update lock file * setup prettier for formatting Astro files * remove mistakenly added prop from the `Icon` component * docs: add documentation for new Astro package * fix incorrect types in `Icon` component * refactor: use `stroke-width` over `strokeWidth` * fix unexpected module resolution behavior * remove hack in test types * remove review marker * docs: progress on documentation of lucide-astro * chore: remove unnecessary .gitignore * docs: add sidebar entry * edit package description * fix uneven icon heights in homepage packages list * docs: add package to readme table * add workflows for lucide-astro package * docs: add package-logos * use the appropriate Astro logo in light and dark mode * Remove inadvertently added class * Update snapshots to reflect removed class `lucide-icon` * remove dependency on internal `@lucide/shared` package * fix: revert changes * revert grid-2x2-x.json * revert grid-2x2-check.json * revert picture-in-picture svg * add package in labeler workflow * add previously uncommited utils.ts file * fix dom type errors * up one major from legacy package * add package to issue and feature request templates * docs: add acknowledgement of Aviortheking as original creator of the package * format * optimization: more lightweight component footprint * refactor: simplify removal of `data-astro-source` debugging attributes * format * style: fix linting error once again 😠 * wip: rename package to `@lucide/astro` * remove acknowledgment of `lucide-astro` * fix error caused by change in build tooling * chore: upgrade dependencies * chore: rename lucide-astro folder * further renaming * use correct package name in key * more renaming * chore: update lock file * apply review suggestions (#1) set correct path for package in actions * apply suggestions from code review (#2) Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * apply @dotspencer's review resolve correct link to package docs page and github source * Format files --------- Co-authored-by: realguse <realguse@icloud.com> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2025-03-31 14:20:33 +00:00
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).