flutter_lucide_animated 0.0.4

Flutter package for Lucide Animated Icons. 375+ beautifully animated icons with pathLength, rotate, translate, scale, and opacity animations. Tree-shaking enabled.

flutter_lucide_animated

A Flutter package providing 375+ beautiful animated icons from Lucide Animated. Each icon features smooth, carefully crafted animations including stroke drawing, rotation, translation, scale, and opacity effects.

Live Demo

ravikovind.github.io/flutter-lucide-animated

Features

• 375+ Animated Icons - Comprehensive collection of animated Lucide icons
• Tree Shaking - Only include icons you actually use
• Cross Platform - Works on Android, iOS, Web, macOS, Windows, and Linux
• Multiple Animation Triggers - onTap, onHover, loop, or manual control
• Customizable - Control size, color, duration, and curves
• 60fps Animations - Path caching for smooth performance

Installation

Add flutter_lucide_animated to your pubspec.yaml:

dependencies:
  flutter_lucide_animated: ^0.0.4

Then run:

flutter pub get

Quick Start

1. Import the package in your Dart file:

import 'package:flutter_lucide_animated/flutter_lucide_animated.dart';

2. Use any icon in your widgets:

// Animate on tap (default)
LucideAnimatedIcon(icon: heart)

// Animate on hover
LucideAnimatedIcon(icon: search, trigger: AnimationTrigger.onHover)

// Continuous loop
LucideAnimatedIcon(icon: loader_pinwheel, trigger: AnimationTrigger.loop)

// Customize appearance
LucideAnimatedIcon(
  icon: bell,
  size: 48,
  color: Colors.blue,
  duration: Duration(milliseconds: 600),
)

Animation Triggers

Trigger	Description
AnimationTrigger.onTap	Animate when tapped (default)
AnimationTrigger.onHover	Animate on mouse enter (web/desktop)
AnimationTrigger.loop	Continuous animation loop
AnimationTrigger.manual	Control via LucideAnimatedIconController

Manual Control

final controller = LucideAnimatedIconController();

LucideAnimatedIcon(
  icon: heart,
  trigger: AnimationTrigger.manual,
  controller: controller,
)

// Control the animation
controller.animate();  // Play forward
controller.reverse();  // Play backward
controller.reset();    // Reset to start
controller.toggle();   // Toggle state

Animation Types

Icons support various animation types:

• PathLength - Stroke drawing effect
• Opacity - Fade in/out
• Rotate - Rotation with keyframe support
• Translate - Position movement with keyframe support
• Scale - Size scaling with keyframe support
• Combined - Multiple animations together

Contributing

We welcome contributions! Please see our issues page for details.

• Bug reports: Open an issue
• Feature requests: Open an issue
• Pull requests: Submit a PR

License

This project is licensed under the MIT License - see the LICENSE file for details.

Links

• Lucide Animated: lucide-animated.com
• Lucide Icons: lucide.dev
• Original Animations: github.com/pqoqubbw/icons

Maintainers

• Ravi Kovind - Available for hire!

Disclaimer

This is not an official Lucide package. The animated icons are based on work by pqoqubbw/icons. All assets are owned by their respective owners. This package is created to help the Flutter community.