Arrow Paragraph icon

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

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>

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/arrow_paragraph_24_regular.svg";

Details