Pixelarticons

Align Horizontal Space Around Pixel Art Icon

A horizontal space-around icon for distributing elements with equal margins on all sides along the horizontal axis.

design Free 4 variants

Tags

alignhorizontalspacearound

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 Horizontal Space Around icon

Objects arranged horizontally so that each has equal space on both its left and right, matching CSS 'justify-content: space-around'. The outer elements have half the gap of the inner gaps. Use it in a design tool or CSS visual inspector to achieve this specific spacing pattern in a horizontal flex row. When outer and inner gaps should all be equal, align-horizontal-space-between is the distinction to watch; space-around places half-gaps at the edges rather than flush alignment.

Usage

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

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

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

Related icons