Animated React component — BrainCog / BrainCogIcon
Hover the brain-cog icon above to see the default draw animation.
Tree-shakable named import — only the icons you reference end up in your bundle.
import { BrainCog } from "lucide-motion";Also exported as BrainCogIcon for the Lucide-suffix naming convention.
Drop the component into your JSX. The default trigger plays the draw animation on hover.
import { BrainCog } from "lucide-motion";
<BrainCog size={32} />duration={0.2} stagger={0}duration={1.5} stagger={0.4}easing="linear"trigger="mount" repeat={Infinity}The icon's underlying SVG node tree — useful if you need to render or transform it yourself instead of using the component.
[
[
"path",
{
"d": "m10.852 14.772-.383.923"
}
],
[
"path",
{
"d": "m10.852 9.228-.383-.923"
}
],
[
"path",
{
"d": "m13.148 14.772.382.924"
}
],
[
"path",
{
"d": "m13.531 8.305-.383.923"
}
],
[
"path",
{
"d": "m14.772 10.852.923-.383"
}
],
[
"path",
{
"d": "m14.772 13.148.923.383"
}
],
[
"path",
{
"d": "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 0 0-5.63-1.446 3 3 0 0 0-.368 1.571 4 4 0 0 0-2.525 5.771"
}
],
[
"path",
{
"d": "M17.998 5.125a4 4 0 0 1 2.525 5.771"
}
],
[
"path",
{
"d": "M19.505 10.294a4 4 0 0 1-1.5 7.706"
}
],
[
"path",
{
"d": "M4.032 17.483A4 4 0 0 0 11.464 20c.18-.311.892-.311 1.072 0a4 4 0 0 0 7.432-2.516"
}
],
[
"path",
{
"d": "M4.5 10.291A4 4 0 0 0 6 18"
}
],
[
"path",
{
"d": "M6.002 5.125a3 3 0 0 0 .4 1.375"
}
],
[
"path",
{
"d": "m9.228 10.852-.923-.383"
}
],
[
"path",
{
"d": "m9.228 13.148-.923.383"
}
],
[
"circle",
{
"cx": "12",
"cy": "12",
"r": "3"
}
]
]