Gentleface › Layout & interface › layout-dashboard-sparkle

layout-dashboard-sparkle icon

Layout dashboard sparkle: ai dashboard, generate dashboard. 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 5ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16ZM2.144 10.144C2.241 10.048 2.359 10 2.5 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3 11L3 13L6.5 13C6.641 13 6.759 13.048 6.856 13.144C6.952 13.241 7 13.359 7 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.144Z"/></svg>

React

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

export function LayoutDashboardSparkleIcon(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 5ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16ZM2.144 10.144C2.241 10.048 2.359 10 2.5 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3 11L3 13L6.5 13C6.641 13 6.759 13.048 6.856 13.144C6.952 13.241 7 13.359 7 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.144Z" />
    </svg>
  );
}

Vue

Vue: see /icons/layout-dashboard-sparkle.md

Svelte

Svelte: see /icons/layout-dashboard-sparkle.md

HTML img

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

CSS

CSS: see /icons/layout-dashboard-sparkle.md

Data URL

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

Sprite

Sprite: see /icons/layout-dashboard-sparkle.md

SwiftUI

SwiftUI: see /icons/layout-dashboard-sparkle.md

Compose

Compose: see /icons/layout-dashboard-sparkle.md

Android XML

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

Flutter

Flutter: see /icons/layout-dashboard-sparkle.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

ai dashboard, generate dashboard

Example

Generate a dashboard from a prompt

Built from

layout-dashboard + sparkle

Tags

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

Category

Layout & interface

Component name

LayoutDashboardSparkleIcon

History

2026-10-15 added

Family 32

layout-dashboard browser cards columns columns-gear kanban layout layout-dashboard-gear layout-dashboard-pencil layout-dashboard-plus 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-sparkle.json · Markdown: /icons/layout-dashboard-sparkle.md · SVG: https://gentleface.com/svg/{style}/16/layout-dashboard-sparkle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/layout-dashboard-sparkle.png

layout-dashboard-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp