Langsung ke konten
ID

5 ikon · Berlisensi MIT

Ikon animasi peringatan

Segitiga peringatan, lingkaran alert, dan rambu stop yang berdenyut cukup untuk menarik perhatian tanpa berkedip-kedip. Taruh di samping field formulir yang gagal divalidasi, di awal banner error, atau di kolom status, tempat ikon diam mudah terlewat saat menggulir.

Dari 5 ikon di kategori ini, 4 berputar terus-menerus dan 1 diputar ulang setiap kali 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 peringatan

Tempat memakainya

  • Pesan error validasi di bawah field formulir
  • Banner error dan peringatan di bagian atas halaman
  • Baris yang gagal di tabel status deploy atau job
  • Dialog konfirmasi untuk aksi yang menghapus data
  • Halaman status sistem saat terjadi insiden

Berdasarkan interaksi

  • Ikon animasi loop · 4

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Alert circle, Alert octagon, Alert triangle, Error.

  • Ikon animasi klik · 1

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. X Octagon.

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle 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 peringatan apa saja yang tersedia?

5 ikon: Alert circle, Alert octagon, Alert triangle, Error, dan X Octagon. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi peringatan ini di React?

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

Bisakah ikon animasi peringatan ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/alert-triangle.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). Error memakai expression After Effects, jadi di web ikon tersebut memerlukan build lengkap lottie-web.