Fluent Icons

Arrow Paragraph icon

The Arrow Paragraph icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 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_arrow_paragraph_24_regular.svg

Arrow Paragraph icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <ArrowParagraph24Regular aria-label="Arrow Paragraph" />;
}

Arrow Paragraph icon in SVG

npm install @fluentui/svg-icons

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

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

Arrow Paragraph icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Arrow Paragraph icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.arrow_paragraph_24_regular)

Arrow Paragraph 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="&#xEEBF;" FontSize="24" />

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

Arrow Paragraph 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_arrow_paragraph_24_regular"></i>

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

Arrow Paragraph icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_arrow_paragraph_24_regular

Arrow Paragraph icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .arrowParagraph24Regular)

Arrow Paragraph 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 Arrow Paragraph 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 { ArrowParagraph24Regular, ArrowParagraph24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowParagraph24Regular aria-label="Arrow Paragraph" />;
}

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_arrow_paragraph_24_regular.svg" width="24" height="24" alt="Arrow Paragraph">

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="M21.25 2C21.6642 2 22 2.33579 22 2.75V6.75C22 8.26878 20.7688 9.5 19.25 9.5H13.5607L16.2803 12.2197C16.5732 12.5126 16.5732 12.9874 16.2803 13.2803C15.9874 13.5732 15.5126 13.5732 15.2197 13.2803L11.2197 9.28033C10.9268 8.98744 10.9268 8.51256 11.2197 8.21967L15.2197 4.21967C15.5126 3.92678 15.9874 3.92678 16.2803 4.21967C16.5732 4.51256 16.5732 4.98744 16.2803 5.28033L13.5607 8H19.25C19.9404 8 20.5 7.44036 20.5 6.75V2.75C20.5 2.33579 20.8358 2 21.25 2ZM7.71967 11.2197C7.42678 11.5126 7.42678 11.9874 7.71967 12.2803L10.4393 15H2.75C2.33579 15 2 15.3358 2 15.75C2 16.1642 2.33579 16.5 2.75 16.5H10.4393L7.71967 19.2197C7.42678 19.5126 7.42678 19.9874 7.71967 20.2803C8.01256 20.5732 8.48744 20.5732 8.78033 20.2803L12.7803 16.2803C13.0732 15.9874 13.0732 15.5126 12.7803 15.2197L8.78033 11.2197C8.48744 10.9268 8.01256 10.9268 7.71967 11.2197Z" fill="currentColor"/></svg>

Details

NameArrow Paragraph
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_arrow_paragraph_24_regular.svg
Filled fileic_fluent_arrow_paragraph_24_filled.svg
React (Regular)ArrowParagraph16Regular, ArrowParagraph20Regular, ArrowParagraph24Regular
React (Filled)ArrowParagraph16Filled, ArrowParagraph20Filled, ArrowParagraph24Filled
LicenseMIT (© Microsoft Corporation)

Related icons

Archive Arrow BackArrow Autofit ContentArrow Autofit DownArrow Autofit HeightArrow Autofit Height DottedArrow Autofit Height InArrow Autofit UpArrow Autofit WidthArrow Autofit Width DottedArrow Between DownArrow Between UpArrow Bidirectional Left Right