484f2c9cd3
* Update images * Adjust color * update accessebility * Add matrix hero * Add typescript documentation * Add basics section to vue pages * Add svelte docs * Fix dynamic sidebar * Add animation? * Some adjustments * Adjust animation * Updates docs * Add scaledown animation * Add docs for vue types * Fix layout accessibility page * fix framework select * adjust easing home animation * Write docs for Vue * Adjust animation home * Adjust home hero animation * Finish svelte docs * Add solid pages * remove spiral animation component * Add group icons * Added solid docs * update preact docs * Adjust examples preact docs * Add snackplayer * Get new editor * Save this * Add examples * Adjust styling * setup custom sandpack * Add script * Format files * Make sandpack plugin work * migrate react docs * Fix svelte and solid examples * Migrate to solid packages * Add darkmode package logos * Fix bug in selector * migrate vue examples * migrate advanced vue items * migrate preact and svelte examples * Add astro docs * adding more docs on guide for lucide library * Fix home animation * Cleanup * Added resources page, with more details and content * Add hero badge for Version 1 * Fix vercel json * Update missing paths * Fix build? * Replace lucide-vue-next * Fix build * Add some docs * update markdown * Setup angular docs * Add basic angular docs * Adjust code examples * Update title and descriptions * Update accessibility link * Update title and description * Add og image * Fix alignment * Add migration guides * Adjust version 1 markdown file * Add migration guide to the main list * Minor fixes * Update docs * Apply feedback * Select icons * Add pointer events none * Fix package links homepage * Format code * Fix types * Fix focus * Fix build * Fix focus * Apply feedback * Adjust imports * Adjust imports * Fix search * Apply feedback * Fix import in font docs * Small fixes * docs(guide): added easter egg icon. stay tuned, guys 😉 * Add llm txt plugin * Adjust logo top * docs(version-1): upgraded @lucide/angular guide for v1 website (#4144) * docs(guide/angular): rewrite some angular documentation * docs(guide/angular): extens angular guide with combining icons & icon provider guides * docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho * docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences * docs(guide/angular): context provider => provideLucideConfig * Update docs/guide/angular/migration.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Update docs/guide/angular/advanced/combining-icons.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(guide/angular): rework a11y for better flow & pacing * docs(guide/angular): salvage original phrase, it has better flow * docs(guide/angular): some more a11y nitpicking * docs(guide/angular): reduce llm fatigue * docs(guides/angular): fix app component selector * docs(guides/angular): fix angular sandpacks * Add sandpack angular to improve tree-shakable stack * Update docs/guide/angular/getting-started.md * docs(guides/angular): fix user import in combinding icons guide * docs(guides/angular): fix nested SVG phrasing * Update docs/guide/angular/advanced/with-lucide-lab.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/angular/advanced/filled-icons.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(guides/angular): fix createLucideIcon guide * docs(guides/angular): upgrade all relevant angular sandpack demos --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix(docs): add autogenerated OG images to gitignore * fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes * Fix build * Add next tag to all installation guides * Add top bar notification * Minor fixes * Update text * Add todos * Update og image * Adjust install command * Color top bar * fix(docs): ignore all OG images, expect general.png * fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment * Update docs/.vitepress/theme/components/base/LayoutTop.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/react/advanced/dynamic-icon-component.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update CONTRIBUTING.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/.vitepress/sidebar/resources.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix code example * fix(docs): version 1 => Version 1 * feat(docs): add angular to new features in v1 * Fix next line issue * feat(docs): fix typo (code example_s_) * Fix deadlink * feat(docs): fix some more typos and irky grammar * feat(docs): fix lowercase lucide in sidebar 😅 * Update docs/guide/version-1.md Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
3.2 KiB
title, description, nextPage
| title | description | nextPage | ||
|---|---|---|---|---|
| What is Lucide? | 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. |
|
What is Lucide?
Lucide is an open-source icon library that provides 1600+ 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.
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
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.
Official Packages
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), React, React Native, Vue, Vue 3, Svelte, Preact, Solid, Angular, Astro, and NodeJS.
Community
If you have any questions about Lucide, feel free to reach out to the community. You can find them on GitHub and Discord.