Fluent Icons

Lightbulb icon

Used in tooltip, sharing knowledge, or AI suggested scenarios. The Lightbulb icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled, color and light styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Lightbulb Color

Color

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_lightbulb_24_regular.svg

Lightbulb icon in React

npm install @fluentui/react-icons

import { Lightbulb24Regular } from "@fluentui/react-icons";

export function Example() {
  return <Lightbulb24Regular aria-label="Lightbulb" />;
}

Lightbulb icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/lightbulb_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/lightbulb_24_regular.svg" width="24" height="24" alt="Lightbulb">

Lightbulb icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Lightbulb())" />

Lightbulb icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.lightbulb_24_regular)

Lightbulb icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF4D7;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF4D7;" FontSize="24" />

Lightbulb icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_lightbulb_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f4d7";
  font-size: 24px;
}

Lightbulb icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_lightbulb_24_regular" />

// Kotlin
R.drawable.ic_fluent_lightbulb_24_regular

Lightbulb icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .lightbulb24Regular)

Lightbulb icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Lightbulb 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 { Lightbulb24Regular, Lightbulb24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Lightbulb24Regular aria-label="Lightbulb" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_lightbulb_24_regular.svg" width="24" height="24" alt="Lightbulb">

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 2.00098C16.0041 2.00098 19.25 5.24691 19.25 9.25098C19.25 11.347 18.3493 13.2707 16.5869 14.9929C16.51 15.0681 16.4504 15.1586 16.4118 15.2582L16.3804 15.3605L15.2493 20.2561C15.0266 21.22 14.2035 21.9183 13.2302 21.993L13.057 21.9996H10.9433C9.95374 21.9996 9.08791 21.3545 8.79629 20.4228L8.75088 20.2555L7.62132 15.3607C7.58904 15.2208 7.51728 15.0931 7.41456 14.9928C5.73515 13.3526 4.83778 11.5297 4.75613 9.54923L4.75 9.25098L4.75388 9.01166C4.88014 5.11837 8.07601 2.00098 12 2.00098ZM14.115 18.499H9.884L10.2125 19.9182C10.2831 20.2245 10.5357 20.4504 10.8401 20.4925L10.9433 20.4996H13.057C13.3713 20.4996 13.6481 20.3044 13.7577 20.0174L13.7878 19.9184L14.115 18.499ZM12 3.50098C8.89821 3.50098 6.37006 5.95699 6.25415 9.03042L6.25 9.25098L6.25672 9.52799C6.33286 11.0913 7.05722 12.5471 8.46262 13.9197C8.72675 14.1777 8.92265 14.496 9.03422 14.846L9.08291 15.0235L9.538 16.999H14.461L14.9189 15.0228C15.0019 14.6634 15.1718 14.3309 15.4124 14.0539L15.5386 13.9201C16.9432 12.5475 17.6672 11.0916 17.7433 9.52803L17.75 9.25098L17.7458 9.03042C17.6299 5.95699 15.1018 3.50098 12 3.50098Z" fill="currentColor"/></svg>

Details

NameLightbulb
StylesRegular (outlined), Filled, Color, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_lightbulb_24_regular.svg
Filled fileic_fluent_lightbulb_24_filled.svg
Color fileic_fluent_lightbulb_24_color.svg
React (Regular)Lightbulb16Regular, Lightbulb20Regular, Lightbulb24Regular, Lightbulb28Regular, Lightbulb32Regular, Lightbulb48Regular
React (Filled)Lightbulb16Filled, Lightbulb20Filled, Lightbulb24Filled, Lightbulb28Filled, Lightbulb32Filled, Lightbulb48Filled
React (Color)Lightbulb16Color, Lightbulb20Color, Lightbulb24Color, Lightbulb28Color, Lightbulb32Color, Lightbulb48Color
React (Light)Lightbulb32Light
LicenseMIT (© Microsoft Corporation)

Keywords

lightknowledgesmart

Related icons

Lightbulb CheckmarkLightbulb CircleLightbulb FilamentLightbulb PulsePerson LightbulbBook Open LightbulbLightbulb PersonLightbulb SparkleBook OpenBook Open MicrophoneBrightness HighBrightness Low