lightbulb-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.

Name
lightbulb-48
Set
Fluent UI System Color Icons
Style
48
Viewbox
48×48
License
MIT

5 other variants in Fluent UI System Color Icons

The same icon in other sets

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 48 48"><g fill="none"><path fill="url(#SVGY4NOAdos1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGkEoPNb4Q1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGcRzpadEt1)" d="M24 4C15.992 4 9.5 10.492 9.5 18.5c0 4.235 1.817 8.047 4.71 10.696c.448.41.748.873.87 1.349L16.479 36H31.52l1.399-5.455c.122-.476.422-.938.87-1.35A14.47 14.47 0 0 0 38.5 18.5C38.5 10.492 32.008 4 24 4"/><path fill="url(#SVGLzbGmZVi1)" d="M31.65 35.5h-15.3l.642 2.5h14.016z"/><defs><radialGradient id="SVGY4NOAdos1" cx="0" cy="0" r="1" gradientTransform="rotate(71.907 -2.992 17.838)scale(28.9188 49.0014)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><radialGradient id="SVGcRzpadEt1" cx="0" cy="0" r="1" gradientTransform="rotate(74.838 1.924 13.377)scale(36.4552 52.8221)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><linearGradient id="SVGkEoPNb4Q1" x1="23.999" x2="24" y1="37" y2="44" gradientUnits="userSpaceOnUse"><stop stop-color="#d34719"/><stop offset="1" stop-color="#d34719" stop-opacity="0"/></linearGradient><linearGradient id="SVGLzbGmZVi1" x1="22.79" x2="24.788" y1="36.493" y2="41.386" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ff9c70"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorLightbulb48(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGY4NOAdos1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGkEoPNb4Q1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGcRzpadEt1)" d="M24 4C15.992 4 9.5 10.492 9.5 18.5c0 4.235 1.817 8.047 4.71 10.696c.448.41.748.873.87 1.349L16.479 36H31.52l1.399-5.455c.122-.476.422-.938.87-1.35A14.47 14.47 0 0 0 38.5 18.5C38.5 10.492 32.008 4 24 4"/><path fill="url(#SVGLzbGmZVi1)" d="M31.65 35.5h-15.3l.642 2.5h14.016z"/><defs><radialGradient id="SVGY4NOAdos1" cx="0" cy="0" r="1" gradientTransform="rotate(71.907 -2.992 17.838)scale(28.9188 49.0014)" gradientUnits="userSpaceOnUse"><stop stopColor="#ffe06b"/><stop offset=".376" stopColor="#ffa43d"/><stop offset="1" stopColor="#e67505"/></radialGradient><radialGradient id="SVGcRzpadEt1" cx="0" cy="0" r="1" gradientTransform="rotate(74.838 1.924 13.377)scale(36.4552 52.8221)" gradientUnits="userSpaceOnUse"><stop stopColor="#ffe06b"/><stop offset=".376" stopColor="#ffa43d"/><stop offset="1" stopColor="#e67505"/></radialGradient><linearGradient id="SVGkEoPNb4Q1" x1="23.999" x2="24" y1="37" y2="44" gradientUnits="userSpaceOnUse"><stop stopColor="#d34719"/><stop offset="1" stopColor="#d34719" stopOpacity="0"/></linearGradient><linearGradient id="SVGLzbGmZVi1" x1="22.79" x2="24.788" y1="36.493" y2="41.386" 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 48 48"><g fill="none"><path fill="url(#SVGY4NOAdos1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGkEoPNb4Q1)" d="m31.265 37l-.88 3.43a4.75 4.75 0 0 1-4.6 3.57h-3.57a4.75 4.75 0 0 1-4.6-3.57l-.88-3.43z"/><path fill="url(#SVGcRzpadEt1)" d="M24 4C15.992 4 9.5 10.492 9.5 18.5c0 4.235 1.817 8.047 4.71 10.696c.448.41.748.873.87 1.349L16.479 36H31.52l1.399-5.455c.122-.476.422-.938.87-1.35A14.47 14.47 0 0 0 38.5 18.5C38.5 10.492 32.008 4 24 4"/><path fill="url(#SVGLzbGmZVi1)" d="M31.65 35.5h-15.3l.642 2.5h14.016z"/><defs><radialGradient id="SVGY4NOAdos1" cx="0" cy="0" r="1" gradientTransform="rotate(71.907 -2.992 17.838)scale(28.9188 49.0014)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><radialGradient id="SVGcRzpadEt1" cx="0" cy="0" r="1" gradientTransform="rotate(74.838 1.924 13.377)scale(36.4552 52.8221)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><linearGradient id="SVGkEoPNb4Q1" x1="23.999" x2="24" y1="37" y2="44" gradientUnits="userSpaceOnUse"><stop stop-color="#d34719"/><stop offset="1" stop-color="#d34719" stop-opacity="0"/></linearGradient><linearGradient id="SVGLzbGmZVi1" x1="22.79" x2="24.788" y1="36.493" y2="41.386" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ff9c70"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-lightbulb-48 {
  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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGY4NOAdos1)%22%20d%3D%22m31.265%2037l-.88%203.43a4.75%204.75%200%200%201-4.6%203.57h-3.57a4.75%204.75%200%200%201-4.6-3.57l-.88-3.43z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkEoPNb4Q1)%22%20d%3D%22m31.265%2037l-.88%203.43a4.75%204.75%200%200%201-4.6%203.57h-3.57a4.75%204.75%200%200%201-4.6-3.57l-.88-3.43z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGcRzpadEt1)%22%20d%3D%22M24%204C15.992%204%209.5%2010.492%209.5%2018.5c0%204.235%201.817%208.047%204.71%2010.696c.448.41.748.873.87%201.349L16.479%2036H31.52l1.399-5.455c.122-.476.422-.938.87-1.35A14.47%2014.47%200%200%200%2038.5%2018.5C38.5%2010.492%2032.008%204%2024%204%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLzbGmZVi1)%22%20d%3D%22M31.65%2035.5h-15.3l.642%202.5h14.016z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGY4NOAdos1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(71.907%20-2.992%2017.838)scale(28.9188%2049.0014)%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%22SVGcRzpadEt1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.838%201.924%2013.377)scale(36.4552%2052.8221)%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%22SVGkEoPNb4Q1%22%20x1%3D%2223.999%22%20x2%3D%2224%22%20y1%3D%2237%22%20y2%3D%2244%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%22SVGLzbGmZVi1%22%20x1%3D%2222.79%22%20x2%3D%2224.788%22%20y1%3D%2236.493%22%20y2%3D%2241.386%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGY4NOAdos1)%22%20d%3D%22m31.265%2037l-.88%203.43a4.75%204.75%200%200%201-4.6%203.57h-3.57a4.75%204.75%200%200%201-4.6-3.57l-.88-3.43z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkEoPNb4Q1)%22%20d%3D%22m31.265%2037l-.88%203.43a4.75%204.75%200%200%201-4.6%203.57h-3.57a4.75%204.75%200%200%201-4.6-3.57l-.88-3.43z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGcRzpadEt1)%22%20d%3D%22M24%204C15.992%204%209.5%2010.492%209.5%2018.5c0%204.235%201.817%208.047%204.71%2010.696c.448.41.748.873.87%201.349L16.479%2036H31.52l1.399-5.455c.122-.476.422-.938.87-1.35A14.47%2014.47%200%200%200%2038.5%2018.5C38.5%2010.492%2032.008%204%2024%204%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLzbGmZVi1)%22%20d%3D%22M31.65%2035.5h-15.3l.642%202.5h14.016z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGY4NOAdos1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(71.907%20-2.992%2017.838)scale(28.9188%2049.0014)%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%22SVGcRzpadEt1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.838%201.924%2013.377)scale(36.4552%2052.8221)%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%22SVGkEoPNb4Q1%22%20x1%3D%2223.999%22%20x2%3D%2224%22%20y1%3D%2237%22%20y2%3D%2244%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%22SVGLzbGmZVi1%22%20x1%3D%2222.79%22%20x2%3D%2224.788%22%20y1%3D%2236.493%22%20y2%3D%2241.386%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-48.svg?color=%231a73e8&size=48