Contract Up Right icon

Use the Contract Up Right 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 { ContractUpRight24Regular, ContractUpRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ContractUpRight24Regular aria-label="Contract Up Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_contract_up_right_24_regular.svg" width="24" height="24" alt="Contract Up Right">

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="M6.25 3C4.45507 3 3 4.45507 3 6.25V10.25C3 10.6642 3.33579 11 3.75 11C4.16421 11 4.5 10.6642 4.5 10.25V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H12V9.75C12 10.9926 13.0074 12 14.25 12H19.5V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H13.75C13.3358 19.5 13 19.8358 13 20.25C13 20.6642 13.3358 21 13.75 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM13.5 9.75V4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V10.5H14.25C13.8358 10.5 13.5 10.1642 13.5 9.75ZM3 13.75C3 14.1642 3.33579 14.5 3.75 14.5H8.43934L3.21967 19.7197C2.92678 20.0126 2.92678 20.4874 3.21967 20.7803C3.51256 21.0732 3.98744 21.0732 4.28033 20.7803L9.5 15.5607V20.25C9.5 20.6642 9.83579 21 10.25 21C10.6642 21 11 20.6642 11 20.25V13.75C11 13.3358 10.6642 13 10.25 13H3.75C3.33579 13 3 13.3358 3 13.75Z" 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_up_right_24_regular.svg";

Details

Keywords

windowscalefitsnapdeploy