Gentleface › Layout & interface › layout-dashboard

layout-dashboard icon

Layout dashboard: dashboard, layout dashboard, widgets, overview. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.707 2.293C6.902 2.488 7 2.724 7 3L7 7C7 7.276 6.902 7.512 6.707 7.707C6.512 7.902 6.276 8 6 8L3 8C2.724 8 2.488 7.902 2.293 7.707C2.098 7.512 2 7.276 2 7L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM9.144 2.144C9.241 2.048 9.359 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5L9 2.5C9 2.359 9.048 2.241 9.144 2.144ZM3 7L6 7L6 3L3 3L3 7ZM13 5L13 3L10 3L10 5L13 5ZM13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 9C9 8.724 9.098 8.488 9.293 8.293C9.488 8.098 9.724 8 10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14ZM10 9L10 13L13 13L13 9L10 9ZM6.856 10.144C6.952 10.241 7 10.359 7 10.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L2.5 14C2.359 14 2.241 13.952 2.144 13.856C2.048 13.759 2 13.641 2 13.5L2 10.5C2 10.359 2.048 10.241 2.144 10.144C2.241 10.048 2.359 10 2.5 10L6.5 10C6.641 10 6.759 10.048 6.856 10.144ZM6 11L3 11L3 13L6 13L6 11Z"/></svg>

React

// Gentleface "layout-dashboard" (line-round), MIT. https://gentleface.com/icons/layout-dashboard
import type { SVGProps } from 'react';

export function LayoutDashboardIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6.707 2.293C6.902 2.488 7 2.724 7 3L7 7C7 7.276 6.902 7.512 6.707 7.707C6.512 7.902 6.276 8 6 8L3 8C2.724 8 2.488 7.902 2.293 7.707C2.098 7.512 2 7.276 2 7L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM9.144 2.144C9.241 2.048 9.359 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5L9 2.5C9 2.359 9.048 2.241 9.144 2.144ZM3 7L6 7L6 3L3 3L3 7ZM13 5L13 3L10 3L10 5L13 5ZM13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 9C9 8.724 9.098 8.488 9.293 8.293C9.488 8.098 9.724 8 10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14ZM10 9L10 13L13 13L13 9L10 9ZM6.856 10.144C6.952 10.241 7 10.359 7 10.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L2.5 14C2.359 14 2.241 13.952 2.144 13.856C2.048 13.759 2 13.641 2 13.5L2 10.5C2 10.359 2.048 10.241 2.144 10.144C2.241 10.048 2.359 10 2.5 10L6.5 10C6.641 10 6.759 10.048 6.856 10.144ZM6 11L3 11L3 13L6 13L6 11Z" />
    </svg>
  );
}

Vue

Vue: see /icons/layout-dashboard.md

Svelte

Svelte: see /icons/layout-dashboard.md

HTML img

HTML img: see /icons/layout-dashboard.md

CSS

CSS: see /icons/layout-dashboard.md

Data URL

Data URL: see /icons/layout-dashboard.md

Sprite

Sprite: see /icons/layout-dashboard.md

SwiftUI

SwiftUI: see /icons/layout-dashboard.md

Compose

Compose: see /icons/layout-dashboard.md

Android XML

Android XML: see /icons/layout-dashboard.md

Flutter

Flutter: see /icons/layout-dashboard.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

dashboard, layout dashboard, widgets, overview, widget

Alternatives

gauge: a performance or speed dashboard, where the speedometer is conventional (speedometer)
grid: a grid view of content (grid-view)
layout-dashboard-plus: add a widget to a dashboard (add-widget)

Don’t confuse with

apps: apps is the app launcher (apps)

Also fits

home: a dashboard as the start screen
analytics: a dashboard of widgets (dashboard)
grid view: a dashboard of widgets (dashboard)
layout: a dashboard of widgets (dashboard)

Not for

treemap (use treemap): equal tiles mean a dashboard

Tags

dashboard, layout, widgets, tiles, panels, overview, home

Category

Layout & interface

Component name

LayoutDashboardIcon

History

2026-10-14 added

Family 32

browser cards columns columns-gear kanban layout layout-dashboard-gear layout-dashboard-pencil layout-dashboard-plus layout-dashboard-sparkle maximize minimize

More layout & interface icons

apps checkbox checkbox-indeterminate checkbox-off cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand hand-grab hand-off hand-pointer input-search · all layout & interface icons

For agents

Metadata: /icons/layout-dashboard.json · Markdown: /icons/layout-dashboard.md · SVG: https://gentleface.com/svg/{style}/16/layout-dashboard.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/layout-dashboard.png

layout-dashboard icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp