6e25d21b2f feat(site): Add Hover And Focus Animations Across The Docs Site (#5085)
* feat(docs): Add Hover And Focus Animations Across The Docs Site

- Nav bar and footer links: hover underline that draws in from the side the
  mouse enters and leaves (utils/underlineDirection.ts)
- Logo spins half a turn on hover; nav dropdown chevron turns and the menu
  slides in; social icons get a soft background and lift
- Sidebar, "On this page" outline, "Edit this page" and previous/next links
  get soft pill hovers; previous/next use Lucide arrow icons
- Footer is now shown on pages with a sidebar, offset by the sidebar width
- Form controls (switch, checkbox, select, range slider, color picker, fake
  input, reset button) get brand hover/focus states and smoother motion
- Cards (overview, package, showcase, team member, category list) lift with
  a brand border on hover
- Page and sidebar scrollbars styled in the site colours, with a Firefox fallback

* Revert changes

* Apply changes

* Added the global transition off

* fix(docs): remove !important markers from transition durations, very bad a11y

* fix(docs): remove !important markers from transition durations, very bad a11y

* Fixes last things

* Added one thing

---------

Co-authored-by: Eric <eric.fennis@gmail.com>
Co-authored-by: Karsa <contact@karsa.org>
2026-10-30 15:07:29 +01:00
2026-10-19 10:54:56 +02:00
2026-03-20 16:30:53 +01:00

Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons. Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

license figma installs build status discord chat

Icons · Guide · Packages · License · Showcase

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 to make it easier to use these icons in your project.

Packages

Logo Package Version Downloads Links
JS logo lucide npm NPM Downloads Docs · Source
React logo lucide-react npm NPM Downloads Docs · Source
Vue logo @lucide/vue npm NPM Downloads Docs · Source
Svelte logo @lucide/svelte npm NPM Downloads Docs · Source
Solid logo lucide-solid npm NPM Downloads Docs · Source
Preact logo lucide-preact npm NPM Downloads Docs · Source
React Native logo lucide-react-native npm NPM Downloads Docs · Source
Angular logo @lucide/angular npm NPM Downloads Docs · Source
Astro logo @lucide/astro npm NPM Downloads Docs · Source
SVG logo lucide-static npm NPM Downloads Docs · Source

Figma

The Lucide Figma plugin.

Visit Figma community page to install the plugin.

Figma Lucide Cover

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

About brand logos

Lucide does not accept brand logos, and we do not plan to add them in the future. This is due to a combination of legal restrictions, design consistency concerns, and practical maintenance reasons.

Click here to read our official statement about brand logos in Lucide.

Community

Join the community on our Discord server!

License

Lucide is totally free for commercial use and personal use, this software is licensed under the ISC License.

Credits

Thank you to all the people who contributed to Lucide!

Sponsors

Powered by Vercel

DigitalOcean Referral Badge

Hero Backer 🦸

Sourcegraph – Understand, fix, and automate across your codebase with Sourcegraph's code intelligence platform Zephyr Cloud

Awesome backers 🍺

Pax Historia pdfme – Free and Open source PDF generation library!

Backer ☕️

Fina Money – Build the most flexible finance tracker Ruud

Other contributors 💸

You can find all our past and non-recurring financial contributors at our Open Collective page.

Languages
TypeScript 88.6%
JavaScript 9.5%
Svelte 0.8%
Vue 0.5%
HTML 0.4%
Other 0.2%