Fluent Icons

Arrow Collapse All icon

Used for content collapsing. The Arrow Collapse All icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_arrow_collapse_all_24_regular.svg

Arrow Collapse All icon in React

npm install @fluentui/react-icons

import { ArrowCollapseAll24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ArrowCollapseAll24Regular aria-label="Arrow Collapse All" />;
}

Arrow Collapse All icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/arrow_collapse_all_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/arrow_collapse_all_24_regular.svg" width="24" height="24" alt="Arrow Collapse All">

Arrow Collapse All icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.ArrowCollapseAll())" />

Arrow Collapse All icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.arrow_collapse_all_24_regular)

Arrow Collapse All icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE0B1;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE0B1;" FontSize="24" />

Arrow Collapse All icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_arrow_collapse_all_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e0b1";
  font-size: 24px;
}

Arrow Collapse All icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_arrow_collapse_all_24_regular" />

// Kotlin
R.drawable.ic_fluent_arrow_collapse_all_24_regular

Arrow Collapse All icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .arrowCollapseAll24Regular)

Arrow Collapse All icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Arrow Collapse All 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 { ArrowCollapseAll24Regular, ArrowCollapseAll24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowCollapseAll24Regular aria-label="Arrow Collapse All" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_collapse_all_24_regular.svg" width="24" height="24" alt="Arrow Collapse All">

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="M2 4.75C2 4.33579 2.33579 4 2.75 4H21.25C21.6642 4 22 4.33579 22 4.75C22 5.16421 21.6642 5.5 21.25 5.5H2.75C2.33579 5.5 2 5.16421 2 4.75ZM12 8.75C12 8.33579 12.3358 8 12.75 8H21.25C21.6642 8 22 8.33579 22 8.75C22 9.16421 21.6642 9.5 21.25 9.5H12.75C12.3358 9.5 12 9.16421 12 8.75ZM7.28033 8.21967C7.13968 8.07902 6.94891 8 6.75 8C6.55109 8 6.36032 8.07902 6.21967 8.21967L3.21967 11.2197C2.92678 11.5126 2.92678 11.9874 3.21967 12.2803C3.51256 12.5732 3.98744 12.5732 4.28033 12.2803L6 10.5607V19.25C6 19.6642 6.33579 20 6.75 20C7.16421 20 7.5 19.6642 7.5 19.25V10.5607L9.21967 12.2803C9.51256 12.5732 9.98744 12.5732 10.2803 12.2803C10.5732 11.9874 10.5732 11.5126 10.2803 11.2197L7.28033 8.21967Z" fill="currentColor"/></svg>

Details

NameArrow Collapse All
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_arrow_collapse_all_24_regular.svg
Filled fileic_fluent_arrow_collapse_all_24_filled.svg
React (Regular)ArrowCollapseAll16Regular, ArrowCollapseAll20Regular, ArrowCollapseAll24Regular
React (Filled)ArrowCollapseAll16Filled, ArrowCollapseAll20Filled, ArrowCollapseAll24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

arrowpointdirectionkeyboardtext

Related icons

Arrow Expand AllArrow Reply AllArrow Enter LeftArrow Enter UpArrow Repeat AllArrow Repeat All OffArrow ClockwiseArrow Clockwise DashesArrow Clockwise Dashes SettingsArrow CounterclockwiseArrow Counterclockwise DashesArrow Down Right