300 ikon · Lottie JSON · Berlisensi MIT

Ikon Lottie gratis

Setiap ikon useAnimations adalah animasi Lottie JSON standar, jadi bisa diputar oleh Lottie player mana pun: lottie-web di web, lottie-ios, lottie-android, Flutter, dan React Native. File-nya gratis di bawah lisensi MIT, tanpa perlu mendaftar, dan disajikan dari URL tetap dengan CORS aktif, sehingga bisa Anda muat langsung atau unduh ke dalam proyek.

File dan URL

Setiap ikon punya halaman di /icons/<id> (dalam bahasa Inggris) dengan pratinjau dan unduhan. File-nya sendiri:

https://useanimations.com/icons/<id>.json          # animasi Lottie JSON
https://useanimations.com/icons/<id>.zip           # JSON dan SVG statis
https://useanimations.com/icons/<id>/<state>.svg   # SVG statis untuk setiap keadaan
https://useanimations.com/icons.json               # katalog semua ikon

icons.json memuat daftar semua ikon beserta id, judul, kategori, kata kunci, interaksi, ukuran, durasi, dan URL file-nya, sehingga mudah memilih ikon berdasarkan kata kunci lewat skrip atau membiarkan coding agent memilihkannya. Median ukuran file Lottie adalah 2 kB.

Web: lottie-web

Player referensi dari Airbnb. Muat dari CDN, arahkan ke URL ikon, dan pilih renderer SVG agar ikon tetap tajam dan warnanya bisa diubah dengan CSS. Pakai build lengkap (lottie.min.js): build light tidak mendukung expression.

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

Mengikuti warna teks (renderer SVG)

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

Web: interaksi hover dan klik

lottie-web hanya memutar dan menghentikan animasi; interaksinya Anda atur sendiri. Contoh berikut adalah toggle klik pada ikon menu dengan dukungan reduced motion. Semua interaksi mengikuti pola yang sama, dan komponen React di bawah ini mengerjakan semuanya untuk Anda.

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: web component dotLottie

Player dari LottieFiles ini me-render ke canvas dengan engine WebAssembly dan bisa memutar Lottie JSON biasa maupun file .lottie. Canvas mempertahankan warna dari file, jadi ikon tetap hitam kecuali Anda mengubah warna di JSON-nya.

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

Atau lewat API JavaScript: 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

Tidak perlu memasang Lottie player: paket ini punya player sendiri berukuran 8 kB, menjalankan interaksi tiap ikon, mengikuti warna teks, dan menghormati preferensi reduced motion. Setiap ikon adalah modul terpisah, jadi hanya ikon yang Anda import yang ikut terkirim.

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

Bundel JSON-nya dengan require() untuk penggunaan offline, atau muat dari URL-nya.

// 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)

Tambahkan paket dari https://github.com/airbnb/lottie-spm.git lewat Swift Package Manager, lalu masukkan JSON ke dalam bundle aplikasi atau muat dari URL-nya.

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)

Tambahkan com.airbnb.android:lottie-compose (atau com.airbnb.android:lottie untuk view). Simpan JSON di res/raw untuk penggunaan offline dengan LottieCompositionSpec.RawRes.

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

Paket lottie adalah player murni Dart untuk Android, iOS, web, dan desktop.

// 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')

Ikon dengan expression

2 ikon memakai expression After Effects (loopOut atau wiggle). Di web, putar ikon tersebut dengan build lengkap lottie-web, bukan lottie_light. Player native tidak mengevaluasi expression, jadi uji ikon ini di iOS, Android, dan Flutter atau pilih ikon lain; react-useanimations memutarnya sesuai rancangan.

FAQ

Apakah ikon Lottie ini gratis untuk penggunaan komersial?

Ya. Semua 300 ikon Lottie berlisensi MIT: Anda bebas memakai, mengubah, dan mendistribusikannya ulang di proyek pribadi maupun komersial, tanpa kewajiban atribusi dan tanpa perlu akun untuk mengunduhnya.

Apa format file Lottie-nya?

Lottie JSON standar (format Bodymovin) yang hanya berisi shape layer: tanpa gambar, font, atau aset eksternal. Setiap ikon digambar di artboard 24 atau 32 px, bisa diskalakan ke ukuran berapa pun, dan berukuran 1 kB sampai 14 kB, dengan median 2 kB.

Apakah saya butuh lottie-web untuk memakai ikon ini di React?

Tidak. react-useanimations punya player sendiri berukuran 8 kB tanpa dependensi, jadi Anda cukup memasang satu paket dan meng-import ikon yang dibutuhkan. lottie-web hanya diperlukan di luar React, yaitu di halaman web biasa atau di framework lain.

Ikon mana yang memerlukan build lengkap lottie-web?

2 ikon memakai expression After Effects (loopOut atau wiggle): Error dan Twitter. Di web, ikon-ikon ini memerlukan build lengkap lottie-web; lottie_light mengabaikan expression. Player native (lottie-ios, lottie-android, paket lottie untuk Flutter) juga tidak mengevaluasi expression, jadi gerakan ikon-ikon ini bisa berbeda di sana.

Bisakah warna ikon Lottie diubah?

Bisa. Di web, renderer SVG lottie-web menulis warna sebagai atribut, jadi aturan CSS pada path-nya bisa mengubah warna ikon. Player native memakai API dynamic property masing-masing: ColorValueProvider di iOS, LottieProperty.COLOR dan STROKE_COLOR di Android, serta ValueDelegate.color di Flutter.

Ikon Lottie populer