Free Icon Animator — Lucide Icons, Framer Motion, Tailwind & GIF Export

1 icon · Trigger: load

Export

import { motion } from "framer-motion";
import { Heart } from "lucide-react";

export function AnimatedIcons() {
  return (
    <div className="inline-flex items-center justify-center">
    <motion.div
      initial={{ opacity: 0, scale: 0.3, rotate: 0, x: 0, y: 0 }}
      animate={{ opacity: 1, scale: 1, rotate: 0, x: 0, y: 0 }}
      transition={{ duration: 0.5, delay: 0, times: [0, 1], ...{ type: "spring", stiffness: 260, damping: 20 } }}
      style={{ display: "inline-flex", marginLeft: 0, marginTop: 0 }}
    >
      <Heart size={96} color="#171717" strokeWidth={2} />
    </motion.div>
    </div>
  );
}

Layers

Animation Preset

Applies to the selected layer’s keyframes

Entrance

Loop

Hover

Click

Path

Keyframes

Offset0%

Opacity0%

Scale0.30

Rotate0°

X offset0px

Y offset0px

Transition

Type

Duration500ms

Delay0ms

Layer stagger0ms

Trigger

Style

Size96px

Stroke2.00

Pos X0px

Pos Y0px

Color