Arrow Forward icon

Use the Arrow 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 { ArrowForward24Regular, ArrowForward24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_forward_24_regular.svg" width="24" height="24" alt="Arrow 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="M14.7197 6.28033C14.4268 5.98744 14.4268 5.51256 14.7197 5.21967C15.0126 4.92678 15.4874 4.92678 15.7803 5.21967L20.7803 10.2197C21.0732 10.5126 21.0732 10.9874 20.7803 11.2803L15.7803 16.2803C15.4874 16.5732 15.0126 16.5732 14.7197 16.2803C14.4268 15.9874 14.4268 15.5126 14.7197 15.2197L18.4393 11.5H10.75C7.29822 11.5 4.5 14.2982 4.5 17.75V18.25C4.5 18.6642 4.16421 19 3.75 19C3.33579 19 3 18.6642 3 18.25V17.75C3 13.4698 6.46979 10 10.75 10H18.4393L14.7197 6.28033Z" 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_forward_24_regular.svg";

Details

Keywords

arrowpointdirection