22 ikon · MIT lisanslı

Animasyonlu sosyal medya ikonları

Sosyal ağların ve geliştiricilerle tasarımcıların işlerini paylaştığı araçların marka ikonları: X, Instagram, YouTube, Discord, Telegram, Figma ve daha fazlası. Hover’da canlanırlar; bu da footer ve profil bağlantılarının tıklanabilir olduğunu hissettirir.

22 ikondan 3 tanesi hover’da ileri, imleç ayrılınca geri oynar, 9 tanesi hover’da bir kez oynar ve 10 tanesi hover süresince döngüde oynar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Sosyal medya kategorisindeki tüm ikonlar

Nerede kullanılır

Site footer’ındaki sosyal medya bağlantıları
Blog yazılarında paylaş düğmeleri
Yazar ve ekip profili bağlantıları
Sohbet sunucuları için topluluk davet düğmeleri
Sosyal medya ya da geliştirici hesabıyla giriş

Etkileşime göre

Hover efektli animasyonlu ikonlar · 3
mouseenter’da ileri, mouseleave’de geri oynar. Instagram, YouTube, YouTube V2.
Hover’da oynayan animasyonlu ikonlar · 9
Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Hover’da döngüye giren animasyonlu ikonlar · 10
Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Hover’da döngü) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: github yerine ikonun sayfasındaki adı yazın.

npm install react-useanimations

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

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

<AnimatedGithub size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Sosyal medya kategorisinde hangi ikonlar var?

22 ikon: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram ve 10 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu sosyal medya ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import github from 'react-useanimations/lib/github' satırını ekleyin ve <UseAnimations animation={github} size={32} /> ile render edin. İkon kendi etkileşimini (Hover’da döngü) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/github.json komutunu çalıştırın.

Bu animasyonlu sosyal medya ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/github.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Twitter After Effects ifadeleri (expressions) kullandığı için web’de lottie-web’in tam sürümü (full build) gerekir.