Langsung ke konten
ID

64 ikon · Berlisensi MIT

Ikon animasi aksi

Kata kerja sebuah antarmuka: simpan, hapus, unduh, muat ulang, suka, bookmark, cari, dan pengaturan. Setiap ikon mengonfirmasi klik atau hover yang menjadi pemicunya, jadi hati terisi saat Anda menyukai postingan dan tutup tempat sampah terangkat sebelum Anda menghapus.

Dari 64 ikon di kategori ini, 2 berputar terus-menerus, 14 beralih antara dua keadaan saat diklik, 30 diputar ulang setiap kali diklik, 11 diputar saat di-hover dan berbalik saat kursor keluar, 6 diputar sekali saat di-hover, dan 1 berputar berulang selama di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON; 61 di antaranya juga tersedia sebagai SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon aksi

Tempat memakainya

  • Tombol suka, favorit, dan bookmark di kartu
  • Tombol unduh, unggah, dan simpan yang mengonfirmasi aksinya
  • Toggle tampilkan dan sembunyikan kata sandi di formulir login
  • Tombol muat ulang dan sinkronisasi di dashboard
  • Tombol hapus di tabel dan daftar file
  • Field pencarian yang berubah menjadi tombol hapus teks

Berdasarkan interaksi

  • Ikon animasi loop · 2

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Checkmark, Help.

  • Ikon animasi toggle saat diklik · 14

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Ikon animasi klik · 30

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Ikon animasi hover · 11

    Diputar maju saat mouseenter dan mundur saat mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Ikon animasi yang diputar saat hover · 6

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Ikon animasi loop saat hover · 1

    Berputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih. Flag.

Tambahkan ke aplikasi Anda

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

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

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

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

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

<AnimatedHeart 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 aksi apa saja yang tersedia?

64 ikon: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, dan 52 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi aksi ini di React?

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

Bisakah ikon animasi aksi ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/heart.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.