bulb icon

bulb from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: bulb
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

The same icon in other sets

bulb-filledAnt Design Icons bulbBoxIcons v2 bulbBoxIcons v2 Solid bulb-fillEva Icons bulbcss.gg bulbHuge Icons bulbHumbleicons bulb-fillMingCute Icon bulbTabler Icons

Use the bulb icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M288 464h-64a16 16 0 0 0 0 32h64a16 16 0 0 0 0-32m16-48h-96a16 16 0 0 0 0 32h96a16 16 0 0 0 0-32m65.42-353.31C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0 0 96 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v24a16 16 0 0 0 16 16h24a8 8 0 0 0 8-8V274.82a8 8 0 0 0-5.13-7.47A130.7 130.7 0 0 1 208.71 253a16 16 0 1 1 18.58-26c7.4 5.24 21.65 13 28.71 13s21.31-7.78 28.73-13a16 16 0 0 1 18.56 26a130.7 130.7 0 0 1-26.16 14.32a8 8 0 0 0-5.13 7.47V392a8 8 0 0 0 8 8h24a16 16 0 0 0 16-16v-24c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 0 0-46.58-113.31"/></svg>

React

import type { SVGProps } from "react";

export function IonBulb(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M288 464h-64a16 16 0 0 0 0 32h64a16 16 0 0 0 0-32m16-48h-96a16 16 0 0 0 0 32h96a16 16 0 0 0 0-32m65.42-353.31C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0 0 96 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v24a16 16 0 0 0 16 16h24a8 8 0 0 0 8-8V274.82a8 8 0 0 0-5.13-7.47A130.7 130.7 0 0 1 208.71 253a16 16 0 1 1 18.58-26c7.4 5.24 21.65 13 28.71 13s21.31-7.78 28.73-13a16 16 0 0 1 18.56 26a130.7 130.7 0 0 1-26.16 14.32a8 8 0 0 0-5.13 7.47V392a8 8 0 0 0 8 8h24a16 16 0 0 0 16-16v-24c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 0 0-46.58-113.31"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M288 464h-64a16 16 0 0 0 0 32h64a16 16 0 0 0 0-32m16-48h-96a16 16 0 0 0 0 32h96a16 16 0 0 0 0-32m65.42-353.31C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0 0 96 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v24a16 16 0 0 0 16 16h24a8 8 0 0 0 8-8V274.82a8 8 0 0 0-5.13-7.47A130.7 130.7 0 0 1 208.71 253a16 16 0 1 1 18.58-26c7.4 5.24 21.65 13 28.71 13s21.31-7.78 28.73-13a16 16 0 0 1 18.56 26a130.7 130.7 0 0 1-26.16 14.32a8 8 0 0 0-5.13 7.47V392a8 8 0 0 0 8 8h24a16 16 0 0 0 16-16v-24c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 0 0-46.58-113.31"/></svg>
</template>

CSS

.icon-bulb {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%20464h-64a16%2016%200%200%200%200%2032h64a16%2016%200%200%200%200-32m16-48h-96a16%2016%200%200%200%200%2032h96a16%2016%200%200%200%200-32m65.42-353.31C339.35%2032.58%20299.07%2016%20256%2016A159.62%20159.62%200%200%200%2096%20176c0%2046.62%2017.87%2090.23%2049%20119.64l4.36%204.09C167.37%20316.57%20192%20339.64%20192%20360v24a16%2016%200%200%200%2016%2016h24a8%208%200%200%200%208-8V274.82a8%208%200%200%200-5.13-7.47A130.7%20130.7%200%200%201%20208.71%20253a16%2016%200%201%201%2018.58-26c7.4%205.24%2021.65%2013%2028.71%2013s21.31-7.78%2028.73-13a16%2016%200%200%201%2018.56%2026a130.7%20130.7%200%200%201-26.16%2014.32a8%208%200%200%200-5.13%207.47V392a8%208%200%200%200%208%208h24a16%2016%200%200%200%2016-16v-24c0-19.88%2024.36-42.93%2042.15-59.77l4.91-4.66C399.08%20265%20416%20223.61%20416%20176a159.16%20159.16%200%200%200-46.58-113.31%22%2F%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%20464h-64a16%2016%200%200%200%200%2032h64a16%2016%200%200%200%200-32m16-48h-96a16%2016%200%200%200%200%2032h96a16%2016%200%200%200%200-32m65.42-353.31C339.35%2032.58%20299.07%2016%20256%2016A159.62%20159.62%200%200%200%2096%20176c0%2046.62%2017.87%2090.23%2049%20119.64l4.36%204.09C167.37%20316.57%20192%20339.64%20192%20360v24a16%2016%200%200%200%2016%2016h24a8%208%200%200%200%208-8V274.82a8%208%200%200%200-5.13-7.47A130.7%20130.7%200%200%201%20208.71%20253a16%2016%200%201%201%2018.58-26c7.4%205.24%2021.65%2013%2028.71%2013s21.31-7.78%2028.73-13a16%2016%200%200%201%2018.56%2026a130.7%20130.7%200%200%201-26.16%2014.32a8%208%200%200%200-5.13%207.47V392a8%208%200%200%200%208%208h24a16%2016%200%200%200%2016-16v-24c0-19.88%2024.36-42.93%2042.15-59.77l4.91-4.66C399.08%20265%20416%20223.61%20416%20176a159.16%20159.16%200%200%200-46.58-113.31%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/bulb.svg?color=%231a73e8&size=48