Arrow Minimize Vertical icon (Filled & Regular)

#fluent-icon The Arrow Minimize Vertical 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 Minimize Vertical 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 { ArrowMinimizeVertical24Regular, ArrowMinimizeVertical24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.75 2C12.1642 2 12.5 2.33579 12.5 2.75V6.93934L13.7197 5.71967C14.0126 5.42678 14.4874 5.42678 14.7803 5.71967C15.0732 6.01256 15.0732 6.48744 14.7803 6.78033L12.2803 9.28033C11.9874 9.57322 11.5126 9.57322 11.2197 9.28033L8.71967 6.78033C8.42678 6.48744 8.42678 6.01256 8.71967 5.71967C9.01256 5.42678 9.48744 5.42678 9.78033 5.71967L11 6.93934V2.75C11 2.33579 11.3358 2 11.75 2Z" fill="currentColor"/>
<path d="M4 11.75C4 11.3358 4.33579 11 4.75 11H19.25C19.6642 11 20 11.3358 20 11.75C20 12.1642 19.6642 12.5 19.25 12.5H4.75C4.33579 12.5 4 12.1642 4 11.75Z" fill="currentColor"/>
<path d="M13.7197 17.7803C14.0126 18.0732 14.4874 18.0732 14.7803 17.7803C15.0732 17.4874 15.0732 17.0126 14.7803 16.7197L12.2803 14.2197C11.9874 13.9268 11.5126 13.9268 11.2197 14.2197L8.71967 16.7197C8.42678 17.0126 8.42678 17.4874 8.71967 17.7803C9.01256 18.0732 9.48744 18.0732 9.78033 17.7803L11 16.5607L11 21.25C11 21.6642 11.3358 22 11.75 22C12.1642 22 12.5 21.6642 12.5 21.25V16.5607L13.7197 17.7803Z" 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_vertical_24_regular.svg";

Details

Name	Arrow Minimize Vertical
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_arrow_minimize_vertical_24_regular.svg`
Filled file	`ic_fluent_arrow_minimize_vertical_24_filled.svg`
React components	`ArrowMinimizeVertical24Regular, ArrowMinimizeVertical24Filled`
License	MIT (© Microsoft Corporation)

Arrow Minimize Vertical icon

Use the Arrow Minimize Vertical icon in React

Use it in HTML

Use it from the SVG package

Details

Related icons