Arrow Forward Down Person icon

Use the Arrow Forward Down Person 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 { ArrowForwardDownPerson24Regular, ArrowForwardDownPerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_forward_down_person_24_regular.svg" width="24" height="24" alt="Arrow Forward Down Person">

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="M19.69 9.50065L16.727 6.53769C16.4341 6.2448 16.4341 5.76993 16.727 5.47703C16.9933 5.21077 17.41 5.18656 17.7036 5.40441L17.7877 5.47703L22.0303 9.71967C22.2966 9.98594 22.3208 10.4026 22.1029 10.6962L22.0303 10.7803L17.7877 15.023C17.4948 15.3159 17.0199 15.3159 16.727 15.023C16.4608 14.7567 16.4366 14.34 16.6544 14.0464L16.727 13.9623L19.69 11.0006L14 11C9.8021 11 6.38375 7.66238 6.25383 3.49602L6.25 3.25C6.25 2.83579 6.58579 2.5 7 2.5C7.41421 2.5 7.75 2.83579 7.75 3.25C7.75 6.62507 10.4252 9.37531 13.7709 9.49588L14 9.5L19.69 9.50065ZM9 13.5002C9 14.881 7.88071 16.0002 6.5 16.0002C5.11929 16.0002 4 14.881 4 13.5002C4 12.1195 5.11929 11.0002 6.5 11.0002C7.88071 11.0002 9 12.1195 9 13.5002ZM11 18.8752C11 20.4317 9.71429 22.0002 6.5 22.0002C3.28571 22.0003 2 20.4376 2 18.8752V18.7722C2 17.7932 2.79368 17.0002 3.77273 17.0002H9.22727C10.2063 17.0002 11 17.7932 11 18.7722V18.8752Z" 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_down_person_24_regular.svg";

Details

Keywords

arrowpointdirection