Skip to main content

Animated Icons for React

Free animated icons for React and Next.js: 912 open-source Lucide shapes with spring motion, hover and press states.

What are ExodeUI animated icons?

Each icon is a vector shape with its motion stored alongside it. The shapes come from the open-source Lucide icon set, and ExodeUI adds spring motion plus hover and press states. Icons are packaged as small .bexode files for your components and as editable .exode files for the ExodeUI editor.

Download heart.bexode (< 8 KB)npx exode add icon heart

How to install an animated icon

Pick an icon from the gallery, copy its command and run it in your project. The icon lands as a .bexode file plus an editable .exode file. Open the .exode file in ExodeUI to adjust states, timing or colour, and use the packaged file in React, Next.js or any of the other supported runtimes.

Frequently asked questions

Are these animated icons free?
Yes. ExodeUI has a free Community plan, and every icon on this page can be previewed and installed without paying. The shapes start from the open-source Lucide icon set.
Do the icons work with React and Next.js?
Yes. Each icon installs with the ExodeUI CLI and ships as a .bexode file you can use in React and Next.js components. The same file also works with the other ExodeUI runtimes.
How many animated icons are there?
There are 912 animated icons in the library, covering interface, media, social and commerce symbols. New icons are added over time.
What is a .bexode file?
.bexode is ExodeUI's packaged animation file. It contains the vector shape, its states and its motion, so the icon keeps the same timing when you open it in ExodeUI or ship it with a runtime.