RiveAnimatedIcons - 50+ Icons Now Available! 🚀
This package provides rive animated icons that can be customized to suit your preference. It includes the riveIcon type, onTap, color parameters and others to give the user a level of control.
We’re excited to announce that we’ve hit a major milestone — 50 animated icons and counting! 🎉
Icons Sample ⬇️
Example
RiveAnimatedIcon(
riveIcon: RiveIcon.home,
width: 50,
height: 50,
color: Colors.green,
strokeWidth: 3,
loopAnimation: false,
onTap: (){},
onHover: (value){}
),
Required parameter
riveIcon:
This parameter is used to define the icon type from the RiveIcon enum
Optional parameters
width:
This parameter is used to set the icon width
height:
This parameter is used to set the icon height
color:
This parameter is used to set icon color
loopAnimation:
When this parameter is set to true the icon's animation will be on loop
onTap:
This callback is set by the user to perform actions onTap
onHover:
This callback is set by the user to perform actions onHover
splashColor:
This parameter is used to set icon splash color
strokeWidth:
This parameter is used to set icon stroke width
Animated Icon stroke width sample ⬇️
Best practices 🙌
- If a Rive animation is set to loop and is scrolled off-screen, you can disable the loop to stop the animation and conserve resources while it's not visible. Similarly, you can re-enable the loop when the animation comes back into view.
License 📝
Rive Animated Icons is MIT-licensed
Animation credits 🏆
All the icons available were animated in Rive and sourced from the Rive community files. Special thanks to all the animators!