Lottie in SwiftUI

Airbnb's lottie-ios library has a SwiftUI view called LottieView. It needs iOS 13 or newer.

Install

In Xcode, add a package dependency with this address: https://github.com/airbnb/lottie-spm.git. In a Package.swift file, it looks like this:

.package(url: "https://github.com/airbnb/lottie-spm.git", from: "4.6.1")

Checked on 7 October 2026: lottie-ios 4.6.1 on Swift Package Index and GitHub. Use the lottie-spm address. Airbnb recommends it for Swift Package Manager because the main lottie-ios repository is a much bigger download.

A working example

This plays the Bell animated icon from the free library. Download its Lottie JSON file, then:

1. Add the Lottie package in Xcode, then drag icon-bell.json into your app target.

2. Use the view.

import SwiftUI
import Lottie

struct IconBellView: View {
  @Environment(\.accessibilityReduceMotion) private var reduceMotion

  var body: some View {
    LottieView(animation: .named("icon-bell"))
      .playbackMode(reduceMotion
        ? .paused(at: .progress(0.633))
        : .playing(.fromProgress(0, toProgress: 1, loopMode: .loop)))
      .resizable()
      .frame(width: 48, height: 48)
      .accessibilityLabel("Bell")
  }
}

accessibilityReduceMotion comes from the SwiftUI environment, so the view updates when the setting changes and pauses on a frame 63% of the way in, where the animation is complete.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

The view is empty

.named("icon-bell") looks for icon-bell.json in your app bundle and returns nil when it isn't there. In Xcode, check the file's Target Membership, and leave .json off the name.

It ignores the frame

Add .resizable() so the animation scales to fit the frame you give it.

You have a .lottie file

LottieView loads those too: LottieView { try await DotLottieFile.named("icon-bell") }.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: HTML, React, React Native, Flutter, Android Compose, Webflow, Framer, WordPress.