Arrow Outline Down Left icon
Used for shapes on canvas. The Arrow Outline Down Left icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Outline 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 { ArrowOutlineDownLeft24Regular, ArrowOutlineDownLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowOutlineDownLeft24Regular aria-label="Arrow Outline Down Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_outline_down_left_24_regular.svg" width="24" height="24" alt="Arrow Outline 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="M3.50306 19.9984C3.47121 20.285 3.71339 20.5272 4 20.4954L16.0616 19.1552C16.4366 19.1135 16.5969 18.6566 16.3301 18.3898L14.5324 16.592C14.2395 16.2991 14.2395 15.8242 14.5324 15.5313L20.3664 9.69733C20.5421 9.5216 20.5421 9.23667 20.3664 9.06093L14.9372 3.6318C14.7615 3.45607 14.4766 3.45607 14.3008 3.6318L8.46683 9.4658C8.17394 9.75869 7.69906 9.75869 7.40617 9.4658L5.60868 7.66831C5.34187 7.4015 4.88491 7.5618 4.84324 7.93682L3.50306 19.9984ZM4.16565 21.9862C2.92367 22.1242 1.87423 21.0748 2.01223 19.8328L3.35241 7.77117C3.53298 6.14609 5.51316 5.45147 6.66934 6.60765L7.9365 7.87481L13.2402 2.57114C14.0017 1.80962 15.2364 1.80962 15.9979 2.57114L21.427 8.00027C22.1885 8.76179 22.1885 9.99647 21.427 10.758L16.1234 16.0617L17.3908 17.3291C18.547 18.4853 17.8524 20.4655 16.2273 20.646L4.16565 21.9862Z" 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_outline_down_left_24_regular.svg";Details
| Name | Arrow Outline Down Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_outline_down_left_24_regular.svg |
| Filled file | ic_fluent_arrow_outline_down_left_24_filled.svg |
| React components | ArrowOutlineDownLeft24Regular, ArrowOutlineDownLeft24Filled |
| License | MIT (© Microsoft Corporation) |