13 ikon · MIT lisanslı

Animasyonlu iletişim ikonları

Telefonlar, sohbet balonları, gönder düğmeleri, sesli mesaj ve RSS. Arama ikonları bir arama geçmişinin ihtiyaç duyduğu gelen, giden, cevapsız ve yönlendirilmiş durumları karşılar; gönder ikonu da tıklandığında mesajı küçük bir hareketle uğurlar.

13 ikondan 1 tanesi tıklandığında iki durum arasında geçiş yapar, 3 tanesi her tıklamada baştan oynar ve 9 tanesi hover’da bir kez 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.

İletişim kategorisindeki tüm ikonlar

Nerede kullanılır

Sohbet ve yorum formlarındaki gönder düğmesi
Gelen, giden ve cevapsız aramaları gösteren arama geçmişi
İletişim ve destek düğmeleri
Sohbet widget’ı açma düğmeleri
Bahsetme (mention) ve e-posta adresi alanları

Etkileşime göre

Tıklayınca durum değiştiren animasyonlu ikonlar · 1
Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer. Phone Off.
Tıklamalı animasyonlu ikonlar · 3
Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Phone, Phone Call, Send.
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. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Tıklayınca tekrar) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: send yerine ikonun sayfasındaki adı yazın.

npm install react-useanimations

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

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

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

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

import { AnimatedSend } from '@/components/animations/send';

<AnimatedSend 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

İletişim kategorisinde hangi ikonlar var?

13 ikon: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send ve 1 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu iletişim ikonları React’te nasıl kullanılır?

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

Bu animasyonlu iletişim 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/send.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). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.