dumbbell

Animated React component — Dumbbell / DumbbellIcon

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

Import

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

import { Dumbbell } from "lucide-motion";

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

Quick start

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

import { Dumbbell } from "lucide-motion";

<Dumbbell 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": "M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829z"
    }
  ],
  [
    "path",
    {
      "d": "m2.5 21.5 1.4-1.4"
    }
  ],
  [
    "path",
    {
      "d": "m20.1 3.9 1.4-1.4"
    }
  ],
  [
    "path",
    {
      "d": "M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829z"
    }
  ],
  [
    "path",
    {
      "d": "m9.6 14.4 4.8-4.8"
    }
  ]
]