Contract Down Left icon

Use the Contract 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 { ContractDownLeft24Regular, ContractDownLeft24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_contract_down_left_24_regular.svg" width="24" height="24" alt="Contract 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="M4.5 6.25V12H9.25C10.7688 12 12 13.2312 12 14.75V19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V13.75C19.5 13.3358 19.8358 13 20.25 13C20.6642 13 21 13.3358 21 13.75V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H10.25C10.6642 3 11 3.33579 11 3.75C11 4.16421 10.6642 4.5 10.25 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25ZM4.5 13.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H10.5V14.75C10.5 14.0596 9.94036 13.5 9.25 13.5H4.5ZM15.5607 9.5H20.25C20.6642 9.5 21 9.83579 21 10.25C21 10.6642 20.6642 11 20.25 11H13.7495C13.3353 11 12.9995 10.6642 12.9995 10.25V3.75C12.9995 3.33579 13.3353 3 13.7495 3C14.1638 3 14.4995 3.33579 14.4995 3.75V8.43979L19.7197 3.21967C20.0126 2.92678 20.4874 2.92678 20.7803 3.21967C21.0732 3.51256 21.0732 3.98744 20.7803 4.28033L15.5607 9.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/contract_down_left_24_regular.svg";

Details

Keywords

windowscalefitsnap