Add Lottie animated icons to your Flutter app using the lottie package and control playback with AnimationController.
Open pubspec.yaml and add the lottie dependency.
dependencies:
flutter:
sdk: flutter
lottie: ^3.0.0Download your icon from Unicorn Icons as a Lottie JSON file. Place it in your assets folder and register it in pubspec.yaml.
flutter:
assets:
- assets/icons/your_icon.jsonUse Lottie.asset for the simplest integration. The animation autoplays and loops by default.
import 'package:lottie/lottie.dart';
class MyIcon extends StatelessWidget {
const MyIcon({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 64,
height: 64,
child: Lottie.asset(
'assets/icons/your_icon.json',
fit: BoxFit.contain,
),
);
}
}Use AnimationController for full control over play, pause, stop, and speed. Add SingleTickerProviderStateMixin to your StatefulWidget.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class ControllableIcon extends StatefulWidget {
const ControllableIcon({super.key});
@override
State<ControllableIcon> createState() => _ControllableIconState();
}
class _ControllableIconState extends State<ControllableIcon>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
_controller.reset();
_controller.forward();
},
child: Lottie.asset(
'assets/icons/your_icon.json',
controller: _controller,
onLoaded: (composition) {
_controller.duration = composition.duration;
_controller.forward(); // autoplay once
},
fit: BoxFit.contain,
width: 64,
height: 64,
),
);
}
}Control whether the animation loops or plays a single time using the repeat and forward methods.
// Loop indefinitely
_controller.repeat();
// Play once forward
_controller.forward();
// Play once then reverse
_controller.forward().then((_) => _controller.reverse());
// Change speed (2x)
_controller.value = 0;
_controller.animateTo(1.0, duration: composition.duration * 0.5);For interactive icon animations in Flutter, the Rive format offers smaller file sizes, GPU-accelerated rendering, and built-in state machines for hover and click interactions — features Lottie cannot replicate. Use Lottie when you need simple playback-only animations or have existing Lottie assets.