Lightbulb icon

fxemoji:lightbulb

The Lightbulb icon (fxemoji:lightbulb) is a free SVG icon from the Firefox OS Emoji set by Mozilla. It is drawn on a 512 × 512 grid. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Firefox OS Emoji
Author: Mozilla
License: Apache-2.0
Size: 512 × 512
Category: Objects

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#FFE46A" d="M411.111 183.926c0-87.791-68.91-158.959-153.914-158.959S103.283 96.136 103.283 183.926c0 39.7 14.093 75.999 37.392 103.856h-.001l33.666 61.027c8.793 16.28 12.057 26.792 26.792 26.792h109.774c14.736 0 19.071-11.07 26.792-26.792l36.022-61.027h-.002c23.299-27.857 37.393-64.156 37.393-103.856"/><path fill="#FFF0B7" d="M112.805 203.285c0-90.721 68.378-165.701 157.146-177.719a151 151 0 0 0-13.319-.599c-85.004 0-153.914 71.169-153.914 158.959c0 28.89 7.469 55.974 20.512 79.319c-6.75-18.749-10.425-38.932-10.425-59.96"/><path fill="#FFDA00" d="M411.111 184.266c0-31.445-8.843-60.755-24.097-85.428a160.4 160.4 0 0 1 4.917 39.416c0 104.454-101.138 189.522-227.481 192.967l9.89 17.929c8.793 16.28 12.057 26.792 26.792 26.792h109.774c14.736 0 19.071-11.07 26.792-26.792l36.022-61.027h-.002c23.299-27.858 37.393-64.157 37.393-103.857"/><path fill="#FAAF63" d="M321.905 211.203c.149-.131.297-.251.447-.395c2.787-2.667 5.082-6.921 3.161-10.867c-7.879-16.176-31.97-21.308-49.524-15.951q-1.333.406-2.588.885c-9.562-5.583-21.434-6.925-32.001-3.569a35 35 0 0 0-3.678 1.394c-5.785-3.38-12.552-5.066-19.294-4.414c-14.112 1.365-26.375 12.81-28.805 26.752l-1.112.688c9.617 15.541 34.93 60.071 36.552 79.233c2.045 24.174.002 89.793-.019 90.453l11.994.379c.086-2.723 2.086-66.978-.019-91.844c-.938-11.087-7.722-28.758-20.164-52.521c-5.807-11.092-11.445-20.83-14.858-26.576c2.36-7.646 9.61-13.848 17.586-14.619c2.429-.235 4.893.037 7.251.729a22.7 22.7 0 0 0-2.32 3.638c-4.047 7.935-2.356 17.898 3.933 23.176c3.725 3.125 9.137 4.276 14.127 3c4.647-1.188 8.239-4.242 9.854-8.379c1.451-3.718 1.328-8.01-.367-12.756a30.7 30.7 0 0 0-4.05-7.655a28.1 28.1 0 0 1 13.61.744c-1.715 1.975-3.027 4.173-3.89 6.556c-1.844 5.101-1.029 11.163 2.128 15.822c2.721 4.016 6.856 6.403 11.348 6.551q.226.008.45.008c3.935 0 7.67-1.692 10.562-4.797c3.397-3.647 5.126-8.71 4.624-13.544c-.319-3.073-1.412-6.079-3.172-8.867c12.236-2.223 24.205 1.911 29.383 8.186c-3.125 5.2-9.542 16.11-16.178 28.785c-12.441 23.764-19.227 41.435-20.164 52.521c-2.104 24.866-.104 89.121-.019 91.844l11.994-.379c-.021-.66-2.064-66.275-.019-90.453c1.459-17.251 22.113-55.046 33.237-73.758m-80.657-3.171c-.279.716-1.331 1.035-1.647 1.116c-1.25.319-2.665.086-3.442-.565c-2.015-1.691-2.453-5.599-.957-8.532a11.2 11.2 0 0 1 1.85-2.583c1.611 1.828 2.892 3.926 3.707 6.208c.665 1.86.843 3.449.489 4.356m32.19.654c-.351.375-1.065.992-1.839.976c-.831-.027-1.489-.819-1.808-1.289c-.993-1.467-1.312-3.527-.776-5.009c.618-1.71 1.811-3.109 3.203-4.235c1.55 1.751 2.501 3.634 2.688 5.434c.144 1.371-.447 3.027-1.468 4.123"/><path fill="#6B83A5" d="M315.932 402.701H197.897c-6.6 0-12 5.4-12 12v6.957c0 6.6 5.4 12 12 12h38.122c-11.367 4.229-23.369 14.285-23.369 25.946v4.68c9.123 10.254 17.619 28.081 33.802 28.081h21.89c12.748 0 21.804-13.762 32.836-28.081v-4.68c0-11.661-11.451-21.717-22.548-25.946h37.302c6.6 0 12-5.4 12-12v-6.957c0-6.6-5.4-12-12-12"/><path fill="#ABBDDB" d="M324.406 402.701H189.423c-6.6 0-12-5.4-12-12v-6.957c0-6.6 5.4-12 12-12h134.983c6.6 0 12 5.4 12 12v6.957c0 6.6-5.4 12-12 12m-7.007 49.915v-6.957c0-6.6-5.4-12-12-12H208.43c-6.6 0-12 5.4-12 12v6.957c0 6.6 5.4 12 12 12h96.969c6.6 0 12-5.4 12-12"/></svg>

How to use the Lightbulb icon

React

import { Icon } from "@iconify/react";

<Icon icon="fxemoji:lightbulb" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fxemoji:lightbulb" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fxemoji:lightbulb" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fxemoji--lightbulb]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fxemoji -->
<div class="i-fxemoji:lightbulb"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fxemoji:lightbulb"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fxemoji/lightbulb.svg" alt="Lightbulb icon" width="24" height="24">

Lightbulb icon in other icon sets

Lightbulb icon FAQ

Is the Lightbulb icon free for commercial use?

Yes. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.

How do I use the Lightbulb icon in React?

Install @iconify/react and render <Icon icon="fxemoji:lightbulb" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Lightbulb icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fxemoji/lightbulb.svg" alt="Lightbulb icon">, or paste the SVG code inline to style it with CSS.

Browse all Firefox OS Emoji icons →