layout dashboard icon

layout-dashboard-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name: layout-dashboard-fill
Set: Keyline Icons
Style: Fill
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

layout-dashboard layout-dashboard-duotone layout-dashboard-sharp layout-dashboard-sharp-duotone layout-dashboard-sharp-fill layout-dashboard-sharp-two-tone layout-dashboard-two-tone

The same icon in other sets

layout-dashboardHuge Icons layout-dashboardLucide layout-dashboardMyna UI Icons layout-dashboardTabler Icons

Use the layout dashboard icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H9C10.10457 2 11 2.89543 11 4V11C11 12.10457 10.10457 13 9 13H4C2.89543 13 2 12.10457 2 11V4C2 2.89543 2.89543 2 4 2ZM4 15H9C10.10457 15 11 15.89543 11 17V20C11 21.10457 10.10457 22 9 22H4C2.89543 22 2 21.10457 2 20V17C2 15.89543 2.89543 15 4 15ZM15 2H20C21.10457 2 22 2.89543 22 4V7C22 8.10457 21.10457 9 20 9H15C13.89543 9 13 8.10457 13 7V4C13 2.89543 13.89543 2 15 2ZM15 11H20C21.10457 11 22 11.89543 22 13V20C22 21.10457 21.10457 22 20 22H15C13.89543 22 13 21.10457 13 20V13C13 11.89543 13.89543 11 15 11Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsLayoutDashboardFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H9C10.10457 2 11 2.89543 11 4V11C11 12.10457 10.10457 13 9 13H4C2.89543 13 2 12.10457 2 11V4C2 2.89543 2.89543 2 4 2ZM4 15H9C10.10457 15 11 15.89543 11 17V20C11 21.10457 10.10457 22 9 22H4C2.89543 22 2 21.10457 2 20V17C2 15.89543 2.89543 15 4 15ZM15 2H20C21.10457 2 22 2.89543 22 4V7C22 8.10457 21.10457 9 20 9H15C13.89543 9 13 8.10457 13 7V4C13 2.89543 13.89543 2 15 2ZM15 11H20C21.10457 11 22 11.89543 22 13V20C22 21.10457 21.10457 22 20 22H15C13.89543 22 13 21.10457 13 20V13C13 11.89543 13.89543 11 15 11Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H9C10.10457 2 11 2.89543 11 4V11C11 12.10457 10.10457 13 9 13H4C2.89543 13 2 12.10457 2 11V4C2 2.89543 2.89543 2 4 2ZM4 15H9C10.10457 15 11 15.89543 11 17V20C11 21.10457 10.10457 22 9 22H4C2.89543 22 2 21.10457 2 20V17C2 15.89543 2.89543 15 4 15ZM15 2H20C21.10457 2 22 2.89543 22 4V7C22 8.10457 21.10457 9 20 9H15C13.89543 9 13 8.10457 13 7V4C13 2.89543 13.89543 2 15 2ZM15 11H20C21.10457 11 22 11.89543 22 13V20C22 21.10457 21.10457 22 20 22H15C13.89543 22 13 21.10457 13 20V13C13 11.89543 13.89543 11 15 11Z"/></svg>
</template>

CSS

.icon-layout-dashboard-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%202H9C10.10457%202%2011%202.89543%2011%204V11C11%2012.10457%2010.10457%2013%209%2013H4C2.89543%2013%202%2012.10457%202%2011V4C2%202.89543%202.89543%202%204%202ZM4%2015H9C10.10457%2015%2011%2015.89543%2011%2017V20C11%2021.10457%2010.10457%2022%209%2022H4C2.89543%2022%202%2021.10457%202%2020V17C2%2015.89543%202.89543%2015%204%2015ZM15%202H20C21.10457%202%2022%202.89543%2022%204V7C22%208.10457%2021.10457%209%2020%209H15C13.89543%209%2013%208.10457%2013%207V4C13%202.89543%2013.89543%202%2015%202ZM15%2011H20C21.10457%2011%2022%2011.89543%2022%2013V20C22%2021.10457%2021.10457%2022%2020%2022H15C13.89543%2022%2013%2021.10457%2013%2020V13C13%2011.89543%2013.89543%2011%2015%2011Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%202H9C10.10457%202%2011%202.89543%2011%204V11C11%2012.10457%2010.10457%2013%209%2013H4C2.89543%2013%202%2012.10457%202%2011V4C2%202.89543%202.89543%202%204%202ZM4%2015H9C10.10457%2015%2011%2015.89543%2011%2017V20C11%2021.10457%2010.10457%2022%209%2022H4C2.89543%2022%202%2021.10457%202%2020V17C2%2015.89543%202.89543%2015%204%2015ZM15%202H20C21.10457%202%2022%202.89543%2022%204V7C22%208.10457%2021.10457%209%2020%209H15C13.89543%209%2013%208.10457%2013%207V4C13%202.89543%2013.89543%202%2015%202ZM15%2011H20C21.10457%2011%2022%2011.89543%2022%2013V20C22%2021.10457%2021.10457%2022%2020%2022H15C13.89543%2022%2013%2021.10457%2013%2020V13C13%2011.89543%2013.89543%2011%2015%2011Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/layout-dashboard-fill.svg?color=%231a73e8&size=48