İçeriğe geç
TR
v3300 ikon · sıfır bağımlılık · MIT→

İkonlarınız canlansın.

React, shadcn/ui ve Lottie için ücretsiz animasyonlu ikonlar

Hover, tıklama ve döngü mikro etkileşimleri hazır gelen, elle tasarlanmış 300 mikro animasyon. React bileşeni olarak kullanın, shadcn ile ekleyin ya da SVG ve Lottie JSON olarak indirin. MIT lisanslı.

İkonlara göz at

İmleci alanın üzerinde gezdirin.

animasyonlu ikon
300
animasyonlu ikon
hazır etkileşim
6
hazır etkileşim
oynatıcı, gzip ile
8 kB
oynatıcı, gzip ile
bağımlılık
0
bağımlılık

Hazır etkileşimler

Her ikon nasıl hareket edeceğini bilir.

Her ikon kendisi için tasarlanan etkileşimle gelir. Sayfaya koyun, çalışsın; ya da tek bir prop ile başka bir etkileşim seçin. Deneyin:

Kütüphane

300 ücretsiz animasyonlu ikon

Oynatmak için üzerine gelin ya da tıklayın. Kodu ve indirmeler (Lottie JSON, SVG ve ZIP) için bir ikonu açın.

300 ikon

Uyarılar

Bildirimler

Navigasyon

Eylemler

İçerik

Form

Medya

Metin düzenleme

İletişim

Cihazlar

Hava durumu

Harita ve konum

E-ticaret

Grafikler

Geliştirme

Tasarım ve yerleşim

Şekiller ve matematik

Yükleme

Sosyal medya

Diğer

İstediğiniz gibi kullanın

Kur, import et, bitti.

Bağımlılığı olmayan bir React bileşeni, bir shadcn registry, kalıcı URL’lerden indirilebilen dosyalar ve yapay zekâ ajanlarının okuyabildiği bir katalog.

Dokümantasyonu okuyun →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Küçük, erişilebilir ve stili tamamen sizde.

Renklerinizi izler

İkonlar currentColor kullanır: metin rengini, hover durumlarını ve karanlık modu kendiliğinden alırlar. Bir prop, bir class ya da düz CSS ile değiştirebilirsiniz.

Bilerek küçük

8 kB

Dahili oynatıcı, sıfır bağımlılık. Her ikon 2 kB’lık ayrı bir modül.

Varsayılan olarak erişilebilir

Azaltılmış hareket tercihine uyar, hover animasyonlarını klavye odağında da oynatır ve siz etiketlemedikçe ekran okuyuculara görünmez.

Sunucu tarafı render’a hazır

Next.js, Remix ve Astro’da sorunsuz render edilen bir client bileşeni. İkonlar her yerde import edebileceğiniz düz verilerdir.

Ajanlar için yapıldı

Her ikon için anahtar kelimeler içeren tipli bir katalog, icons.json, llms.txt ve Markdown dokümantasyon.

Doğru mikro animasyonu bulun.

Sorular

Mikro animasyon ve animasyonlu ikon nedir?

Mikro animasyonlar, bir kullanıcı eylemine yanıt veren kısa ve tek amaçlı hareketlerdir: kapatma düğmesine dönüşen bir menü ikonu, bir gönderiyi beğendiğinizde dolan bir kalp, yeni bildirimde çalan bir zil. Animasyonlu ikonlar bunların en yaygın türüdür. Arayüzün tepki verdiğini hissettirir ve durum değişikliklerini ek metne gerek kalmadan gösterirler.

Lottie ve SVG dosyaları arasındaki fark nedir?

Lottie JSON dosyası animasyonun tamamını içerir ve react-useanimations’ın dahili oynatıcısı dahil her Lottie oynatıcısında oynar. SVG dosyaları ise ikonun durağan hâlinin görselleridir, her durum için bir tane (örneğin eye ve eye-off). Hiçbir şeyin hareket etmemesi gereken yerler içindir: e-postalar, belgeler, tasarım araçları ya da JavaScript’siz bir yedek.

Next.js ve sunucu tarafı render ile çalışır mı?

Evet. Bileşen 'use client' olarak işaretlidir ve animasyonu yalnızca tarayıcıda çizer; bu yüzden server component’lerden ve Next.js, Remix, Astro gibi SSR framework’lerinden dynamic import kullanmadan render edilir. İkon modülleri, server component’lerin import edip prop olarak geçebileceği düz verilerdir. Next.js ve sunucu tarafı render →

İkonları ticari projelerde kullanabilir miyim?

Evet. İkonlar ve react-useanimations paketi MIT lisanslıdır: kişisel ve ticari işlerde kullanabilir, değiştirebilir ve yeniden dağıtabilirsiniz. Atıf memnuniyetle karşılanır ama zorunlu değildir. Lisans ve koşullar →

İkonları React olmadan kullanabilir miyim?

Evet. Her ikon standart bir Lottie JSON dosyasıdır; düz JavaScript, Vue, Svelte, Angular ya da bir CMS içinde lottie-web ile, iOS, Android ve Flutter’da ise Lottie oynatıcılarıyla oynar. Lottie ikonları sayfasında dosya URL’leri ve her etkileşim için hazır lottie-web kod parçacıkları var. Lottie ikonları →

İkonlar bundle boyutuma ne kadar ekler?

react-useanimations 3.1.1 içindeki oynatıcı gzip ile yaklaşık 8 kB’tır ve bağımlılığı yoktur. Her ikon, boyutu 1 ile 15 kB arasında (medyan 2 kB) değişen ayrı bir modüldür; bundle yalnızca import ettiğiniz ikonları içerir.

Arayüzünüze hayat katın.

Ücretsiz ve MIT lisanslı; kişisel ve ticari işler için.

Hemen başlayın