Layout icons

The 15 layout icons, described

Aisleaisle

The storefront with two shelving runs in it — where things are found in the shop.

Columnscolumns

Columns — content laid out side by side in split panes across the page.

Dashboarddashboard

A dashboard — everything worth watching laid out as panels on one screen.

Dashboard rowdashboard-row

A window with one wide band in it — a row of panels that collapses together.

Document layoutdocument-layout

The photo frame with a title and two columns — where the blocks of a page are.

File formatfile-format

A file format — how the rows are written on disk, which decides what a read costs.

Gridgrid

A grid — items laid out in rows and columns, tiles in a regular layout.

Masonrymasonry

Tiles of different heights packed into two columns — a masonry grid layout.

Bottom panepane-bottom

Bottom pane — the console drawer under everything else in the layout.

Left panepane-left

Left pane — the narrow sidebar on the left does the choosing.

Right panepane-right

Right pane — the details live in the sidebar on the right of the layout.

Spacerspacer

Two edges with a double arrow between them — the spacer that sets the gap in a layout.

Split panesplit-pane

A split pane — two views of the same thing side by side in one window.

Text columnstext-columns

Lines of text set in two columns — a multi-column text layout for long reads.

Z-orderz-order

A Z traced through the grid — z-order clustering that keeps nearby rows together.

In code, each is one import — import { Aisle } from "@iconmind/react/icons/aisle" — and the same name in Vue, Svelte, Solid, Preact, React Native, Astro, Blade and Flutter.

Tags these icons also carry