Langsung ke konten
ID

13 ikon · Berlisensi MIT

Ikon animasi komunikasi

Telepon, balon chat, tombol kirim, pesan suara, dan RSS. Ikon telepon mencakup keadaan panggilan masuk, keluar, tak terjawab, dan diteruskan yang dibutuhkan riwayat panggilan, sementara ikon kirim memberi sedikit gerakan pelepasan saat pesan dikirim.

Dari 13 ikon di kategori ini, 1 beralih antara dua keadaan saat diklik, 3 diputar ulang setiap kali diklik, dan 9 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 komunikasi

Tempat memakainya

  • Tombol kirim di formulir chat dan komentar
  • Riwayat panggilan masuk, keluar, dan tak terjawab
  • Tombol kontak dan dukungan
  • Peluncur widget chat
  • Field mention dan alamat email

Berdasarkan interaksi

  • Ikon animasi toggle saat diklik · 1

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Phone Off.

  • Ikon animasi klik · 3

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. Phone, Phone Call, Send.

  • Ikon animasi yang diputar saat hover · 9

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Tambahkan ke aplikasi Anda

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

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

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

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

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

<AnimatedSend 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 komunikasi apa saja yang tersedia?

13 ikon: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send, dan 1 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi komunikasi ini di React?

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

Bisakah ikon animasi komunikasi ini dipakai tanpa React?

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