flower-2

Animated React component — Flower2 / Flower2Icon

Hover the flower-2 icon above to see the default draw animation.

Import

Tree-shakable named import — only the icons you reference end up in your bundle.

import { Flower2 } from "lucide-motion";

Also exported as Flower2Icon for the Lucide-suffix naming convention.

Quick start

Drop the component into your JSX. The default trigger plays the draw animation on hover.

import { Flower2 } from "lucide-motion";

<Flower2 size={32} />

Timing presets · hover to play

Snappy

duration={0.2} stagger={0}

Cinematic

duration={1.5} stagger={0.4}

Linear

easing="linear"

Spinner

trigger="mount" repeat={Infinity}

Raw node data

The icon's underlying SVG node tree — useful if you need to render or transform it yourself instead of using the component.

Show IconNode[]

[
  [
    "path",
    {
      "d": "M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1"
    }
  ],
  [
    "circle",
    {
      "cx": "12",
      "cy": "8",
      "r": "2"
    }
  ],
  [
    "path",
    {
      "d": "M12 10v12"
    }
  ],
  [
    "path",
    {
      "d": "M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z"
    }
  ],
  [
    "path",
    {
      "d": "M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z"
    }
  ]
]