Arrow Minimize icon

Use the Arrow Minimize 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 { ArrowMinimize24Regular, ArrowMinimize24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowMinimize24Regular aria-label="Arrow Minimize" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_minimize_24_regular.svg" width="24" height="24" alt="Arrow Minimize">

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="M10.25 13C10.6642 13 11 13.3358 11 13.75V21.25C11 21.6642 10.6642 22 10.25 22C9.83579 22 9.5 21.6642 9.5 21.25V15.5605L3.28027 21.7803C2.98738 22.0732 2.51262 22.0732 2.21973 21.7803C1.92683 21.4874 1.92683 21.0126 2.21973 20.7197L8.43945 14.5H2.75C2.33579 14.5 2 14.1642 2 13.75C2 13.3358 2.33579 13 2.75 13H10.25ZM20.7197 2.21973C21.0126 1.92683 21.4874 1.92683 21.7803 2.21973C22.0732 2.51262 22.0732 2.98738 21.7803 3.28027L15.5605 9.5H21.25C21.6642 9.5 22 9.83579 22 10.25C22 10.6642 21.6642 11 21.25 11H13.75C13.3358 11 13 10.6642 13 10.25V2.75C13 2.33579 13.3358 2 13.75 2C14.1642 2 14.5 2.33579 14.5 2.75V8.43945L20.7197 2.21973Z" 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_minimize_24_regular.svg";

Details

Keywords

pointdirectionfitscalediagonal