Langsung ke konten
ID
v3300 ikon · tanpa dependensi · MIT→

Ikon yang terasa hidup.

Ikon animasi gratis untuk React, shadcn/ui, dan Lottie

300 animasi mikro buatan tangan dengan interaksi mikro hover, klik, dan loop yang sudah terpasang. Pakai sebagai komponen React, tambahkan lewat shadcn, atau unduh SVG dan Lottie JSON-nya. Berlisensi MIT.

Jelajahi ikon

Gerakkan pointer Anda di atas bidang ikon.

ikon animasi
300
ikon animasi
interaksi bawaan
6
interaksi bawaan
player, setelah gzip
8 kB
player, setelah gzip
dependensi
0
dependensi

Interaksi bawaan

Setiap ikon tahu cara bergerak.

Setiap ikon hadir dengan interaksi yang dirancang untuknya. Pasang saja dan langsung berfungsi, atau pilih interaksi lain dengan satu prop. Coba sendiri:

Pustaka ikon

300 ikon animasi gratis

Hover atau klik untuk memutar. Buka sebuah ikon untuk melihat kode dan unduhannya: Lottie JSON, SVG, dan ZIP.

300 ikon

Peringatan

Notifikasi

Navigasi

Aksi

Konten

Formulir

Media

Pengeditan teks

Komunikasi

Perangkat

Cuaca

Peta & lokasi

E-commerce

Grafik

Pengembangan

Desain & tata letak

Bentuk & matematika

Loading

Media sosial

Lainnya

Pakai sesuai kebutuhan

Instal, import, selesai.

Komponen React tanpa dependensi, registry shadcn, file yang bisa diunduh dengan URL tetap, dan katalog yang bisa dibaca agen AI.

Baca dokumentasi →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Kecil, aksesibel, dan bebas Anda atur tampilannya.

Mengikuti warna Anda

Ikon memakai currentColor: warna teks, keadaan hover, dan dark mode langsung terbawa dengan sendirinya. Timpa dengan prop, class, atau CSS biasa.

Kecil sejak awal

8 kB

Player bawaan, tanpa dependensi. Setiap ikon adalah modul tersendiri berukuran 2 kB.

Aksesibel secara default

Menghormati preferensi reduced motion, memutar animasi hover saat mendapat fokus keyboard, dan tidak dibacakan pembaca layar kecuali Anda memberinya label.

Siap untuk server rendering

Client component yang aman di-render di Next.js, Remix, dan Astro. Ikon hanyalah data biasa yang bisa Anda import di mana saja.

Dibuat untuk agen AI

Katalog bertipe dengan kata kunci untuk setiap ikon, icons.json, llms.txt, dan dokumentasi Markdown.

Temukan animasi mikro yang tepat.

Pertanyaan

Apa itu animasi mikro dan ikon animasi?

Animasi mikro adalah gerakan singkat dengan satu tujuan yang merespons aksi pengguna: ikon menu yang berubah menjadi tombol tutup, hati yang terisi saat Anda menyukai postingan, lonceng yang berdering saat ada notifikasi baru. Ikon animasi adalah jenis yang paling umum. Animasi ini membuat antarmuka terasa responsif dan menunjukkan perubahan keadaan tanpa perlu teks tambahan.

Apa bedanya file Lottie dan SVG?

File Lottie JSON berisi seluruh animasi dan bisa diputar di Lottie player mana pun, termasuk player bawaan react-useanimations. File SVG adalah gambar diam ikon dalam posisi istirahat, satu per keadaan (misalnya eye dan eye-off), untuk tempat yang tidak boleh ada gerakan: email, dokumen, aplikasi desain, atau fallback tanpa JavaScript.

Apakah bisa dipakai dengan Next.js dan server rendering?

Bisa. Komponennya ditandai 'use client' dan hanya menggambar animasi di browser, sehingga bisa di-render dari server component dan framework SSR seperti Next.js, Remix, dan Astro tanpa dynamic import. Modul ikon hanyalah data biasa yang bisa di-import oleh server component dan diteruskan sebagai props. Next.js dan server rendering →

Bolehkah ikon ini dipakai di proyek komersial?

Boleh. Ikon dan paket react-useanimations berlisensi MIT: Anda bebas memakai, mengubah, dan mendistribusikannya ulang untuk proyek pribadi maupun komersial. Atribusi kami hargai, tetapi tidak wajib. Lisensi & Ketentuan →

Bisakah ikon ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON standar, jadi bisa diputar dengan lottie-web di JavaScript biasa, Vue, Svelte, Angular, atau CMS, serta di Lottie player untuk iOS, Android, dan Flutter. Halaman Ikon Lottie berisi URL file dan snippet lottie-web siap pakai untuk setiap interaksi. Ikon Lottie →

Seberapa besar ikon ini menambah ukuran bundle saya?

Player di react-useanimations 3.1.1 berukuran sekitar 8 kB setelah gzip tanpa dependensi, dan setiap ikon adalah modul tersendiri berukuran 1 sampai 15 kB (median 2 kB), sehingga bundle hanya berisi ikon yang Anda import.

Beri antarmuka Anda sentuhan gerak.

Gratis dan berlisensi MIT, untuk proyek pribadi maupun komersial.

Mulai sekarang