Book Open Lightbulb icon

Use the Book Open Lightbulb 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 { BookOpenLightbulb24Regular, BookOpenLightbulb24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BookOpenLightbulb24Regular aria-label="Book Open Lightbulb" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_book_open_lightbulb_24_regular.svg" width="24" height="24" alt="Book Open Lightbulb">

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="M20.9004 21L20.7412 21.7939C20.601 22.495 19.9854 22.9999 19.2705 23H18.7295C18.0146 22.9999 17.399 22.495 17.2588 21.7939L17.0996 21H20.9004ZM10 4C10.788 4 11.4986 4.33129 12 4.8623C12.5014 4.33129 13.212 4 14 4H20.25C21.2165 4 22 4.7835 22 5.75V12C21.5523 11.6637 21.0465 11.4001 20.5 11.2285V5.75C20.5 5.61193 20.3881 5.5 20.25 5.5H14C13.3096 5.5 12.75 6.05964 12.75 6.75V17.25C12.75 17.9404 13.3096 18.5 14 18.5H14.6719C14.9801 19.0316 15.3822 19.5016 15.8564 19.8857L15.8799 20H14C13.212 20 12.5014 19.6687 12 19.1377C11.4986 19.6687 10.788 20 10 20H3.75C2.7835 20 2 19.2165 2 18.25V5.75C2 4.7835 2.7835 4 3.75 4H10ZM19 12C21.2091 12 23 13.7909 23 16C23 17.3806 22.3002 18.5976 21.2363 19.3164L21.0996 20H16.9004L16.7637 19.3164C15.6998 18.5976 15 17.3806 15 16C15 13.7909 16.7909 12 19 12ZM3.75 5.5C3.61193 5.5 3.5 5.61193 3.5 5.75V18.25C3.5 18.3881 3.61193 18.5 3.75 18.5H10C10.6904 18.5 11.25 17.9404 11.25 17.25V6.75C11.25 6.05964 10.6904 5.5 10 5.5H3.75Z" 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/book_open_lightbulb_24_regular.svg";

Details