Fluent Icons

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 regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_notebook_lightning_24_regular.svg

Notebook Lightning icon in React

npm install @fluentui/react-icons

import { NotebookLightning24Regular } from "@fluentui/react-icons";

export function Example() {
  return <NotebookLightning24Regular aria-label="Notebook Lightning" />;
}

Notebook Lightning icon in SVG

npm install @fluentui/svg-icons

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

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/notebook_lightning_24_regular.svg" width="24" height="24" alt="Notebook Lightning">

Notebook Lightning icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.NotebookLightning())" />

Notebook Lightning icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.notebook_lightning_24_regular)

Notebook Lightning icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF572;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF572;" FontSize="24" />

Notebook Lightning icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_notebook_lightning_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f572";
  font-size: 24px;
}

Notebook Lightning icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_notebook_lightning_24_regular" />

// Kotlin
R.drawable.ic_fluent_notebook_lightning_24_regular

Notebook Lightning icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .notebookLightning24Regular)

Notebook Lightning icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameNotebook Lightning
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_notebook_lightning_24_regular.svg
Filled fileic_fluent_notebook_lightning_24_filled.svg
React (Regular)NotebookLightning20Regular, NotebookLightning24Regular
React (Filled)NotebookLightning20Filled, NotebookLightning24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

remindersketchjournaldiary

Related icons

NotebookNotebook AddNotebook Arrow Curve DownNotebook ErrorNotebook EyeNotebook Question MarkNotebook SyncNotebook SectionNotebook Section Arrow RightNotebook SubsectionNotepadNotepad Edit