rocket

Animated React component — Rocket / RocketIcon

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

Import

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

import { Rocket } from "lucide-motion";

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

Quick start

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

import { Rocket } from "lucide-motion";

<Rocket 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 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
    }
  ],
  [
    "path",
    {
      "d": "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"
    }
  ],
  [
    "path",
    {
      "d": "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"
    }
  ],
  [
    "path",
    {
      "d": "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"
    }
  ]
]