broccoli

Animated React component — Broccoli / BroccoliIcon

Hover the broccoli icon above to see the default draw animation.

Import

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

import { Broccoli } from "lucide-motion";

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

Quick start

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

import { Broccoli } from "lucide-motion";

<Broccoli 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": "M10 13a3 3 0 0 1-2.121-5.121"
    }
  ],
  [
    "path",
    {
      "d": "M15.606 14.204c-3.5 1.5-5.899 4.503-8.899 7.503A1 1 0 0 1 6 22c-2 0-4-2-4-4a1 1 0 0 1 .293-.707c1.911-1.911 3.823-3.578 5.347-5.441"
    }
  ],
  [
    "path",
    {
      "d": "M16.573 14.737A4 4 0 0 1 14 11"
    }
  ],
  [
    "path",
    {
      "d": "M7.14 10.907a4 4 0 1 1 2.756-7.43A4 4 0 0 1 16.7 4.48a2 2 0 0 1 2.82 2.82 4 4 0 0 1 1.002 6.805A4 4 0 1 1 13 16"
    }
  ]
]