İçeriğe geç
TR

64 ikon · MIT lisanslı

Animasyonlu eylem ikonları

Arayüzün fiilleri: kaydet, sil, indir, yenile, beğen, yer imine ekle, ara ve ayarlar. Her biri ait olduğu tıklamayı ya da hover’ı onaylar; bir gönderiyi beğendiğinizde kalp dolar, silmeden önce çöp kutusunun kapağı kalkar.

64 ikondan 2 tanesi kesintisiz döngüde oynar, 14 tanesi tıklandığında iki durum arasında geçiş yapar, 30 tanesi her tıklamada baştan oynar, 11 tanesi hover’da ileri, imleç ayrılınca geri oynar, 6 tanesi hover’da bir kez oynar ve 1 tanesi hover süresince döngüde oynar. Her biri React bileşeni, shadcn/ui bileşeni ve Lottie JSON animasyonu olarak sunulur; 61 tanesi statik SVG olarak da mevcuttur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Eylemler kategorisindeki tüm ikonlar

Nerede kullanılır

  • Kartlardaki beğen, favori ve yer imi düğmeleri
  • İşlemi onaylayan indir, yükle ve kaydet düğmeleri
  • Giriş formunda şifreyi göster ve gizle düğmesi
  • Dashboard’lardaki yenile ve senkronize et düğmeleri
  • Tablolarda ve dosya listelerinde sil düğmeleri
  • Temizle düğmesine dönüşen arama alanı

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 2

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Checkmark, Help.

  • Tıklayınca durum değiştiren animasyonlu ikonlar · 14

    Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Tıklamalı animasyonlu ikonlar · 30

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Hover efektli animasyonlu ikonlar · 11

    mouseenter’da ileri, mouseleave’de geri oynar. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Hover’da oynayan animasyonlu ikonlar · 6

    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. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Hover’da döngüye giren animasyonlu ikonlar · 1

    Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır. Flag.

Uygulamanıza ekleyin

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

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

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

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

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

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

Eylemler kategorisinde hangi ikonlar var?

64 ikon: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 ve 52 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

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

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

Bu animasyonlu eylem 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/heart.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.