Fluent Icons

Note Edit icon

Used in general note taking scenarios. The Note Edit 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_note_edit_24_regular.svg

Note Edit icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <NoteEdit24Regular aria-label="Note Edit" />;
}

Note Edit icon in SVG

npm install @fluentui/svg-icons

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

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

Note Edit icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Note Edit icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.note_edit_24_regular)

Note Edit 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="&#xE86F;" FontSize="24" />

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

Note Edit 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_note_edit_24_regular"></i>

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

Note Edit icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_note_edit_24_regular

Note Edit icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .noteEdit24Regular)

Note Edit 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 Note Edit 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 { NoteEdit24Regular, NoteEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <NoteEdit24Regular aria-label="Note Edit" />;
}

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_note_edit_24_regular.svg" width="24" height="24" alt="Note Edit">

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="M3 17.75C3 19.5449 4.45507 21 6.25 21H11.1651L11.5209 19.5768C11.5273 19.5511 11.534 19.5255 11.541 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V11H7.75L7.93442 10.9949C9.64354 10.8992 11 9.48303 11 7.75V4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V11.2324C19.9789 11.0419 20.4935 10.9685 21 11.0122V6.25C21 4.45507 19.5449 3 17.75 3H10.8713C10.2746 3 9.70229 3.23705 9.28033 3.65901L3.65901 9.28033C3.23705 9.70229 3 10.2746 3 10.8713V17.75ZM7.75 9.5H5.561L9.5 5.561V7.75L9.4942 7.89353C9.42119 8.79289 8.66817 9.5 7.75 9.5ZM19.0999 12.6695L13.1974 18.5719C12.8533 18.916 12.6092 19.3472 12.4911 19.8194L12.0334 21.6501C11.8344 22.4462 12.5556 23.1674 13.3517 22.9683L15.1824 22.5106C15.6545 22.3926 16.0857 22.1485 16.4299 21.8043L22.3323 15.9019C23.2249 15.0093 23.2249 13.5621 22.3323 12.6695C21.4397 11.7768 19.9925 11.7768 19.0999 12.6695Z" fill="currentColor"/></svg>

Details

NameNote Edit
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_note_edit_24_regular.svg
Filled fileic_fluent_note_edit_24_filled.svg
React (Regular)NoteEdit20Regular, NoteEdit24Regular
React (Filled)NoteEdit20Filled, NoteEdit24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

sketchreminderpencil

Related icons

NoteNote AddNote PinNotepad EditColumn EditColumn Triple EditEditEdit Arrow BackEdit Line Horizontal 3Edit LockEdit OffEdit Person