grid circles icon

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

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

7 other variants in Keyline Icons

grid-circles grid-circles-fill grid-circles-sharp grid-circles-sharp-duotone grid-circles-sharp-fill grid-circles-sharp-two-tone grid-circles-two-tone

The same icon in other sets

grid-circles-24-filledFluent UI System Icons

Related icons in Keyline Icons

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

Use the grid circles 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="M6.5 21C8.433 21 10 19.433 10 17.5C10 15.567 8.433 14 6.5 14C4.567 14 3 15.567 3 17.5C3 19.433 4.567 21 6.5 21ZM6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10ZM17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14C15.567 14 14 15.567 14 17.5C14 19.433 15.567 21 17.5 21ZM17.5 10C19.433 10 21 8.433 21 6.5C21 4.567 19.433 3 17.5 3C15.567 3 14 4.567 14 6.5C14 8.433 15.567 10 17.5 10Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsGridCirclesDuotone(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="M6.5 21C8.433 21 10 19.433 10 17.5C10 15.567 8.433 14 6.5 14C4.567 14 3 15.567 3 17.5C3 19.433 4.567 21 6.5 21ZM6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10ZM17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14C15.567 14 14 15.567 14 17.5C14 19.433 15.567 21 17.5 21ZM17.5 10C19.433 10 21 8.433 21 6.5C21 4.567 19.433 3 17.5 3C15.567 3 14 4.567 14 6.5C14 8.433 15.567 10 17.5 10Z"/></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="M6.5 21C8.433 21 10 19.433 10 17.5C10 15.567 8.433 14 6.5 14C4.567 14 3 15.567 3 17.5C3 19.433 4.567 21 6.5 21ZM6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10ZM17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14C15.567 14 14 15.567 14 17.5C14 19.433 15.567 21 17.5 21ZM17.5 10C19.433 10 21 8.433 21 6.5C21 4.567 19.433 3 17.5 3C15.567 3 14 4.567 14 6.5C14 8.433 15.567 10 17.5 10Z"/></svg>
</template>

CSS

.icon-grid-circles-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%22M6.5%2021C8.433%2021%2010%2019.433%2010%2017.5C10%2015.567%208.433%2014%206.5%2014C4.567%2014%203%2015.567%203%2017.5C3%2019.433%204.567%2021%206.5%2021ZM6.5%2010C8.433%2010%2010%208.433%2010%206.5C10%204.567%208.433%203%206.5%203C4.567%203%203%204.567%203%206.5C3%208.433%204.567%2010%206.5%2010ZM17.5%2021C19.433%2021%2021%2019.433%2021%2017.5C21%2015.567%2019.433%2014%2017.5%2014C15.567%2014%2014%2015.567%2014%2017.5C14%2019.433%2015.567%2021%2017.5%2021ZM17.5%2010C19.433%2010%2021%208.433%2021%206.5C21%204.567%2019.433%203%2017.5%203C15.567%203%2014%204.567%2014%206.5C14%208.433%2015.567%2010%2017.5%2010Z%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%22M6.5%2021C8.433%2021%2010%2019.433%2010%2017.5C10%2015.567%208.433%2014%206.5%2014C4.567%2014%203%2015.567%203%2017.5C3%2019.433%204.567%2021%206.5%2021ZM6.5%2010C8.433%2010%2010%208.433%2010%206.5C10%204.567%208.433%203%206.5%203C4.567%203%203%204.567%203%206.5C3%208.433%204.567%2010%206.5%2010ZM17.5%2021C19.433%2021%2021%2019.433%2021%2017.5C21%2015.567%2019.433%2014%2017.5%2014C15.567%2014%2014%2015.567%2014%2017.5C14%2019.433%2015.567%2021%2017.5%2021ZM17.5%2010C19.433%2010%2021%208.433%2021%206.5C21%204.567%2019.433%203%2017.5%203C15.567%203%2014%204.567%2014%206.5C14%208.433%2015.567%2010%2017.5%2010Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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