light bulb icon

Common uses

• Suggesting a new feature
• Highlighting a helpful tip
• Indicating a solution to a problem

Use it in React

npm i @heroicons/react

import { LightBulbIcon } from '@heroicons/react/24/outline';

<LightBulbIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<LightBulbIcon className="size-6" />

<LightBulbIcon className="size-6" />

<LightBulbIcon className="size-6" />

<LightBulbIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

lightbulbideainspirationsolutiontip

FAQ

What does the light bulb icon represent?

It symbolizes an idea, a solution, or a moment of insight. It's often used for tips, suggestions, or new feature announcements.

How do I use the light bulb icon in React?

Import it from Heroicons and use it as a component: import { LightBulbIcon } from '@heroicons/react/24/outline'; <LightBulbIcon className="h-6 w-6" />

What is the license for Heroicons?

Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.