12 ikon · MIT lisanslı

Animasyonlu cihaz ikonları

Telefonlar, tabletler, monitörler, saatler ve yazıcılar; bunların yanında wifi, Bluetooth ve pil gibi bağlantı göstergeleri. Cihaz seçicilerde, responsive önizleme geçişlerinde ve bağlantı durumunda işe yarar.

12 ikondan 1 tanesi tıklandığında iki durum arasında geçiş yapar, 1 tanesi her tıklamada baştan oynar ve 10 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.

Cihazlar kategorisindeki tüm ikonlar

Nerede kullanılır

Mobil, tablet ve masaüstü için responsive önizleme geçişleri
Wifi ve Bluetooth bağlantı durumu
Pil ve şarj göstergeleri
Hesap güvenliği ayarlarındaki cihaz listeleri
Faturalarda ve raporlarda yazdır düğmeleri

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. Wifi Off.
Tıklamalı animasyonlu ikonlar · 1
Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Printer.
Hover’da oynayan animasyonlu ikonlar · 10
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. Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi.

Uygulamanıza ekleyin

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

npm install react-useanimations

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

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

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

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

import { AnimatedWifi } from '@/components/animations/wifi';

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

Cihazlar kategorisinde hangi ikonlar var?

12 ikon: Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Printer, Smartphone, Tablet, Watch, WiFi ve Wifi Off. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

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

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

Bu animasyonlu cihaz 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/wifi.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.