아이콘 300개 · Lottie JSON · MIT 라이선스

무료 Lottie 아이콘

useAnimations의 모든 아이콘은 표준 Lottie JSON 애니메이션이라서 웹의 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입니다.

웹: lottie-web

Airbnb가 만든 레퍼런스 플레이어입니다. CDN에서 불러와 아이콘 URL을 지정하고 SVG 렌더러를 선택하세요. SVG 렌더러를 쓰면 아이콘이 선명하게 유지되고 CSS로 색을 바꿀 수 있습니다. light 빌드는 익스프레션을 건너뛰므로 full 빌드(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; }

웹: 호버·클릭 인터랙션

lottie-web은 재생과 정지만 할 뿐, 인터랙션은 직접 구현해야 합니다. 아래는 동작 줄이기를 지원하는 menu 아이콘의 클릭 토글입니다. 다른 인터랙션도 모두 같은 패턴을 따르며, 아래의 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(); } });

웹: dotLottie 웹 컴포넌트

LottieFiles의 플레이어로, WebAssembly 엔진으로 캔버스에 렌더링하며 .lottie 파일뿐 아니라 일반 Lottie JSON도 재생합니다. 캔버스는 파일의 색상을 그대로 쓰므로, 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(뷰 기반이라면 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, 웹, 데스크톱을 지원하는 순수 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)이 쓰였습니다. 웹에서는 lottie_light가 아닌 lottie-web의 full 빌드로 재생하세요. 네이티브 플레이어는 익스프레션을 평가하지 않으므로 iOS, Android, Flutter에서는 직접 테스트하거나 다른 아이콘을 고르세요. react-useanimations는 디자인된 그대로 재생합니다.

자주 묻는 질문

이 Lottie 아이콘을 상업적으로 무료로 쓸 수 있나요?

네. Lottie 아이콘 300개 모두 MIT 라이선스입니다. 개인·상업용 프로젝트에서 사용, 수정, 재배포할 수 있고, 출처 표기도 다운로드용 계정도 필요 없습니다.

Lottie 파일은 어떤 포맷인가요?

셰이프 레이어로만 이루어진 표준 Lottie JSON(Bodymovin 포맷)입니다. 이미지, 폰트, 외부 에셋은 없습니다. 각 아이콘은 24 px 또는 32 px 아트보드에 그려져 어떤 크기로도 확대·축소되며, 파일 크기는 1~14 kB, 중앙값 2 kB입니다.

React에서 아이콘을 쓰려면 lottie-web이 필요한가요?

아니요. react-useanimations에는 의존성 없는 8 kB짜리 자체 플레이어가 있으므로, 패키지 하나를 설치하고 필요한 아이콘만 가져오면 됩니다. lottie-web은 React 밖, 즉 일반 웹 페이지나 다른 프레임워크에서만 필요합니다.

lottie-web의 full 빌드가 필요한 아이콘은 무엇인가요?

아이콘 2개에 After Effects 익스프레션(loopOut 또는 wiggle)이 쓰였습니다: Error, Twitter. 웹에서는 lottie-web의 full 빌드가 필요하며, lottie_light는 익스프레션을 무시합니다. 네이티브 플레이어(lottie-ios, lottie-android, Flutter의 lottie)도 익스프레션을 평가하지 않으므로 이 아이콘들은 움직임이 다를 수 있습니다.

Lottie 아이콘의 색상을 바꿀 수 있나요?

웹에서는 lottie-web의 SVG 렌더러가 색상을 속성으로 쓰기 때문에 path에 CSS 규칙을 적용하면 색이 바뀝니다. 네이티브 플레이어에서는 동적 속성 API를 씁니다. iOS는 ColorValueProvider, Android는 LottieProperty.COLOR와 STROKE_COLOR, Flutter는 ValueDelegate.color입니다.

인기 Lottie 아이콘