Lightbulb Circle icon
Used in tooltip, sharing knowledge, or AI suggested scenarios. The Lightbulb Circle icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Lightbulb Circle icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { LightbulbCircle24Regular, LightbulbCircle24Filled } from "@fluentui/react-icons";
export function Example() {
return <LightbulbCircle24Regular aria-label="Lightbulb Circle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_lightbulb_circle_24_regular.svg" width="24" height="24" alt="Lightbulb Circle"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 5.20192C14.7614 5.20192 17 7.4405 17 10.2019C17 11.7383 16.3017 13.1615 15.1098 14.117L15.142 14.089L14.3774 17.4565C14.2233 18.1241 13.6925 18.6315 12.9979 18.7671L12.8466 18.7904L12.6909 18.7981H11.3091C10.575 18.7981 9.92282 18.3353 9.66511 17.6064L9.62209 17.4542L8.856 14.088L8.70145 13.9593C7.76934 13.1412 7.16573 11.9985 7.02868 10.7289L7.00753 10.4733L7 10.2019C7 7.4405 9.23858 5.20192 12 5.20192ZM13.17 16H10.828L11.0734 17.0777L11.0918 17.1451C11.1241 17.2363 11.2113 17.2981 11.3091 17.2981L12.6481 17.2993L12.7179 17.2965C12.814 17.2855 12.8938 17.2145 12.9152 17.1216L13.17 16ZM12 6.70192C10.067 6.70192 8.5 8.26893 8.49969 10.1803L8.50596 10.4083C8.56761 11.4723 9.10905 12.4368 9.96451 13.049C10.1137 13.1558 10.2186 13.3136 10.2593 13.4926L10.488 14.502L10.5288 14.5H13.4712L13.51 14.502L13.7396 13.4938C13.771 13.356 13.8404 13.2306 13.939 13.1314L14.0183 13.0621L14.1879 12.934C15.0119 12.2731 15.5 11.2784 15.5 10.2019C15.5 8.26893 13.933 6.70192 12 6.70192Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/lightbulb_circle_24_regular.svg";Details
| Name | Lightbulb Circle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_lightbulb_circle_24_regular.svg |
| Filled file | ic_fluent_lightbulb_circle_24_filled.svg |
| React components | LightbulbCircle24Regular, LightbulbCircle24Filled |
| License | MIT (© Microsoft Corporation) |