108 new icons just landed: the full A to Z alphabet. See what's new →
Pixelarticons

Collapse Pixel Art Icon

A collapse icon for hiding expanded panels, folding sidebar sections, or shrinking open drawers in application layouts.

Arrows Pro 1 variant

Tags

collapsedirectionpointernavigation

Style variants

base

Outline · rounded corners

Get Pro

Base, sharp, solid or glyph: see how the four styles differ and which to use.

This is a Pro icon.

Get it with all 4431 pixel art icons: every style, full SVG source, one-time license.

Whole team? Team Unlimited covers everyone.

Get Pro

About the Collapse icon

An icon depicting inward or shrinking arrows that signal 'close this expanded area.' Use it on the toggle that collapses a sidebar, folds an expanded panel back to its header, or closes a detail drawer. The expand icon is its counterpart for the reverse action. Keeping these two visually symmetric helps users understand the reversibility of the action; a tooltip or label can clarify 'collapse' versus 'close' if the panel can also be dismissed entirely.

Usage

<!-- HTML -->
<img src="pixelarticons/svg/collapse.svg" width="24" height="24" alt="Collapse" />

<!-- React -->
import { Collapse } from 'pixelarticons/react'

<!-- Sizes: 24px, 48px, 72px, 96px (multiples of 24) -->
<img src="collapse.svg" width="48" height="48" style="image-rendering: pixelated" />

Related icons