Langsung ke konten
ID

4 ikon · Berlisensi MIT

Ikon animasi lonceng notifikasi

Ikon lonceng yang berdering saat ada aktivitas baru atau beralih antara bell dan bell-off. Ayunan singkat pada lonceng menarik mata ke jumlah notifikasi yang belum dibaca, dan versi toggle-nya sekaligus bisa menjadi tombol bisukan untuk channel atau thread.

Dari 4 ikon di kategori ini, 2 berputar terus-menerus dan 2 beralih antara dua keadaan saat diklik. 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 notifikasi

Tempat memakainya

  • Tombol pusat notifikasi di header aplikasi
  • Badge belum dibaca yang berdering saat pesan baru masuk
  • Sakelar bisukan dan aktifkan suara untuk channel atau thread
  • Pengaturan notifikasi email dan push
  • Tombol berlangganan pengingat dan peringatan

Berdasarkan interaksi

  • Ikon animasi loop · 2

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Notification V3, Notification V4.

  • Ikon animasi toggle saat diklik · 2

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Notification, Notification V2.

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 notification dengan nama yang tertera di halaman ikonnya.

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

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

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

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

<AnimatedNotification 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 lonceng notifikasi apa saja yang tersedia?

4 ikon: Notification, Notification V2, Notification V3, dan Notification V4. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi lonceng notifikasi ini di React?

Instal react-useanimations, tambahkan import notification from 'react-useanimations/lib/notification', lalu render <UseAnimations animation={notification} 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/notification.json sebagai gantinya.

Bisakah ikon animasi lonceng notifikasi ini dipakai tanpa React?

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