22 ikon · Berlisensi MIT

Ikon animasi media sosial

Ikon merek untuk jejaring sosial dan platform tempat developer dan desainer berbagi karya: X, Instagram, YouTube, Discord, Telegram, Figma, dan lainnya. Ikon ini beranimasi saat di-hover, sehingga tautan di footer dan profil terasa bisa diklik.

Dari 22 ikon di kategori ini, 3 diputar saat di-hover dan berbalik saat kursor keluar, 9 diputar sekali saat di-hover, dan 10 berputar berulang selama 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 media sosial

Tempat memakainya

Tautan media sosial di footer situs
Tombol berbagi di postingan blog
Tautan profil penulis dan tim
Tombol undangan komunitas untuk server chat
Masuk dengan akun media sosial atau akun developer

Berdasarkan interaksi

Ikon animasi hover · 3
Diputar maju saat mouseenter dan mundur saat mouseleave. Instagram, YouTube, YouTube V2.
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. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Ikon animasi loop saat hover · 10
Berputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Tambahkan ke aplikasi Anda

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';

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

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

npx shadcn@latest add https://useanimations.com/r/github.json

import { AnimatedGithub } from '@/components/animations/github';

<AnimatedGithub 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 media sosial apa saja yang tersedia?

22 ikon: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram, dan 10 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi media sosial ini di React?

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

Bisakah ikon animasi media sosial ini dipakai tanpa React?

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