cannabis-off

Animated React component — CannabisOff / CannabisOffIcon

Hover the cannabis-off icon above to see the default draw animation.

Import

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

import { CannabisOff } from "lucide-motion";

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

Quick start

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

import { CannabisOff } from "lucide-motion";

<CannabisOff 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 22v-4c1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5"
    }
  ],
  [
    "path",
    {
      "d": "M13.988 8.327C13.902 6.054 13.365 3.82 12 2a9.3 9.3 0 0 0-1.445 2.9"
    }
  ],
  [
    "path",
    {
      "d": "M17.375 11.725C18.882 10.53 21 7.841 21 6c-2.324 0-5.08 1.296-6.662 2.684"
    }
  ],
  [
    "path",
    {
      "d": "m2 2 20 20"
    }
  ],
  [
    "path",
    {
      "d": "M21.024 15.378A15 15 0 0 0 22 15c-.426-1.279-2.67-2.557-4.25-2.907"
    }
  ],
  [
    "path",
    {
      "d": "M6.995 6.992C5.714 6.4 4.29 6 3 6c0 2 2.5 5 4 6-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3"
    }
  ]
]