Pixelarticons

Ruler Dimension Pixel Art Icon

A ruler with dimension arrows for spacing controls, measurement annotations, canvas rulers, and design-spec overlays.

design Pro 4 variants

Tags

rulerdimension

Style variants

base

Outline · rounded corners

Get Pro

sharp

Outline · sharp corners

Get Pro

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 Ruler Dimension icon

A ruler combined with dimension arrows on both ends, indicating precise measurement and spacing. It appears in design tools for toggling the measurement overlay, in engineering drawing apps for annotating distances, and in layout panels for controlling spacing and gap values. When the context is simply drawing a straight line, a plain line tool icon is less ambiguous; ruler-dimension is most useful for any UI element that exposes actual numeric measurements or dimension annotations.

Usage

<!-- HTML -->
<img src="pixelarticons/svg/ruler-dimension.svg" width="24" height="24" alt="Ruler Dimension" />

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

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

Related icons