Arrow Maximize Vertical icon
Used for expanding content. The Arrow Maximize 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 Maximize 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 { ArrowMaximizeVertical24Regular, ArrowMaximizeVertical24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowMaximizeVertical24Regular aria-label="Arrow Maximize Vertical" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_maximize_vertical_24_regular.svg" width="24" height="24" alt="Arrow Maximize 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="M13.7197 5.78033C14.0126 6.07322 14.4874 6.07322 14.7803 5.78033C15.0732 5.48744 15.0732 5.01256 14.7803 4.71967L12.2803 2.21967C11.9874 1.92678 11.5126 1.92678 11.2197 2.21967L8.71967 4.71967C8.42678 5.01256 8.42678 5.48744 8.71967 5.78033C9.01256 6.07322 9.48744 6.07322 9.78033 5.78033L11 4.56066L11 8.75C11 9.16421 11.3358 9.5 11.75 9.5C12.1642 9.5 12.5 9.16421 12.5 8.75V4.56066L13.7197 5.78033ZM4 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.75ZM12.5 14.75C12.5 14.3358 12.1642 14 11.75 14C11.3358 14 11 14.3358 11 14.75V19.4393L9.78033 18.2197C9.48744 17.9268 9.01256 17.9268 8.71967 18.2197C8.42678 18.5126 8.42678 18.9874 8.71967 19.2803L11.2197 21.7803C11.5126 22.0732 11.9874 22.0732 12.2803 21.7803L14.7803 19.2803C15.0732 18.9874 15.0732 18.5126 14.7803 18.2197C14.4874 17.9268 14.0126 17.9268 13.7197 18.2197L12.5 19.4393V14.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/arrow_maximize_vertical_24_regular.svg";Details
| Name | Arrow Maximize Vertical |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_maximize_vertical_24_regular.svg |
| Filled file | ic_fluent_arrow_maximize_vertical_24_filled.svg |
| React components | ArrowMaximizeVertical24Regular, ArrowMaximizeVertical24Filled |
| License | MIT (© Microsoft Corporation) |