Folder Animated Icon for React

Download the Folder icon

The Folder icon is one file in the ExodeUI icon library. It starts from the open-source Lucide folder shape and adds spring motion plus hover and press states. You get the packaged .bexode file for your components and the editable .exode file for ExodeUI, so you can change the timing, size or colour without redrawing the vector.

Using the Folder icon in React and Next.js

Run the command above in a React or Next.js project to add the Folder icon. Open the file in ExodeUI when you need to change its states or motion; the packaged version keeps the same behaviour when you ship it. The same .exode file also works with the Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter runtimes.

Related animated icons

• Heart icon
• House icon
• Search icon
• Settings icon
• User icon
• Bell icon
• Star icon
• Check icon

Frequently asked questions

Is the Folder animated icon free?

Yes. You can preview the Folder icon and copy its install command without paying. The icon starts from the open-source Lucide set, which is released under the ISC licence, and ExodeUI also has a free Community plan.

How do I use the Folder icon in React or Next.js?

Run npx exode add icon folder in your project, then open the downloaded .exode file in ExodeUI to inspect or edit its states. The icon ships as a small .bexode file so it can be embedded in a React component.

Does the Folder icon work outside React?

The same .exode file works with the other ExodeUI runtimes, including Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.

Can I animate my own SVG instead?

Yes. The free SVG animator lets you paste an SVG, choose spring motion and a trigger, and export a .bexode file or React component. You can also edit the result in ExodeUI.

More from ExodeUI