# Animated file, folder and user icons
> 22 free animated file, folder and user icons, including Archive, Book and Book Open. For React, shadcn/ui and Lottie JSON, MIT licensed.
Files, folders, books, mail, attachments and people. They label the things a user works with, and the add, remove and check variants make list and team management feel responsive.
Of the 22 icons, 5 replay on every click, 7 play on hover and reverse on mouse leave and 10 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.
## Icons
- [Archive](https://useanimations.com/icons/archive) (`archive`, hover)
- [Book](https://useanimations.com/icons/book) (`book`, hover-replay)
- [Book Open](https://useanimations.com/icons/book-open) (`bookOpen`, hover-replay)
- [Clipboard](https://useanimations.com/icons/clipboard) (`clipboard`, hover-replay)
- [Copy](https://useanimations.com/icons/copy) (`copy`, hover)
- [File](https://useanimations.com/icons/file) (`file`, hover-replay)
- [File Minus](https://useanimations.com/icons/file-minus) (`fileMinus`, click-replay)
- [File Plus](https://useanimations.com/icons/file-plus) (`filePlus`, click-replay)
- [File Text](https://useanimations.com/icons/file-text) (`fileText`, hover-replay)
- [Folder Minus](https://useanimations.com/icons/folder-minus) (`folderMinus`, click-replay)
- [Folder Plus](https://useanimations.com/icons/folder-plus) (`folderPlus`, click-replay)
- [Image](https://useanimations.com/icons/image) (`image`, hover-replay)
- [Inbox](https://useanimations.com/icons/inbox) (`inbox`, hover-replay)
- [Mail](https://useanimations.com/icons/mail) (`mail`, hover)
- [Paperclip](https://useanimations.com/icons/paperclip) (`paperclip`, hover-replay)
- [Share](https://useanimations.com/icons/share) (`share`, hover)
- [User](https://useanimations.com/icons/user) (`user`, hover-replay)
- [User Check](https://useanimations.com/icons/user-check) (`userCheck`, click-replay)
- [User minus](https://useanimations.com/icons/user-minus) (`userMinus`, hover)
- [User plus](https://useanimations.com/icons/user-plus) (`userPlus`, hover)
- [User X](https://useanimations.com/icons/user-x) (`userX`, hover)
- [Users](https://useanimations.com/icons/users) (`users`, hover-replay)
## Where to use them
- File managers and document lists
- Attachment and copy-to-clipboard buttons
- Inbox and archive views in mail clients
- Team member lists with add and remove user actions
- Share menus for documents and links
## By interaction
- [Click animated icons](https://useanimations.com/interactions/click-replay) (5): Replays once from the start on every click unless reduced motion is preferred.
- [Hover animated icons](https://useanimations.com/interactions/hover) (7): Plays forward on mouseenter and backward on mouseleave.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (10): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.
## Code
```jsx
import UseAnimations from 'react-useanimations';
import copy from 'react-useanimations/lib/copy';
```
```bash
npx shadcn@latest add https://useanimations.com/r/copy.json
```
Every icon is also a Lottie JSON file at `https://useanimations.com/icons/.json`: [Lottie icons](https://useanimations.com/lottie-icons).
## FAQ
### Which animated file, folder and user icons are included?
22 icons: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image and 10 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.
### How do I use these animated file, folder and user icons in React?
Install react-useanimations, add import copy from 'react-useanimations/lib/copy' and render . The icon plays its hover interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/copy.json instead.
### Can I use these animated file, folder and user icons without React?
Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/.json (for example https://useanimations.com/icons/copy.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.
## More categories
- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)
HTML version: https://useanimations.com/categories/content