Layout icons

The 135 layout icons in Interface, described

Accordionaccordion

Three headings with chevrons, one of them open — an accordion of collapsible sections.

Align centeralign-center

Align center — text centred on the line, ragged on both sides.

Align center horizontalalign-center-horizontal

Two boxes centred on a line through their middles — align objects to a shared centre line.

Align center verticalalign-center-vertical

Two boxes centred on a line through their middles — align objects to a shared vertical centre.

Align end horizontalalign-end-horizontal

Two boxes standing on a line below them — align objects to the bottom edge.

Align end verticalalign-end-vertical

Two boxes set against a line to their right — align objects to the right edge.

Align horizontal space betweenalign-horizontal-space-between

Two boxes pushed to the lines at either side — spread objects to the edges with the space between.

Align leftalign-left

Align left — text flush against the left edge, ragged on the right.

Align leftalign-left-obj

Align left — every object's left edge moved to the same line.

Align rightalign-right

Align right — text flush against the right edge, ragged on the left.

Align start horizontalalign-start-horizontal

Two boxes hanging from a line above them — align objects to the top edge.

Align start verticalalign-start-vertical

Two boxes set against a line to their left — align objects to the left edge.

Align vertical space betweenalign-vertical-space-between

Two boxes pushed to the lines above and below — spread objects to the edges with the space between.

Analytics pageanalytics-page

A window with a rising line inside — the analytics page of an app.

Artboardartboard

An artboard — the canvas with its corners marked, the frame you design inside.

Bookmarked pagebookmarked-page

A window with a bookmark inside — a page saved to come back to.

Bottom navigationbottom-nav

A screen with a bar of three destinations along its foot — mobile bottom navigation.

Bottom sheetbottom-sheet

A panel rising from the foot of the screen with a drag handle — a mobile bottom sheet.

Breadcrumb collapsebreadcrumb-collapse

An ellipsis followed by a chevron — a breadcrumb trail collapsed to its last steps.

Bring to frontbring-front

Bring to front — put this object on top of the others in the stack.

Cataloguecatalog

A catalogue — everything there is to pick from, an index to browse.

Collapsecollapse

Collapse — make it smaller, close it up or reduce the view to a summary.

Columnscolumns

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

Component instancecomponent-instance

A diamond inside a frame — an instance of a design component placed on the canvas.

Corner radiuscorner-radius

Corner radius — how round a corner is, the rounding of a shape or a box.

Dependency arrowdependency-arrow

An elbow connector from one task bar to the next — a dependency between items on a timeline.

Distributedistribute

Distribute — spread objects evenly so the spaces between them match.

Dock leftdock-left

A window with an arrow pointing at its left panel — dock a view to the left edge.

Dock rightdock-right

A window with an arrow pointing at its right panel — dock a view to the right edge.

Expandexpand

Expand — make it bigger, open it out or enlarge the view to show more.

Favourite pagefavorite-page

A window with a heart inside — a page marked as a favourite for quick return.

Filtered viewfiltered-view

A window with a funnel inside — a view with a filter applied.

Floating actionfloating-action

A round button floating in the corner of a screen — the floating action button.

Focusfocus

Focus — pay attention to this, target one thing and crop out the rest.

Globeglobe

Globe — the whole world, an international audience or the public internet.

Gridgrid

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

Grid 2×2 addgrid-2x2-add

A four-cell grid with a plus in one cell — add a cell, put another item on the grid.

Grid 2×2 checkgrid-2x2-check

A four-cell grid with a check in one cell — a layout chosen, a grid item confirmed.

Grid 2×2 removegrid-2x2-remove

A four-cell grid with a minus in one cell — take an item off the grid.

Grid viewgrid-view

Grid view — everything shown as tiles or cards in a gallery layout.

Groupgroup

Group — treat several objects as one so they move and select together.

Headingheading

A capital H — a heading, the title that sits above the paragraphs.

Homehome

Home — back to the start page, the index or the main screen of the app.

Infinite scrollinfinite-scroll

Rows of content with a double chevron that keeps going — infinite scrolling and load more.

Kanban cardkanban-card

A card with a title, a line of detail and an assignee — one task on a kanban board.

Kanban columnkanban-column

A tall column holding two cards — one lane of a kanban board.

Kioskkiosk

Kiosk mode — one app standing alone on a public display in a lobby.

Landing pagelanding-page

A window with a flag inside — the page a visitor lands on first.

Layerlayer

A layer — one sheet of a stack, a level in a network or a design.

Layer downlayer-down

Layer down — send an object toward the paper, lowered in the stacking order.

Lock layerlayer-lock

Lock layer — this layer cannot be nudged by accident, fixed in place.

Layer uplayer-up

Layer up — bring an object nearer the eye, raised in the stacking order.

Layerslayers

Layers — things stacked on top of each other in levels, a z-order of panels or objects.

Layoutlayout

Layout — where the parts of a page go, the arrangement of its regions.

Layout dashboardlayout-dashboard

A window split into unequal tiles — a dashboard, widgets of different sizes side by side.

Layout freeformlayout-freeform

A window with boxes of different sizes inside — a freeform canvas, things placed where you like.

Listlist

A list — items shown one after another as bulleted rows down the page.

List addlist-add

Three lines with a plus beside them — add an item to the list.

List checklist-check

Three lines with a check beside them — a list that has been gone through and approved.

List checkslist-checks

Three lines each with a check in front — every item ticked off, a completed checklist.

List filterlist-filter

Three lines with a funnel beside them — filter the list down to the items that match.

List indent decreaselist-indent-decrease

Lines with the middle one pushed in and a chevron pointing left — outdent, lift it one level up.

List indent increaselist-indent-increase

Lines with the middle one pushed in and a chevron pointing right — indent, nest it one level deeper.

List removelist-remove

Three lines with a minus beside them — take an item off the list.

List todolist-todo

Two lines each with an empty box in front — a to-do list, the things still to be done.

List treelist-tree

Lines branching off a trunk — a tree of items, children indented under their parent.

List videolist-video

Three lines with a play button beside them — a playlist, videos queued up in order.

List viewlist-view

List view — everything shown as rows in a list or a table, one item per line.

Locationlocation

Location — a pin marking a place here on the map, where something is.

Login pagelogin-page

A window with a key inside — the sign-in page where you enter your credentials.

Masonrymasonry

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

Maximizemaximize

Maximize — make a window or panel expand to fill the whole space or go fullscreen.

Menumenu

Menu — the hamburger that opens navigation and everything else.

Minimizeminimize

Minimize — shrink a window or panel and give the space back to what is behind it.

Modalmodal

A dialog card floating over the page behind it — a modal that must be dismissed first.

Navbarnavbar

A bar of destinations above the page content — the navigation bar.

Overlapoverlap

Overlap — where both are true at once, the shared intersection.

Page alertpage-alert

A window with an alert mark inside — a page with a warning on it.

Page errorpage-error

A window with an X inside — a page that failed to load or returned an error.

Page idlepage-idle

A window with a Z inside — a page nobody has visited in a while, gone quiet.

Page scrollpage-scroll

A window with a double chevron pointing down — scroll further down the page.

Page verifiedpage-verified

A window with a check inside — a page that passed its checks.

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.

Panelpanel

A panel — one region of the screen with a job, a pane or a side area.

Panel bottompanel-bottom

Panel bottom — a strip across the bottom of a layout, a footer or a tray.

Panel bottom closepanel-bottom-close

A window with a bar across the bottom and a chevron pointing down at it — collapse the bottom panel.

Panel bottom dashedpanel-bottom-dashed

A window with a dashed line across the bottom — where a drawer would go, not yet there.

Panel bottom openpanel-bottom-open

A window with a bar across the bottom and a chevron pointing up — open the bottom panel.

Panel left closepanel-left-close

A window with its left panel and a chevron pointing back at it — collapse the sidebar.

Panel left dashedpanel-left-dashed

A window with a dashed line down its left side — where a sidebar would go, not yet there.

Panel left openpanel-left-open

A window with its left panel and a chevron pointing into the content — open the sidebar.

Panel rightpanel-right

A window with a panel down its right side — an inspector, a detail pane beside the content.

Panel right closepanel-right-close

A window with its right panel and a chevron pointing back at it — collapse the inspector.

Panel right dashedpanel-right-dashed

A window with a dashed line down its right side — where an inspector would go, not yet there.

Panel right openpanel-right-open

A window with its right panel and a chevron pointing into the content — open the inspector.

Panel toppanel-top

Panel top — a strip across the top of a layout, a header or a toolbar.

Panel top closepanel-top-close

A window with a bar across the top and a chevron pointing up at it — collapse the top panel.

Panel top dashedpanel-top-dashed

A window with a dashed line across the top — where a header would go, not yet there.

Panel top openpanel-top-open

A window with a bar across the top and a chevron pointing down — open the top panel.

Picture in picturepicture-in-picture

Picture in picture — the small video window that follows you around the screen.

Protected pageprotected-page

A window with a shield inside — a page behind protection that needs permission.

Responsive moderesponsive-mode

A phone beside a desktop screen — preview a layout across responsive device sizes.

Rulerruler

A ruler — twelve exactly, not about twelve, measured with ticks.

Scrollbarscrollbar

Content with a thumb riding along its right edge — the scrollbar of a long view.

Sidebarsidebar

A sidebar — a column down one side of the screen for navigation or a drawer.

Snap to gridsnap-grid

Snap to grid — let go, and the object lands exactly on the dots.

Spacerspacer

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

Spacingspacing

Spacing — the distance between things, gaps and margins in a layout.

Split panesplit-pane

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

Status barstatus-bar-ui

A phone with its notch and content beneath — the status bar area of a mobile screen.

Sticky headersticky-header

A window whose header stays put above the content — a sticky header.

Close tabtab-close

Close tab — that tab is finished with, dismissed from the bar.

Tab grouptab-group

A tab group — two tabs bundled and travelling together as a set.

New tabtab-new

New tab — open another tab next to the rest in the browser bar.

Tab overflowtab-overflow

Tab overflow — more tabs than the bar can show, hidden behind dots.

Pin tabtab-pin

Pin tab — this tab stays put at the front of the bar and cannot be lost.

Table cells mergetable-cells-merge

A table with arrows pointing into the middle — merge cells into one.

Table columns splittable-columns-split

A table divided down the middle with arrows pushing apart — split a column in two.

Table propertiestable-properties

A table with a header column — properties listed down the left, their values beside.

Table rows splittable-rows-split

A table divided across the middle with arrows pushing apart — split a row in two.

Tagged pagetagged-page

A window with a label inside — a page filed under a tag or category.

Templatetemplate

A template — the shape of a document with the words left out, a form to fill in.

Text columnstext-columns

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

Text cursor inputtext-cursor-input

A text field with the cursor in it — an input, a box waiting to be typed into.

Text quotetext-quote

Quotation marks above two lines — a quotation, somebody else's words set apart.

Text searchtext-search

Lines with a magnifying glass over them — search within the text, find a word on the page.

Text selecttext-select

Two lines inside corner brackets — a text selection, the words picked out to act on.

Text wraptext-wrap

Lines with the last one turning back under the one above — wrap text onto the next line.

Tree viewtree-view

A root with two children hanging from guide lines — a tree view of nested items.

Ungroupungroup

Ungroup — let grouped objects be separate again so each can move on its own.

Widgetwidget

A widget — a small tile or card that shows one thing on a dashboard.

Windowwindow

A window — one app's frame on the screen, a pane you can move and resize.

Workspaceworkspace

A workspace — your desk as you left it, an environment arranged and remembered.

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

Narrow it by tag