IconEnergyHas a state

Lightbulb icon

The Lightbulb icon is an animated React icon from ReactFrame: a 24×24 drawing with a 1.5px stroke that moves when its button or card is hovered, and switches to a “On” state with the active prop. Copy it as SVG or JSX, download the .svg file, or install it with the shadcn CLI. It's free.

Also known asideabrightlightsflashlightbulbslightingledenergy

Hover to play

Style

Stroke1.5

Animation

State

Static file: /icons/svg/lightbulb.svg

Install

Copied!

npx shadcn@latest add @reactframe/lightbulb-icon

Use it

import { useState } from "react";
import { motion } from "motion/react";
import { LightbulbIcon } from "@/components/lightbulb-icon";

export function Example() {
  const [on, setOn] = useState(false);
  // Hovering the button plays the icon; `active` switches it to its "On" state.
  return (
    <motion.button initial="rest" whileHover="hover" onClick={() => setOn(!on)}>
      <LightbulbIcon size={20} active={on} />
      Lightbulb
    </motion.button>
  );
}

Details

Component: LightbulbIcon
Category: Energy
Canvas: 24 × 24, 2px padding
Stroke: 1.5 (adjustable), round caps and joins
Styles: Stroke, duotone, static, pixel
State: “On” via the active prop
Dependencies: motion

More energy icons