not_static_icons | animated icons for Flutter
Seamlessly animated Flutter icons — no Rive or Lottie required. Made with Lucide icons inspired by pqoqubbw/icons.
Features
- 350+ Animated Icons: Based on popular Lucide icon set
- Interactive Animations: Hover and touch effects
- Customizable: Size, color, animation duration, stroke width
- Flexible Integration: Works with GestureDetector, InkWell, IconButton
- Programmatic Control: AnimatedIconController for external animation control
Usage
Basic Usage
// Simple icon
AirplayIcon()
// Customized icon
AArrowDownIcon(
size: 45,
color: Colors.blue,
animationDuration: Duration(milliseconds: 800),
strokeWidth: 3.0,
hoverColor: Colors.red,
enableTouchInteraction: true,
infiniteLoop: false,
reverseOnExit: false,
)
Using onTap Callback
Use onTap instead of wrapping the icon in GestureDetector:
CheckIcon(
size: 40,
color: Colors.green,
onTap: () {
print('Icon tapped!');
},
)
Using with IconButton
Use interactive: false and AnimatedIconController for IconButton integration:
class MyWidget extends StatefulWidget {
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final _iconController = AnimatedIconController();
@override
Widget build(BuildContext context) {
return IconButton(
onPressed: () {
_iconController.animate(); // Trigger animation
// Your action here
},
icon: HeartIcon(
size: 32,
color: Colors.red,
interactive: false, // Disable internal gesture handlers
controller: _iconController,
),
);
}
}
Using with InkWell
final _iconController = AnimatedIconController();
InkWell(
onTap: () {
_iconController.animate();
// Your action here
},
child: Padding(
padding: EdgeInsets.all(8),
child: CopyIcon(
size: 24,
interactive: false,
controller: _iconController,
),
),
)
All Configuration Options
ActivityIcon(
size: 48.0, // Icon size
color: Colors.black87, // Default color
hoverColor: Colors.blue, // Hover color
animationDuration: Duration(milliseconds: 600), // Animation duration
strokeWidth: 2.0, // Stroke width
reverseOnExit: true, // Reverse animation on exit
enableTouchInteraction: true, // Enable touch interaction
infiniteLoop: false, // Enable infinite loop
resetToStartOnComplete: false, // Reset after animation completes
onTap: () {}, // Tap callback
interactive: true, // Enable/disable internal gestures
controller: AnimatedIconController(), // External animation controller
)
AnimatedIconController Methods
| Method | Description |
|---|---|
animate() |
Triggers the animation to play forward |
stop() |
Stops the current animation |
reset() |
Resets the animation to its initial state |
Available Icons
Animation Types
Each icon has its own unique animation:
- Rotation: Icons rotate around their center
- Scale: Icons scale up/down
- Path Drawing: Icons draw their paths progressively
- Morphing: Icons transform between states
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Project support
Contacts
License
Credits
Icons based on Lucide Icons inspired by pqoqubbw/icons