Langsung ke konten
ID

34 ikon · Berlisensi MIT

Ikon animasi navigasi dan panah

Menu hamburger yang berubah menjadi tombol tutup, serta panah, chevron, dan panah sudut yang bergeser sedikit ke arahnya saat di-hover. Ikon ini memperjelas ke mana sebuah kontrol membawa pengguna: membuka drawer, kembali, membentangkan baris, atau keluar dari situs.

Dari 34 ikon di kategori ini, 2 berputar terus-menerus, 4 beralih antara dua keadaan saat diklik, 6 diputar ulang setiap kali diklik, dan 22 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 navigasi

Tempat memakainya

  • Menu hamburger yang berubah menjadi tombol tutup di mobile
  • Tombol sebelumnya dan berikutnya di carousel dan paginasi
  • Chevron pada accordion dan dropdown
  • Petunjuk kembali ke atas dan gulir ke bawah
  • Tautan masuk dan keluar akun
  • Penanda tautan eksternal dan toggle sidebar

Berdasarkan interaksi

  • Ikon animasi loop · 2

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. More Horizontal, More Vertical.

  • Ikon animasi toggle saat diklik · 4

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Ikon animasi klik · 6

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Ikon animasi yang diputar saat hover · 22

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

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

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

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

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

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

<AnimatedMenu 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 navigasi dan panah apa saja yang tersedia?

34 ikon: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down, dan 22 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi navigasi dan panah ini di React?

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

Bisakah ikon animasi navigasi dan panah ini dipakai tanpa React?

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