Flow Arrow icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_flow_arrow_24_regular.svg" width="24" height="24" alt="Flow Arrow">

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="M5 2C6.30585 2 7.41406 2.83532 7.82617 4H16.75C19.0972 4 21 5.90279 21 8.25C21 10.5972 19.0972 12.5 16.75 12.5H7.25C5.73122 12.5 4.5 13.7312 4.5 15.25C4.5 16.7688 5.73122 18 7.25 18H18.4395L16.7197 16.2803C16.4268 15.9874 16.4268 15.5126 16.7197 15.2197C17.0126 14.9268 17.4874 14.9268 17.7803 15.2197L20.7803 18.2197C21.0732 18.5126 21.0732 18.9874 20.7803 19.2803L17.7803 22.2803C17.4874 22.5732 17.0126 22.5732 16.7197 22.2803C16.4268 21.9874 16.4268 21.5126 16.7197 21.2197L18.4395 19.5H7.25C4.90279 19.5 3 17.5972 3 15.25C3 12.9028 4.90279 11 7.25 11H16.75C18.2688 11 19.5 9.76878 19.5 8.25C19.5 6.73122 18.2688 5.5 16.75 5.5H7.95801C7.71993 6.91882 6.48647 8 5 8C3.34315 8 2 6.65685 2 5C2 3.34315 3.34315 2 5 2ZM5 3.5C4.17157 3.5 3.5 4.17157 3.5 5C3.5 5.82843 4.17157 6.5 5 6.5C5.82843 6.5 6.5 5.82843 6.5 5C6.5 4.17157 5.82843 3.5 5 3.5Z" 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/flow_arrow_24_regular.svg";

Details