Arrow Down Left icon

Use the Arrow Down Left 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 { ArrowDownLeft24Regular, ArrowDownLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowDownLeft24Regular aria-label="Arrow Down Left" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M13.2461 21.0049C13.6603 21.0049 13.9961 20.6692 13.9961 20.2549C13.9961 19.8407 13.6603 19.5049 13.2461 19.5049H5.57699L20.7768 4.30517C21.0753 4.00659 21.0753 3.52251 20.7768 3.22393C20.4782 2.92536 19.9941 2.92536 19.6955 3.22393L4.49609 18.4234V10.7549C4.49609 10.3407 4.16031 10.0049 3.74609 10.0049C3.33188 10.0049 2.99609 10.3407 2.99609 10.7549V20.2549C2.99609 20.6692 3.33188 21.0049 3.74609 21.0049H13.2461Z" 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_down_left_24_regular.svg";

Details