Folder

Plays forward on mouseenter and backward on mouseleave. Free under the MIT license.

actionfolder

React

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import folder from 'react-useanimations/lib/folder';

<UseAnimations animation={folder} size={32} />

npx shadcn@latest add https://useanimations.com/r/folder.json

import { AnimatedFolder } from '@/components/animations/folder';

<AnimatedFolder size={24} />

https://useanimations.com/icons/folder.json  # Lottie JSON
https://useanimations.com/icons/folder.zip   # Lottie JSON + static SVGs

The animation as Lottie JSON and a ZIP with it and the SVGs. See Files & icons.json.

folder.svg