300 ikon · Lottie JSON · MIT lisanslı

Ücretsiz Lottie ikonları

Her useAnimations ikonu standart bir Lottie JSON animasyonudur, yani her Lottie oynatıcısı onu oynatabilir: web’de lottie-web, ayrıca lottie-ios, lottie-android, Flutter ve React Native. Dosyalar MIT lisansıyla ücretsizdir, kayıt gerektirmez ve CORS açık, kalıcı URL’lerden sunulur; doğrudan yükleyebilir ya da projenize indirebilirsiniz.

Dosyalar ve URL’ler

Her ikonun /icons/<id> adresinde önizleme ve indirmeler içeren bir sayfası vardır (ikon sayfaları İngilizcedir). Dosyaların kendisi:

https://useanimations.com/icons/<id>.json          # Lottie JSON animasyonu
https://useanimations.com/icons/<id>.zip           # JSON ve statik SVG’ler
https://useanimations.com/icons/<id>/<state>.svg   # her durumun statik SVG’si
https://useanimations.com/icons.json               # tüm ikonların kataloğu

icons.json her ikonu id, başlık, kategori, anahtar kelimeler, etkileşim, boyut, süre ve dosya URL’leriyle listeler. Böylece bir script’te anahtar kelimeyle ikon seçmek ya da seçimi bir kodlama ajanına bırakmak kolaylaşır. Lottie dosyalarının medyan boyutu 2 kB’tır.

Web: lottie-web

Airbnb’nin referans oynatıcısı. Bir CDN’den yükleyin, bir ikon URL’sini gösterin ve SVG renderer’ı seçin; böylece ikon keskin kalır ve CSS ile yeniden renklendirilebilir. Tam sürümü (lottie.min.js) kullanın: hafif sürüm ifadeleri (expressions) atlar.

<div id="icon" style="width: 48px; height: 48px"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('icon'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://useanimations.com/icons/loading.json',
  });
</script>

Metin rengini izle (SVG renderer)

#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) { stroke: currentColor; }
#icon path[fill='rgb(0,0,0)'] { fill: currentColor; }

Web: hover ve tıklama etkileşimleri

lottie-web oynatır ve durdurur, ama etkileşimler size kalmış. Aşağıdaki örnek, menü ikonunun azaltılmış hareket destekli tıklayınca geçiş etkileşimidir. Her etkileşim aynı kalıbı izler; daha aşağıda anlatılan React bileşeni ise bunların hepsini sizin yerinize yapar.

import lottie from 'lottie-web'; // npm install lottie-web

const el = document.querySelector('#menu-button');
const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu.json' });
const motion = matchMedia('(prefers-reduced-motion: reduce)');
let isOn = true; // Frame 0 is on; the final frame is off.
el.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });

Web: dotLottie web component

LottieFiles’ın oynatıcısı bir WebAssembly motoruyla canvas’a çizer ve .lottie dosyalarının yanı sıra düz Lottie JSON da oynatır. Canvas dosyadaki renkleri korur; JSON’u yeniden renklendirmediğiniz sürece ikonlar siyah kalır.

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

<dotlottie-wc src="https://useanimations.com/icons/loading.json" autoplay loop style="width: 48px; height: 48px"></dotlottie-wc>

Ya da JavaScript API’si: npm install @lottiefiles/dotlottie-web

import { DotLottie } from '@lottiefiles/dotlottie-web';

new DotLottie({
  canvas: document.querySelector('#icon-canvas'),
  src: 'https://useanimations.com/icons/loading.json',
  autoplay: true,
  loop: true,
});

React: react-useanimations

Kurmanız gereken bir Lottie oynatıcısı yok: paketin kendi 8 kB’lık oynatıcısı var; her ikonun etkileşimini oynatır, metin rengini izler ve azaltılmış hareket tercihine uyar. Her ikon ayrı bir modüldür, yalnızca import ettikleriniz bundle’a girer.

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

<UseAnimations animation={loading} size={48} />

React Native: lottie-react-native

Çevrimdışı kullanım için JSON’u require() ile bundle’a ekleyin ya da URL’sinden yükleyin.

// npm install lottie-react-native
import LottieView from 'lottie-react-native';

<LottieView
  source={{ uri: 'https://useanimations.com/icons/loading.json' }} // or require('./loading.json')
  autoPlay
  loop
  style={{ width: 48, height: 48 }}
/>

iOS: lottie-ios (SwiftUI)

Paketi Swift Package Manager ile https://github.com/airbnb/lottie-spm.git adresinden ekleyin, ardından JSON’u bundle’ınıza koyun ya da URL’sinden yükleyin.

import Lottie
import SwiftUI

struct LoadingIcon: View {
  var body: some View {
    // Bundled file: LottieView(animation: .named("loading"))
    LottieView {
      await LottieAnimation.loadedFrom(url: URL(string: "https://useanimations.com/icons/loading.json")!)
    }
    .looping()
    .frame(width: 48, height: 48)
  }
}

Android: lottie-android (Jetpack Compose)

com.airbnb.android:lottie-compose ekleyin (view’lar için com.airbnb.android:lottie). Çevrimdışı kullanım için JSON’u res/raw klasörüne koyup LottieCompositionSpec.RawRes ile yükleyin.

// build.gradle.kts: implementation("com.airbnb.android:lottie-compose:6.7.1")
@Composable
fun LoadingIcon() {
  val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("https://useanimations.com/icons/loading.json")
  )
  LottieAnimation(
    composition = composition,
    iterations = LottieConstants.IterateForever,
    modifier = Modifier.size(48.dp),
  )
}

Flutter: lottie

lottie paketi Android, iOS, web ve masaüstü için saf Dart ile yazılmış bir oynatıcıdır.

// pubspec.yaml: lottie: ^3.6.1
import 'package:lottie/lottie.dart';

Lottie.network(
  'https://useanimations.com/icons/loading.json',
  width: 48,
  height: 48,
) // or Lottie.asset('assets/loading.json')

İfade (expression) kullanan ikonlar

2 ikon After Effects ifadeleri (loopOut ya da wiggle) kullanır. Web’de bunları lottie_light ile değil, lottie-web’in tam sürümüyle oynatın. Native oynatıcılar ifadeleri işlemez; bu ikonları iOS, Android ve Flutter’da test edin ya da başka bir ikon seçin. react-useanimations bunları tasarlandığı gibi oynatır.

Sık sorulan sorular

Bu Lottie ikonları ticari kullanım için ücretsiz mi?

Evet. 300 Lottie ikonunun tamamı MIT lisanslıdır: kişisel ve ticari projelerde kullanabilir, değiştirebilir ve yeniden dağıtabilirsiniz. Atıf gerekmez, indirmek için hesap da gerekmez.

Lottie dosyaları hangi formatta?

Yalnızca shape layer’lardan oluşan standart Lottie JSON (Bodymovin formatı): görsel, font ya da harici dosya yok. Her ikon 24 ya da 32 px’lik bir artboard üzerinde çizilmiştir, her boyuta ölçeklenir ve 1 kB ile 14 kB arasındadır (medyan 2 kB).

İkonları React’te kullanmak için lottie-web gerekli mi?

Hayır. react-useanimations’ın bağımlılığı olmayan, kendi 8 kB’lık oynatıcısı var; tek bir paket kurup ihtiyacınız olan ikonları import edersiniz. lottie-web yalnızca React dışında, düz web sayfalarında ya da başka framework’lerde gerekir.

Hangi ikonlar lottie-web’in tam sürümünü gerektirir?

2 ikon After Effects ifadeleri (loopOut ya da wiggle) kullanır: Error, Twitter. Web’de bunlar lottie-web’in tam sürümünü gerektirir; lottie_light ifadeleri yok sayar. Native oynatıcılar (lottie-ios, lottie-android, Flutter’ın lottie paketi) da ifadeleri işlemediği için bu ikonlar orada farklı hareket edebilir.

Bir Lottie ikonunun rengini değiştirebilir miyim?

Web’de lottie-web’in SVG renderer’ı renkleri öznitelik olarak yazar; path’lere uygulanan bir CSS kuralı ikonu yeniden renklendirir. Native oynatıcılar kendi dinamik özellik API’lerini kullanır: iOS’ta ColorValueProvider, Android’de LottieProperty.COLOR ve STROKE_COLOR, Flutter’da ValueDelegate.color.

Popüler Lottie ikonları