300 個のアイコン · Lottie JSON · MIT ライセンス

無料の Lottie アイコン

useAnimations のアイコンはすべて標準的な Lottie JSON アニメーションなので、Web の lottie-web をはじめ、lottie-ios、lottie-android、Flutter、React Native など、どの Lottie プレーヤーでも再生できます。ファイルは MIT ライセンスで無料、登録も不要です。CORS を有効にした固定の URL から配信しているので、直接読み込むことも、プロジェクトにダウンロードして使うこともできます。

ファイルと URL

各アイコンには、プレビューとダウンロードを載せた /icons/<id> のページがあります。ファイル本体は次のとおりです：

https://useanimations.com/icons/<id>.json          # Lottie JSON アニメーション
https://useanimations.com/icons/<id>.zip           # JSON と静的 SVG
https://useanimations.com/icons/<id>/<state>.svg   # 各状態の静的 SVG
https://useanimations.com/icons.json               # 全アイコンのカタログ

icons.json には、すべてのアイコンの ID、タイトル、カテゴリ、キーワード、インタラクション、サイズ、再生時間、ファイル URL が載っています。スクリプトでキーワードからアイコンを選んだり、コーディングエージェントに選ばせたりするのに便利です。Lottie ファイルのサイズは中央値で 2 kB です。

Web：lottie-web

Airbnb が開発したリファレンスとなるプレーヤーです。CDN から読み込み、アイコンの URL を指定して SVG レンダラーを選びます。SVG レンダラーならアイコンがくっきり表示され、CSS で色も変えられます。ライトビルドはエクスプレッションを処理しないので、フルビルド（lottie.min.js）を使ってください。

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

テキストの色に追従させる（SVG レンダラー）

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

Web：ホバーとクリックのインタラクション

lottie-web は再生と停止はできますが、インタラクションは自分で組む必要があります。以下はメニューアイコンのクリックトグルに、モーション軽減への対応を加えた例です。どのインタラクションも同じパターンで書けます。下で紹介する React コンポーネントなら、これをすべて任せられます。

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 コンポーネント

LottieFiles のプレーヤーで、WebAssembly エンジンで canvas に描画し、.lottie ファイルだけでなく通常の Lottie JSON も再生できます。canvas ではファイルの色がそのまま使われるため、JSON の色を書き換えない限りアイコンは黒のままです。

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

または JavaScript API：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

Lottie プレーヤーのインストールは不要です。パッケージには 8 kB の独自プレーヤーが入っていて、アイコンごとのインタラクションを再生し、テキストの色に追従し、モーション軽減の設定も尊重します。アイコンは個別のモジュールなので、インポートしたものだけがバンドルに含まれます。

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

オフラインで使うなら require() で JSON をバンドルし、そうでなければ URL から読み込みます。

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

Swift Package Manager で https://github.com/airbnb/lottie-spm.git からパッケージを追加し、JSON をバンドルに入れるか、URL から読み込みます。

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（View を使う場合は com.airbnb.android:lottie）を追加します。オフラインで使うなら JSON を res/raw に置き、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

lottie パッケージは、Android、iOS、Web、デスクトップで動く Pure Dart のプレーヤーです。

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

エクスプレッションを使うアイコン

2 個のアイコンが After Effects のエクスプレッション（loopOut または wiggle）を使っています。Web では lottie_light ではなく lottie-web のフルビルドで再生してください。ネイティブのプレーヤーはエクスプレッションを評価しないので、iOS、Android、Flutter では動きを確認するか、別のアイコンを選んでください。react-useanimations ならデザインどおりに再生されます。

よくある質問

これらの Lottie アイコンは商用利用も無料ですか？

はい。全 300 個の Lottie アイコンは MIT ライセンスです。個人・商用プロジェクトで使用、改変、再配布でき、クレジット表記も、ダウンロードのためのアカウントも必要ありません。

Lottie ファイルの形式は何ですか？

シェイプレイヤーだけで構成された標準的な Lottie JSON（Bodymovin 形式）で、画像、フォント、外部アセットは含みません。各アイコンは 24 px または 32 px のアートボードで描かれ、どのサイズにも拡大縮小できます。ファイルサイズは 1〜14 kB（中央値 2 kB）です。

React でアイコンを使うのに lottie-web は必要ですか？

いいえ。react-useanimations には依存関係のない 8 kB の独自プレーヤーが入っているので、パッケージを 1 つインストールして、必要なアイコンをインポートするだけです。lottie-web が必要なのは、素の Web ページやほかのフレームワークなど、React 以外で使う場合だけです。

lottie-web のフルビルドが必要なアイコンは？

2 個のアイコンが After Effects のエクスプレッション（loopOut または wiggle）を使っています：Error、Twitter。Web では lottie-web のフルビルドが必要で、lottie_light はエクスプレッションを無視します。ネイティブのプレーヤー（lottie-ios、lottie-android、Flutter の lottie）もエクスプレッションを評価しないため、これらのアイコンは動きが異なる場合があります。

Lottie アイコンの色は変えられますか？

Web では、lottie-web の SVG レンダラーが色を属性として書き出すので、パスに CSS ルールを当てれば色を変えられます。ネイティブのプレーヤーでは動的プロパティの API を使います。iOS では ColorValueProvider、Android では LottieProperty.COLOR と STROKE_COLOR、Flutter では ValueDelegate.color です。

人気の Lottie アイコン