lightbulb icon
lightbulb-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- lightbulb-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
lightbulbBootstrap IconslightbulbCodiconslightbulbFramework7 IconslightbulbFont Awesome 6 RegularlightbulbFont Awesome 6 SolidlightbulbFont Awesome RegularlightbulbFont Awesome Solidlightbulb-outlineFlowbite Iconslightbulb-16-filledFluent UI System IconslightbulbFirefox OS EmojilightbulbHuge IconslightbulbIonIconslightbulbJam IconslightbulbLine AwesomelightbulbMaterial Line IconslightbulbLucidelightbulbMaterial SymbolslightbulbMaterial Symbols LightlightbulbMaterial Design IconslightbulbPhosphorlightbulbPixelarticonslightbulbPrime Iconslightbulb-fillRemix Iconlightbulb-boldSolar
Related icons in Fluent UI System Color Icons
Use the lightbulb icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGpxifffbs)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGdAFTsqTR)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGblvOodDP)" d="M8.23 18h7.54l.644-2.783a.25.25 0 0 1 .07-.125c1.83-1.747 2.766-3.704 2.766-5.84a7.25 7.25 0 1 0-14.5 0c0 2.136.936 4.093 2.767 5.84a.25.25 0 0 1 .071.125z"/><path fill="url(#SVGDtYZweND)" d="m8.46 19l-.346-1.5h7.772l-.348 1.5z"/><defs><radialGradient id="SVGpxifffbs" cx="0" cy="0" r="1" gradientTransform="rotate(71.806 -1.52 8.91)scale(14.468 24.6328)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><radialGradient id="SVGblvOodDP" cx="0" cy="0" r="1" gradientTransform="rotate(74.837 .961 6.69)scale(18.226 26.4109)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><linearGradient id="SVGdAFTsqTR" x1="11.999" x2="11.999" y1="18.5" y2="22" gradientUnits="userSpaceOnUse"><stop stop-color="#d34719"/><stop offset="1" stop-color="#d34719" stop-opacity="0"/></linearGradient><linearGradient id="SVGDtYZweND" x1="11.385" x2="12.725" y1="18.095" y2="20.874" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ff9c70"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorLightbulb24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGpxifffbs)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGdAFTsqTR)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGblvOodDP)" d="M8.23 18h7.54l.644-2.783a.25.25 0 0 1 .07-.125c1.83-1.747 2.766-3.704 2.766-5.84a7.25 7.25 0 1 0-14.5 0c0 2.136.936 4.093 2.767 5.84a.25.25 0 0 1 .071.125z"/><path fill="url(#SVGDtYZweND)" d="m8.46 19l-.346-1.5h7.772l-.348 1.5z"/><defs><radialGradient id="SVGpxifffbs" cx="0" cy="0" r="1" gradientTransform="rotate(71.806 -1.52 8.91)scale(14.468 24.6328)" gradientUnits="userSpaceOnUse"><stop stopColor="#ffe06b"/><stop offset=".376" stopColor="#ffa43d"/><stop offset="1" stopColor="#e67505"/></radialGradient><radialGradient id="SVGblvOodDP" cx="0" cy="0" r="1" gradientTransform="rotate(74.837 .961 6.69)scale(18.226 26.4109)" gradientUnits="userSpaceOnUse"><stop stopColor="#ffe06b"/><stop offset=".376" stopColor="#ffa43d"/><stop offset="1" stopColor="#e67505"/></radialGradient><linearGradient id="SVGdAFTsqTR" x1="11.999" x2="11.999" y1="18.5" y2="22" gradientUnits="userSpaceOnUse"><stop stopColor="#d34719"/><stop offset="1" stopColor="#d34719" stopOpacity="0"/></linearGradient><linearGradient id="SVGDtYZweND" x1="11.385" x2="12.725" y1="18.095" y2="20.874" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc7a3"/><stop offset="1" stopColor="#ff9c70"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGpxifffbs)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGdAFTsqTR)" d="M15.247 20.258a2.25 2.25 0 0 1-2.019 1.736l-.173.006h-2.111a2.25 2.25 0 0 1-2.147-1.576l-.046-.168l-.405-1.756h7.308z"/><path fill="url(#SVGblvOodDP)" d="M8.23 18h7.54l.644-2.783a.25.25 0 0 1 .07-.125c1.83-1.747 2.766-3.704 2.766-5.84a7.25 7.25 0 1 0-14.5 0c0 2.136.936 4.093 2.767 5.84a.25.25 0 0 1 .071.125z"/><path fill="url(#SVGDtYZweND)" d="m8.46 19l-.346-1.5h7.772l-.348 1.5z"/><defs><radialGradient id="SVGpxifffbs" cx="0" cy="0" r="1" gradientTransform="rotate(71.806 -1.52 8.91)scale(14.468 24.6328)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><radialGradient id="SVGblvOodDP" cx="0" cy="0" r="1" gradientTransform="rotate(74.837 .961 6.69)scale(18.226 26.4109)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><linearGradient id="SVGdAFTsqTR" x1="11.999" x2="11.999" y1="18.5" y2="22" gradientUnits="userSpaceOnUse"><stop stop-color="#d34719"/><stop offset="1" stop-color="#d34719" stop-opacity="0"/></linearGradient><linearGradient id="SVGDtYZweND" x1="11.385" x2="12.725" y1="18.095" y2="20.874" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ff9c70"/></linearGradient></defs></g></svg> </template>
CSS
.icon-lightbulb-24 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGpxifffbs)%22%20d%3D%22M15.247%2020.258a2.25%202.25%200%200%201-2.019%201.736l-.173.006h-2.111a2.25%202.25%200%200%201-2.147-1.576l-.046-.168l-.405-1.756h7.308z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdAFTsqTR)%22%20d%3D%22M15.247%2020.258a2.25%202.25%200%200%201-2.019%201.736l-.173.006h-2.111a2.25%202.25%200%200%201-2.147-1.576l-.046-.168l-.405-1.756h7.308z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGblvOodDP)%22%20d%3D%22M8.23%2018h7.54l.644-2.783a.25.25%200%200%201%20.07-.125c1.83-1.747%202.766-3.704%202.766-5.84a7.25%207.25%200%201%200-14.5%200c0%202.136.936%204.093%202.767%205.84a.25.25%200%200%201%20.071.125z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDtYZweND)%22%20d%3D%22m8.46%2019l-.346-1.5h7.772l-.348%201.5z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGpxifffbs%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(71.806%20-1.52%208.91)scale(14.468%2024.6328)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffe06b%22%2F%3E%3Cstop%20offset%3D%22.376%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGblvOodDP%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.837%20.961%206.69)scale(18.226%2026.4109)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffe06b%22%2F%3E%3Cstop%20offset%3D%22.376%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGdAFTsqTR%22%20x1%3D%2211.999%22%20x2%3D%2211.999%22%20y1%3D%2218.5%22%20y2%3D%2222%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d34719%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d34719%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGDtYZweND%22%20x1%3D%2211.385%22%20x2%3D%2212.725%22%20y1%3D%2218.095%22%20y2%3D%2220.874%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc7a3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff9c70%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGpxifffbs)%22%20d%3D%22M15.247%2020.258a2.25%202.25%200%200%201-2.019%201.736l-.173.006h-2.111a2.25%202.25%200%200%201-2.147-1.576l-.046-.168l-.405-1.756h7.308z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdAFTsqTR)%22%20d%3D%22M15.247%2020.258a2.25%202.25%200%200%201-2.019%201.736l-.173.006h-2.111a2.25%202.25%200%200%201-2.147-1.576l-.046-.168l-.405-1.756h7.308z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGblvOodDP)%22%20d%3D%22M8.23%2018h7.54l.644-2.783a.25.25%200%200%201%20.07-.125c1.83-1.747%202.766-3.704%202.766-5.84a7.25%207.25%200%201%200-14.5%200c0%202.136.936%204.093%202.767%205.84a.25.25%200%200%201%20.071.125z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDtYZweND)%22%20d%3D%22m8.46%2019l-.346-1.5h7.772l-.348%201.5z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGpxifffbs%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(71.806%20-1.52%208.91)scale(14.468%2024.6328)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffe06b%22%2F%3E%3Cstop%20offset%3D%22.376%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGblvOodDP%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.837%20.961%206.69)scale(18.226%2026.4109)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffe06b%22%2F%3E%3Cstop%20offset%3D%22.376%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGdAFTsqTR%22%20x1%3D%2211.999%22%20x2%3D%2211.999%22%20y1%3D%2218.5%22%20y2%3D%2222%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d34719%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d34719%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGDtYZweND%22%20x1%3D%2211.385%22%20x2%3D%2212.725%22%20y1%3D%2218.095%22%20y2%3D%2220.874%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc7a3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff9c70%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/lightbulb-24.svg?color=%231a73e8&size=48
