Proportions Pixel Art Icon
A proportions icon for aspect-ratio controls, resize handles, scale-lock settings, and responsive layout tools.
Style variants
base
Outline · rounded corners
sharp
Outline · sharp corners
Base, sharp, solid or glyph: see how the four styles differ and which to use.
About the Proportions icon
A shape or set of nested rectangles illustrating the relationship between width and height. Design tools use it next to aspect-ratio lock buttons, responsive breakpoint controls, and canvas scale settings. It signals that the user is managing how dimensions relate to each other rather than setting absolute values. For setting a single width or height, a ruler or resize arrow is clearer; reach for proportions when the UI is specifically about maintaining or adjusting the ratio between two measurements.
Usage
<!-- HTML -->
<img src="pixelarticons/svg/proportions.svg" width="24" height="24" alt="Proportions" />
<!-- React -->
import { Proportions } from 'pixelarticons/react'
<!-- Sizes: 24px, 48px, 72px, 96px (multiples of 24) -->
<img src="proportions.svg" width="48" height="48" style="image-rendering: pixelated" />