Arrow Curve Down Left icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_curve_down_left_24_regular.svg" width="24" height="24" alt="Arrow Curve 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="M16.4012 3.37802C16.1957 3.01839 15.7375 2.89344 15.3779 3.09895C13.109 4.39542 11.9867 6.05212 11.4569 7.80854C10.9888 9.36083 10.9943 10.9741 10.9991 12.3513C10.9995 12.4866 11 12.6196 11 12.7501V18.4394L7.28033 14.7197C6.98744 14.4268 6.51256 14.4268 6.21967 14.7197C5.92678 15.0126 5.92678 15.4875 6.21967 15.7804L11.2197 20.7803C11.5126 21.0732 11.9874 21.0732 12.2803 20.7803L17.2803 15.7804C17.5732 15.4875 17.5732 15.0126 17.2803 14.7197C16.9874 14.4268 16.5126 14.4268 16.2197 14.7197L12.5 18.4394V12.7501C12.5 12.6234 12.4997 12.4968 12.4994 12.3704C12.4962 10.9589 12.493 9.56807 12.8931 8.24165C13.3133 6.84808 14.191 5.50481 16.1221 4.4013C16.4817 4.19579 16.6067 3.73766 16.4012 3.37802Z" 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_curve_down_left_24_regular.svg";

Details

Keywords

pointdirectionupdownhorizontal