Pixelarticons

Align Vertical Space Around Pixel Art Icon

A vertical space-around icon for distributing stacked elements with equal margins top and bottom along the vertical axis.

design Free 4 variants

Tags

alignverticalspacearound

Style variants

base

Outline · rounded corners

sharp

Outline · sharp corners

glyph

Filled · sharp corners

Get Pro

solid

Filled · rounded corners

Get Pro

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

About the Align Vertical Space Around icon

Stacked elements with equal space above and below each item, so the outer gaps are half the size of inner gaps, mirroring CSS 'justify-content: space-around' on the vertical axis. Use it in a design tool's distribution panel or a CSS vertical-flex inspector to apply this specific spacing model to a column of objects. When you need outer and inner gaps to be identical, align-vertical-space-between is the relevant contrast: its endpoints sit flush against the container edges.

Usage

<!-- HTML -->
<img src="pixelarticons/svg/align-vertical-space-around.svg" width="24" height="24" alt="Align Vertical Space Around" />

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

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

Related icons