Lightbulb Person icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.57114 14.0257 8.66814 14.1419 8.7525 14.2662C9.72943 13.776 10.8325 13.5 12 13.5C13.168 13.5 14.2715 13.7762 15.2487 14.2668C15.2989 14.1928 15.3535 14.1217 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.50098ZM14.7608 15.7049C13.9414 15.2555 13.0005 15 12 15C10.9997 15 10.0591 15.2554 9.23981 15.7046L9.538 16.999H14.461L14.7608 15.7049ZM12 7.5C11.0335 7.5 10.25 8.2835 10.25 9.25C10.25 10.2165 11.0335 11 12 11C12.9665 11 13.75 10.2165 13.75 9.25C13.75 8.2835 12.9665 7.5 12 7.5ZM8.75 9.25C8.75 7.45507 10.2051 6 12 6C13.7949 6 15.25 7.45507 15.25 9.25C15.25 11.0449 13.7949 12.5 12 12.5C10.2051 12.5 8.75 11.0449 8.75 9.25Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

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

Details

Keywords

schooltraveleducationinsightsbrightilluminatingshine