Pixelarticons

Align Horizontal Space Between Pixel Art Icon

A horizontal space-between icon for distributing elements with equal gaps between them and edges flush in layout tools.

design Free 4 variants

Tags

alignhorizontalspacebetween

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 Between icon

Elements spread so the first and last sit flush against the container edges and all internal gaps are equal, the visual representation of CSS 'justify-content: space-between'. Use it in a design-tool align panel, a CSS flexbox inspector, or any layout control where you want maximum spread with no outer padding. It is distinct from space-around (which adds half-gaps at edges): here the endpoints touch the boundaries. This icon is most useful in design systems and frontend layout tooling.

Usage

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

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

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

Related icons