grid squares icon

grid-squares-duotone from Keyline Icons by Keyline Icons · Duotone · MIT Free for personal and commercial use.

Name: grid-squares-duotone
Set: Keyline Icons
Style: Duotone
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

grid-squares grid-squares-fill grid-squares-sharp grid-squares-sharp-duotone grid-squares-sharp-fill grid-squares-sharp-two-tone grid-squares-two-tone

Related icons in Keyline Icons

grid-2x2 grid-2x3 grid-3x2 grid-3x3 grid-circles grid-circles-check grid-circles-x grid-squares-check grid-squares-x

Use the grid squares icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16C3 14.8954 3.8954 14 5 14L8 14C9.1046 14 10 14.8954 10 16L10 19C10 20.1046 9.1046 21 8 21L5 21C3.8954 21 3 20.1046 3 19L3 16ZM3 5C3 3.8954 3.8954 3 5 3L8 3C9.1046 3 10 3.8954 10 5L10 8C10 9.1046 9.1046 10 8 10L5 10C3.8954 10 3 9.1046 3 8L3 5ZM14 16C14 14.8954 14.8954 14 16 14L19 14C20.1046 14 21 14.8954 21 16L21 19C21 20.1046 20.1046 21 19 21L16 21C14.8954 21 14 20.1046 14 19L14 16ZM14 5C14 3.8954 14.8954 3 16 3L19 3C20.1046 3 21 3.8954 21 5L21 8C21 9.1046 20.1046 10 19 10L16 10C14.8954 10 14 9.1046 14 8L14 5Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsGridSquaresDuotone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 16C3 14.8954 3.8954 14 5 14L8 14C9.1046 14 10 14.8954 10 16L10 19C10 20.1046 9.1046 21 8 21L5 21C3.8954 21 3 20.1046 3 19L3 16ZM3 5C3 3.8954 3.8954 3 5 3L8 3C9.1046 3 10 3.8954 10 5L10 8C10 9.1046 9.1046 10 8 10L5 10C3.8954 10 3 9.1046 3 8L3 5ZM14 16C14 14.8954 14.8954 14 16 14L19 14C20.1046 14 21 14.8954 21 16L21 19C21 20.1046 20.1046 21 19 21L16 21C14.8954 21 14 20.1046 14 19L14 16ZM14 5C14 3.8954 14.8954 3 16 3L19 3C20.1046 3 21 3.8954 21 5L21 8C21 9.1046 20.1046 10 19 10L16 10C14.8954 10 14 9.1046 14 8L14 5Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16C3 14.8954 3.8954 14 5 14L8 14C9.1046 14 10 14.8954 10 16L10 19C10 20.1046 9.1046 21 8 21L5 21C3.8954 21 3 20.1046 3 19L3 16ZM3 5C3 3.8954 3.8954 3 5 3L8 3C9.1046 3 10 3.8954 10 5L10 8C10 9.1046 9.1046 10 8 10L5 10C3.8954 10 3 9.1046 3 8L3 5ZM14 16C14 14.8954 14.8954 14 16 14L19 14C20.1046 14 21 14.8954 21 16L21 19C21 20.1046 20.1046 21 19 21L16 21C14.8954 21 14 20.1046 14 19L14 16ZM14 5C14 3.8954 14.8954 3 16 3L19 3C20.1046 3 21 3.8954 21 5L21 8C21 9.1046 20.1046 10 19 10L16 10C14.8954 10 14 9.1046 14 8L14 5Z"/></svg>
</template>

CSS

.icon-grid-squares-duotone {
  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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%2016C3%2014.8954%203.8954%2014%205%2014L8%2014C9.1046%2014%2010%2014.8954%2010%2016L10%2019C10%2020.1046%209.1046%2021%208%2021L5%2021C3.8954%2021%203%2020.1046%203%2019L3%2016ZM3%205C3%203.8954%203.8954%203%205%203L8%203C9.1046%203%2010%203.8954%2010%205L10%208C10%209.1046%209.1046%2010%208%2010L5%2010C3.8954%2010%203%209.1046%203%208L3%205ZM14%2016C14%2014.8954%2014.8954%2014%2016%2014L19%2014C20.1046%2014%2021%2014.8954%2021%2016L21%2019C21%2020.1046%2020.1046%2021%2019%2021L16%2021C14.8954%2021%2014%2020.1046%2014%2019L14%2016ZM14%205C14%203.8954%2014.8954%203%2016%203L19%203C20.1046%203%2021%203.8954%2021%205L21%208C21%209.1046%2020.1046%2010%2019%2010L16%2010C14.8954%2010%2014%209.1046%2014%208L14%205Z%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%2016C3%2014.8954%203.8954%2014%205%2014L8%2014C9.1046%2014%2010%2014.8954%2010%2016L10%2019C10%2020.1046%209.1046%2021%208%2021L5%2021C3.8954%2021%203%2020.1046%203%2019L3%2016ZM3%205C3%203.8954%203.8954%203%205%203L8%203C9.1046%203%2010%203.8954%2010%205L10%208C10%209.1046%209.1046%2010%208%2010L5%2010C3.8954%2010%203%209.1046%203%208L3%205ZM14%2016C14%2014.8954%2014.8954%2014%2016%2014L19%2014C20.1046%2014%2021%2014.8954%2021%2016L21%2019C21%2020.1046%2020.1046%2021%2019%2021L16%2021C14.8954%2021%2014%2020.1046%2014%2019L14%2016ZM14%205C14%203.8954%2014.8954%203%2016%203L19%203C20.1046%203%2021%203.8954%2021%205L21%208C21%209.1046%2020.1046%2010%2019%2010L16%2010C14.8954%2010%2014%209.1046%2014%208L14%205Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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