Notebook Lightning icon
Used in general organized note scenarios. The Notebook Lightning icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Notebook Lightning 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 { NotebookLightning24Regular, NotebookLightning24Filled } from "@fluentui/react-icons";
export function Example() {
return <NotebookLightning24Regular aria-label="Notebook Lightning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_notebook_lightning_24_regular.svg" width="24" height="24" alt="Notebook Lightning"> 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="M16.749 2C17.9916 2 18.999 3.00736 18.999 4.25V19.75C18.999 20.9926 17.9916 22 16.749 22H7.97439L9.28814 20.5H16.749C17.1632 20.5 17.499 20.1642 17.499 19.75V4.25C17.499 3.83579 17.1632 3.5 16.749 3.5H6.25012C5.83591 3.5 5.50012 3.83579 5.50012 4.25V11H5.31753C4.76596 11 4.26151 11.3024 4.00012 11.7827V4.25C4.00012 3.00736 5.00748 2 6.25012 2H16.749ZM20.0001 15.0019H20.7501C21.1298 15.0019 21.4436 15.2841 21.4933 15.6502L21.5001 15.7519V17.25C21.5001 17.6297 21.218 17.9435 20.8519 17.9932L20.7501 18H20.0001V15.0019ZM20.0001 11.0019H20.7501C21.1298 11.0019 21.4436 11.2841 21.4933 11.6502L21.5001 11.7519V13.25C21.5001 13.6297 21.218 13.9435 20.8519 13.9932L20.7501 14H20.0001V11.0019ZM20.0001 7.00194H20.7501C21.1298 7.00194 21.4436 7.28409 21.4933 7.65017L21.5001 7.75194V9.25C21.5001 9.6297 21.218 9.94349 20.8519 9.99315L20.7501 10H20.0001V7.00194ZM15.249 5C15.6632 5 15.999 5.33579 15.999 5.75V8.2485C15.999 8.66272 15.6632 8.9985 15.249 8.9985H7.75012C7.33591 8.9985 7.00012 8.66272 7.00012 8.2485V5.75C7.00012 5.33579 7.33591 5 7.75012 5H15.249ZM14.499 6.5H8.50012V7.4985H14.499V6.5ZM5.31767 12H10.1453C10.5277 12 10.7685 12.4118 10.5811 12.7451L8.7502 16H10.2463C10.8909 16 11.2352 16.7593 10.8105 17.2441L5.98666 22.7519C5.48211 23.328 4.54401 22.8375 4.72916 22.0945L5.5002 19H2.49767C2.13127 19 1.88931 18.6189 2.04516 18.2873L4.86516 12.2873C4.94758 12.112 5.1239 12 5.31767 12Z" 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/notebook_lightning_24_regular.svg";Details
| Name | Notebook Lightning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_notebook_lightning_24_regular.svg |
| Filled file | ic_fluent_notebook_lightning_24_filled.svg |
| React components | NotebookLightning24Regular, NotebookLightning24Filled |
| License | MIT (© Microsoft Corporation) |