22 icon · Giấy phép MIT

Icon tệp, thư mục và người dùng động

Tệp, thư mục, sách, thư, tệp đính kèm và người dùng. Chúng gắn nhãn cho những thứ người dùng làm việc cùng, còn các biến thể thêm, bớt và đánh dấu giúp việc quản lý danh sách và thành viên nhóm có phản hồi rõ ràng hơn.

Trong 22 icon, 5 icon phát lại sau mỗi lần click, 7 icon phát khi hover và chạy ngược khi rời chuột và 10 icon phát một lần khi hover. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon nội dung

Dùng ở đâu

Trình quản lý tệp và danh sách tài liệu
Nút đính kèm và sao chép vào clipboard
Hộp thư đến và mục lưu trữ trong ứng dụng email
Danh sách thành viên nhóm với thao tác thêm và xóa người dùng
Menu chia sẻ tài liệu và liên kết

Theo tương tác

Icon động khi click · 5
Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Icon động khi hover · 7
Phát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave). Archive, Copy, Mail, Share, User minus, User plus, User X.
Icon động phát khi hover · 10
Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Hover” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay copy bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon tệp, thư mục và người dùng động gồm những icon nào?

22 icon: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image và 10 icon khác. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon tệp, thư mục và người dùng động này trong React như thế nào?

Cài react-useanimations, thêm import copy from 'react-useanimations/lib/copy' rồi render <UseAnimations animation={copy} size={32} />. Icon sẽ chạy tương tác “Hover” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/copy.json.

Có dùng được các icon tệp, thư mục và người dùng động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/copy.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.