Langsung ke konten
ID

10 ikon · Berlisensi MIT

Ikon animasi lainnya

Ikon yang tidak masuk ke kelompok yang lebih besar: wajah emoji untuk umpan balik, cangkir kopi, jam, garis denyut, dan petunjuk gulir ke bawah. Ikon gulir ke bawah adalah petunjuk umum di bagian hero bahwa masih ada konten di bawahnya.

Dari 10 ikon di kategori ini, 4 berputar terus-menerus dan 6 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 lainnya

Tempat memakainya

  • Petunjuk gulir ke bawah di bagian bawah hero section
  • Wajah senang, netral, dan sedih di widget umpan balik
  • Indikator aktivitas dan uptime
  • Jam buka dan pemilih waktu
  • Tautan Buy Me a Coffee dan dukungan

Berdasarkan interaksi

  • Ikon animasi loop · 4

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Activity, Arrow down, Arrow up, Scroll down.

  • 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. Clock, Coffee, Frown, Meh, Smile, Tool.

Tambahkan ke aplikasi Anda

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json
import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown 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 lainnya apa saja yang tersedia?

10 ikon: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile, dan Tool. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi lainnya ini di React?

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

Bisakah ikon animasi lainnya ini dipakai tanpa React?

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