Document Page Number icon

Used to represent page number placement in files. Contains placement variants. The Document Page Number 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

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_document_page_number_24_regular.svg

Document Page Number icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <DocumentPageNumber24Regular aria-label="Document Page Number" />;
}

Document Page Number icon in SVG

npm install @fluentui/svg-icons

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

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

Document Page Number icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Document Page Number icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.document_page_number_24_regular)

Document Page Number 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="&#xF3A4;" FontSize="24" />

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

Document Page Number 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_document_page_number_24_regular"></i>

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

Document Page Number icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_document_page_number_24_regular

Document Page Number icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .documentPageNumber24Regular)

Document Page Number 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 Document Page Number 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 { DocumentPageNumber24Regular, DocumentPageNumber24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentPageNumber24Regular aria-label="Document Page Number" />;
}

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_document_page_number_24_regular.svg" width="24" height="24" alt="Document Page Number">

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="M17.744 1.99609C18.9349 1.99609 19.9097 2.92126 19.9888 4.09205L19.994 4.24609V19.7442C19.994 20.935 19.0689 21.9098 17.8981 21.989L17.744 21.9942H6.24414C5.05328 21.9942 4.0785 21.069 3.99933 19.8982L3.99414 19.7442V4.24609C3.99414 3.05523 4.9193 2.08045 6.09009 2.00128L6.24414 1.99609H17.744ZM17.744 3.49609H6.24414C5.86444 3.49609 5.55065 3.77825 5.50099 4.14432L5.49414 4.24609V19.7442C5.49414 20.1239 5.77629 20.4377 6.14237 20.4873L6.24414 20.4942H17.744C18.1237 20.4942 18.4375 20.212 18.4872 19.8459L18.494 19.7442V4.24609C18.494 3.8664 18.2119 3.5526 17.8458 3.50294L17.744 3.49609ZM13.0182 16.0192C12.6091 15.9544 12.3299 15.5702 12.3947 15.1611L12.4993 14.5003H11.018L10.8762 15.3957C10.8115 15.8048 10.4273 16.0839 10.0182 16.0192C9.60906 15.9544 9.32992 15.5702 9.3947 15.1611L9.49933 14.5003H8.74933C8.33512 14.5003 7.99933 14.1645 7.99933 13.7503C7.99933 13.3361 8.33512 13.0003 8.74933 13.0003H9.73684L9.97434 11.5003H9.24933C8.83512 11.5003 8.49933 11.1645 8.49933 10.7503C8.49933 10.3361 8.83512 10.0003 9.24933 10.0003H10.2118L10.4112 8.74108C10.476 8.33196 10.8602 8.05282 11.2693 8.1176C11.6784 8.18238 11.9575 8.56654 11.8928 8.97566L11.7305 10.0003H13.2118L13.4112 8.74108C13.476 8.33196 13.8602 8.05282 14.2693 8.1176C14.6784 8.18238 14.9575 8.56655 14.8928 8.97566L14.7305 10.0003H15.2493C15.6635 10.0003 15.9993 10.3361 15.9993 10.7503C15.9993 11.1645 15.6635 11.5003 15.2493 11.5003H14.493L14.2555 13.0003H14.7493C15.1635 13.0003 15.4993 13.3361 15.4993 13.7503C15.4993 14.1645 15.1635 14.5003 14.7493 14.5003H14.018L13.8762 15.3957C13.8115 15.8048 13.4273 16.0839 13.0182 16.0192ZM11.493 11.5003L11.2555 13.0003H12.7368L12.9743 11.5003H11.493Z" fill="currentColor"/></svg>

Details

NameDocument Page Number
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_document_page_number_24_regular.svg
Filled fileic_fluent_document_page_number_24_filled.svg
React (Regular)DocumentPageNumber20Regular, DocumentPageNumber24Regular
React (Filled)DocumentPageNumber20Filled, DocumentPageNumber24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

paperworkfileanaloghorizontal

Related icons