grid circles icon

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

Name: grid-circles-fill
Set: Keyline Icons
Style: Fill
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

grid-circles grid-circles-duotone 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="currentColor" d="M6.5 13C8.9854 13 11 15.0147 11 17.5C11 19.9854 8.9854 22 6.5 22C4.0146 22 2 19.9854 2 17.5C2 15.0147 4.0146 13 6.5 13ZM6.5 2C8.9854 2 11 4.0146 11 6.5C11 8.9854 8.9854 11 6.5 11C4.0146 11 2 8.9854 2 6.5C2 4.0146 4.0146 2 6.5 2ZM17.5 13C19.9854 13 22 15.0147 22 17.5C22 19.9854 19.9854 22 17.5 22C15.0147 22 13 19.9854 13 17.5C13 15.0147 15.0147 13 17.5 13ZM17.5 2C19.9854 2 22 4.0146 22 6.5C22 8.9854 19.9854 11 17.5 11C15.0147 11 13 8.9854 13 6.5C13 4.0146 15.0147 2 17.5 2Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsGridCirclesFill(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="M6.5 13C8.9854 13 11 15.0147 11 17.5C11 19.9854 8.9854 22 6.5 22C4.0146 22 2 19.9854 2 17.5C2 15.0147 4.0146 13 6.5 13ZM6.5 2C8.9854 2 11 4.0146 11 6.5C11 8.9854 8.9854 11 6.5 11C4.0146 11 2 8.9854 2 6.5C2 4.0146 4.0146 2 6.5 2ZM17.5 13C19.9854 13 22 15.0147 22 17.5C22 19.9854 19.9854 22 17.5 22C15.0147 22 13 19.9854 13 17.5C13 15.0147 15.0147 13 17.5 13ZM17.5 2C19.9854 2 22 4.0146 22 6.5C22 8.9854 19.9854 11 17.5 11C15.0147 11 13 8.9854 13 6.5C13 4.0146 15.0147 2 17.5 2Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 13C8.9854 13 11 15.0147 11 17.5C11 19.9854 8.9854 22 6.5 22C4.0146 22 2 19.9854 2 17.5C2 15.0147 4.0146 13 6.5 13ZM6.5 2C8.9854 2 11 4.0146 11 6.5C11 8.9854 8.9854 11 6.5 11C4.0146 11 2 8.9854 2 6.5C2 4.0146 4.0146 2 6.5 2ZM17.5 13C19.9854 13 22 15.0147 22 17.5C22 19.9854 19.9854 22 17.5 22C15.0147 22 13 19.9854 13 17.5C13 15.0147 15.0147 13 17.5 13ZM17.5 2C19.9854 2 22 4.0146 22 6.5C22 8.9854 19.9854 11 17.5 11C15.0147 11 13 8.9854 13 6.5C13 4.0146 15.0147 2 17.5 2Z"/></svg>
</template>

CSS

.icon-grid-circles-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%22M6.5%2013C8.9854%2013%2011%2015.0147%2011%2017.5C11%2019.9854%208.9854%2022%206.5%2022C4.0146%2022%202%2019.9854%202%2017.5C2%2015.0147%204.0146%2013%206.5%2013ZM6.5%202C8.9854%202%2011%204.0146%2011%206.5C11%208.9854%208.9854%2011%206.5%2011C4.0146%2011%202%208.9854%202%206.5C2%204.0146%204.0146%202%206.5%202ZM17.5%2013C19.9854%2013%2022%2015.0147%2022%2017.5C22%2019.9854%2019.9854%2022%2017.5%2022C15.0147%2022%2013%2019.9854%2013%2017.5C13%2015.0147%2015.0147%2013%2017.5%2013ZM17.5%202C19.9854%202%2022%204.0146%2022%206.5C22%208.9854%2019.9854%2011%2017.5%2011C15.0147%2011%2013%208.9854%2013%206.5C13%204.0146%2015.0147%202%2017.5%202Z%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%22M6.5%2013C8.9854%2013%2011%2015.0147%2011%2017.5C11%2019.9854%208.9854%2022%206.5%2022C4.0146%2022%202%2019.9854%202%2017.5C2%2015.0147%204.0146%2013%206.5%2013ZM6.5%202C8.9854%202%2011%204.0146%2011%206.5C11%208.9854%208.9854%2011%206.5%2011C4.0146%2011%202%208.9854%202%206.5C2%204.0146%204.0146%202%206.5%202ZM17.5%2013C19.9854%2013%2022%2015.0147%2022%2017.5C22%2019.9854%2019.9854%2022%2017.5%2022C15.0147%2022%2013%2019.9854%2013%2017.5C13%2015.0147%2015.0147%2013%2017.5%2013ZM17.5%202C19.9854%202%2022%204.0146%2022%206.5C22%208.9854%2019.9854%2011%2017.5%2011C15.0147%2011%2013%208.9854%2013%206.5C13%204.0146%2015.0147%202%2017.5%202Z%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-fill.svg?color=%231a73e8&size=48