grid icon

grid from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name
grid
Set
Framework7 Icons
Style
Outline
Viewbox
56×56
License
MIT

The same icon in other sets

gridAkar IconsgridBootstrap IconsgridBoxIcons v2gridBoxIcons v2 SolidgridCarbongrid-fillEva IconsgridFeather Iconsgrid-16-filledFluent UI System IconsgridHuge IconsgridIonIconsgridJam IconsgridMaterial Design Iconsgrid-fillMingCute IcongridPixelarticonsgridRadix Iconsgrid-fillRemix IcongridUniconsgridUnicons MonochromegridUnicons Solid

Related icons in Framework7 Icons

grid-circle

Use the grid icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.21 38.184h10.36v10.172c0 1.148.68 1.851 1.782 1.851c1.078 0 1.757-.703 1.757-1.852v-10.17H34.75v10.172c0 1.148.68 1.851 1.781 1.851c1.078 0 1.758-.703 1.758-1.852V38.185h10.523c1.149 0 1.852-.68 1.852-1.782s-.703-1.758-1.852-1.758H38.29V21.45h10.523c1.149 0 1.852-.68 1.852-1.758c0-1.101-.703-1.78-1.852-1.78H38.29V7.667c0-1.149-.68-1.875-1.758-1.875c-1.101 0-1.781.726-1.781 1.875V17.91H21.11V7.668c0-1.149-.68-1.875-1.758-1.875c-1.102 0-1.782.726-1.782 1.875V17.91H7.21c-1.171 0-1.874.68-1.874 1.781c0 1.079.703 1.758 1.875 1.758h10.36v13.196H7.21c-1.172 0-1.875.656-1.875 1.757c0 1.102.703 1.782 1.875 1.782m13.9-3.54V21.45h13.64v13.196Z"/></svg>

React

import type { SVGProps } from "react";

export function F7Grid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.21 38.184h10.36v10.172c0 1.148.68 1.851 1.782 1.851c1.078 0 1.757-.703 1.757-1.852v-10.17H34.75v10.172c0 1.148.68 1.851 1.781 1.851c1.078 0 1.758-.703 1.758-1.852V38.185h10.523c1.149 0 1.852-.68 1.852-1.782s-.703-1.758-1.852-1.758H38.29V21.45h10.523c1.149 0 1.852-.68 1.852-1.758c0-1.101-.703-1.78-1.852-1.78H38.29V7.667c0-1.149-.68-1.875-1.758-1.875c-1.101 0-1.781.726-1.781 1.875V17.91H21.11V7.668c0-1.149-.68-1.875-1.758-1.875c-1.102 0-1.782.726-1.782 1.875V17.91H7.21c-1.171 0-1.874.68-1.874 1.781c0 1.079.703 1.758 1.875 1.758h10.36v13.196H7.21c-1.172 0-1.875.656-1.875 1.757c0 1.102.703 1.782 1.875 1.782m13.9-3.54V21.45h13.64v13.196Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.21 38.184h10.36v10.172c0 1.148.68 1.851 1.782 1.851c1.078 0 1.757-.703 1.757-1.852v-10.17H34.75v10.172c0 1.148.68 1.851 1.781 1.851c1.078 0 1.758-.703 1.758-1.852V38.185h10.523c1.149 0 1.852-.68 1.852-1.782s-.703-1.758-1.852-1.758H38.29V21.45h10.523c1.149 0 1.852-.68 1.852-1.758c0-1.101-.703-1.78-1.852-1.78H38.29V7.667c0-1.149-.68-1.875-1.758-1.875c-1.101 0-1.781.726-1.781 1.875V17.91H21.11V7.668c0-1.149-.68-1.875-1.758-1.875c-1.102 0-1.782.726-1.782 1.875V17.91H7.21c-1.171 0-1.874.68-1.874 1.781c0 1.079.703 1.758 1.875 1.758h10.36v13.196H7.21c-1.172 0-1.875.656-1.875 1.757c0 1.102.703 1.782 1.875 1.782m13.9-3.54V21.45h13.64v13.196Z"/></svg>
</template>

CSS

.icon-grid {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.21%2038.184h10.36v10.172c0%201.148.68%201.851%201.782%201.851c1.078%200%201.757-.703%201.757-1.852v-10.17H34.75v10.172c0%201.148.68%201.851%201.781%201.851c1.078%200%201.758-.703%201.758-1.852V38.185h10.523c1.149%200%201.852-.68%201.852-1.782s-.703-1.758-1.852-1.758H38.29V21.45h10.523c1.149%200%201.852-.68%201.852-1.758c0-1.101-.703-1.78-1.852-1.78H38.29V7.667c0-1.149-.68-1.875-1.758-1.875c-1.101%200-1.781.726-1.781%201.875V17.91H21.11V7.668c0-1.149-.68-1.875-1.758-1.875c-1.102%200-1.782.726-1.782%201.875V17.91H7.21c-1.171%200-1.874.68-1.874%201.781c0%201.079.703%201.758%201.875%201.758h10.36v13.196H7.21c-1.172%200-1.875.656-1.875%201.757c0%201.102.703%201.782%201.875%201.782m13.9-3.54V21.45h13.64v13.196Z%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.21%2038.184h10.36v10.172c0%201.148.68%201.851%201.782%201.851c1.078%200%201.757-.703%201.757-1.852v-10.17H34.75v10.172c0%201.148.68%201.851%201.781%201.851c1.078%200%201.758-.703%201.758-1.852V38.185h10.523c1.149%200%201.852-.68%201.852-1.782s-.703-1.758-1.852-1.758H38.29V21.45h10.523c1.149%200%201.852-.68%201.852-1.758c0-1.101-.703-1.78-1.852-1.78H38.29V7.667c0-1.149-.68-1.875-1.758-1.875c-1.101%200-1.781.726-1.781%201.875V17.91H21.11V7.668c0-1.149-.68-1.875-1.758-1.875c-1.102%200-1.782.726-1.782%201.875V17.91H7.21c-1.171%200-1.874.68-1.874%201.781c0%201.079.703%201.758%201.875%201.758h10.36v13.196H7.21c-1.172%200-1.875.656-1.875%201.757c0%201.102.703%201.782%201.875%201.782m13.9-3.54V21.45h13.64v13.196Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/grid.svg?color=%231a73e8&size=48