Position Forward icon

Use the Position Forward 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 { PositionForward24Regular, PositionForward24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PositionForward24Regular aria-label="Position Forward" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_position_forward_24_regular.svg" width="24" height="24" alt="Position Forward">

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="M18.75 22C20.5449 22 22 20.5449 22 18.75L22 10.75C22 8.95508 20.5449 7.5 18.75 7.5H17.5V9H18.75C19.7165 9 20.5 9.7835 20.5 10.75L20.5 18.75C20.5 19.7165 19.7165 20.5 18.75 20.5L10.75 20.5C9.7835 20.5 9 19.7165 9 18.75V17.5H7.5V18.75C7.5 20.5449 8.95507 22 10.75 22L18.75 22ZM13.25 16.5C15.0449 16.5 16.5 15.0449 16.5 13.25L16.5 5.25C16.5 3.45508 15.0449 2 13.25 2L5.25 2C3.45508 2 2 3.45508 2 5.25L2 13.25C2 15.0449 3.45507 16.5 5.25 16.5L13.25 16.5ZM15 13.25C15 14.2165 14.2165 15 13.25 15L12.4692 15L15 12.4692V13.25ZM15 10.469L10.469 15L8.46901 15L15 8.46901L15 10.469ZM6.34769 15L5.25 15C5.01854 15 4.79757 14.9551 4.59534 14.8734L14.8734 4.59535C14.9551 4.79757 15 5.01854 15 5.25V6.34769L6.34769 15ZM3.57829 13.7692C3.52741 13.6051 3.5 13.4308 3.5 13.25L3.5 11.969L11.969 3.5L13.25 3.5C13.4308 3.5 13.6051 3.52741 13.7692 3.5783L3.57829 13.7692ZM3.5 9.84766L3.5 7.96898L7.96898 3.5L9.84766 3.5L3.5 9.84766ZM3.5 5.84766L3.5 5.25C3.5 4.2835 4.2835 3.5 5.25 3.5H5.84766L3.5 5.84766Z" 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/position_forward_24_regular.svg";

Details

Keywords

editcreatelayerforwardbackwardsendtobackbringtofront