Rive.rivLottie.json
Animated Icons for Flutter
Flutter supports both Rive and Lottie animated icons via pub.dev packages. Rive is recommended: the rive package renders .riv files with GPU-accelerated performance and full StateMachineController support for hover, tap, and custom interaction states. The lottie package handles JSON playback with AnimationController for simpler use cases.
Animated icons
View all icons →Browse by category
Animated icons across 24 categories, all available in Rive and Lottie formats.
Communication iconsBusiness & legal iconsArrows iconsEnergy iconsEmoji iconsFilm & video iconsGraphs iconsFood & drinks iconsE commerce iconsDate & time iconsCelebration iconsHealth iconsLoaders iconsMaps & location iconsScience & Education iconsProgramming iconsMusic & audio iconsTravel iconsMarketing iconsTransport iconsWeather iconsUi iconsFinance iconsTechnology icons
Rive integration
Rive icons include interactive state machines for hover and click — no extra animation code required. GPU-accelerated with smaller file sizes than Lottie.
1
Install rive
# pubspec.yaml
dependencies:
rive: ^0.13.02
Add the animation
import 'package:rive/rive.dart';
SizedBox(
width: 64,
height: 64,
child: RiveAnimation.asset(
'assets/your_icon.riv',
stateMachines: const ['State Machine 1'],
fit: BoxFit.contain,
),
)Lottie integration
Use Lottie for simple playback-only animations or when integrating with existing Lottie-based tooling.
1
Install lottie
# pubspec.yaml
dependencies:
lottie: ^3.0.02
Add the animation
import 'package:lottie/lottie.dart';
Lottie.asset(
'assets/your_icon.json',
width: 64,
height: 64,
fit: BoxFit.contain,
)