Langsung ke konten
ID

22 ikon · Berlisensi MIT

Ikon animasi file, folder, dan pengguna

File, folder, buku, surat, lampiran, dan orang. Ikon ini menandai hal-hal yang dikerjakan pengguna, dan varian tambah, hapus, serta centang membuat pengelolaan daftar dan tim terasa responsif.

Dari 22 ikon di kategori ini, 5 diputar ulang setiap kali diklik, 7 diputar saat di-hover dan berbalik saat kursor keluar, dan 10 diputar sekali saat di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon konten

Tempat memakainya

  • Pengelola file dan daftar dokumen
  • Tombol lampiran dan salin ke clipboard
  • Tampilan kotak masuk dan arsip di aplikasi email
  • Daftar anggota tim dengan aksi tambah dan hapus pengguna
  • Menu berbagi untuk dokumen dan tautan

Berdasarkan interaksi

  • Ikon animasi klik · 5

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. File Minus, File Plus, Folder Minus, Folder Plus, User Check.

  • Ikon animasi hover · 7

    Diputar maju saat mouseenter dan mundur saat mouseleave. Archive, Copy, Mail, Share, User minus, User plus, User X.

  • Ikon animasi yang diputar saat hover · 10

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi hover bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti copy dengan nama yang tertera di halaman ikonnya.

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

npx shadcn@latest add https://useanimations.com/r/copy.json
import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi file, folder, dan pengguna apa saja yang tersedia?

22 ikon: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image, dan 10 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi file, folder, dan pengguna ini di React?

Instal react-useanimations, tambahkan import copy from 'react-useanimations/lib/copy', lalu render <UseAnimations animation={copy} size={32} />. Ikon menjalankan interaksi hover bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/copy.json sebagai gantinya.

Bisakah ikon animasi file, folder, dan pengguna ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/copy.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.