# grid icon Grid. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/grid - Category: Layout & interface - Use it for: grid view, tiles, tile view, thumbnail view - Tags: grid, tiles, squares, gallery, view, dashboard - Component name: GridIcon - Added: 2026-10-14 ## Alternatives - `list`: the list view mode (list-view) - `cards`: cards with a title and a body (card-view) - `layout-dashboard`: a dashboard of widgets (dashboard) ## Don't confuse with - `apps`: apps is the app launcher - `grid-lines`: grid-lines shows a layout grid on a canvas (show-grid) ## Also fits - card view: a grid of equal tiles or thumbnails (grid-view) - dashboard: a grid view of content (grid-view) - table: a grid of tiles (grid-view) - list view: a grid of tiles (grid-view) ## Not for - treemap (use `treemap`): equal cells mean a grid view (grid-view) - breakout rooms (use `breakout-rooms`): a layout grid, not rooms - dialpad (use `dialpad`): a layout grid, not digits - show grid (use `grid-lines`): grid means a tiled grid view of items - apps (use `apps`): grid is a grid view of content (grid-view), not the app launcher - collage (use `collage`): a grid view of items, a page layout (grid-view) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/grid.svg · PNG https://gentleface.com/png/line-round/16/grid.png · https://gentleface.com/png/line-round/32/grid.png · https://gentleface.com/png/line-round/48/grid.png - line-soft: https://gentleface.com/svg/line-soft/16/grid.svg · PNG https://gentleface.com/png/line-soft/16/grid.png · https://gentleface.com/png/line-soft/32/grid.png · https://gentleface.com/png/line-soft/48/grid.png - line-sharp: https://gentleface.com/svg/line-sharp/16/grid.svg · PNG https://gentleface.com/png/line-sharp/16/grid.png · https://gentleface.com/png/line-sharp/32/grid.png · https://gentleface.com/png/line-sharp/48/grid.png - solid-round: https://gentleface.com/svg/solid-round/16/grid.svg · PNG https://gentleface.com/png/solid-round/16/grid.png · https://gentleface.com/png/solid-round/32/grid.png · https://gentleface.com/png/solid-round/48/grid.png - solid-soft: https://gentleface.com/svg/solid-soft/16/grid.svg · PNG https://gentleface.com/png/solid-soft/16/grid.png · https://gentleface.com/png/solid-soft/32/grid.png · https://gentleface.com/png/solid-soft/48/grid.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/grid.svg · PNG https://gentleface.com/png/solid-sharp/16/grid.png · https://gentleface.com/png/solid-sharp/32/grid.png · https://gentleface.com/png/solid-sharp/48/grid.png The SVG of every style: https://gentleface.com/icons/grid.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "grid" (line-round), MIT. https://gentleface.com/icons/grid import type { SVGProps } from 'react'; export function GridIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "grid" (line-round), MIT. https://gentleface.com/icons/grid. Takes the text color. */ .icon-grid { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 2.293C6.902 2.488 7 2.724 7 3L7 6C7 6.276 6.902 6.512 6.707 6.707C6.512 6.902 6.276 7 6 7L3 7C2.724 7 2.488 6.902 2.293 6.707C2.098 6.512 2 6.276 2 6L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM13.707 6.707C13.512 6.902 13.276 7 13 7L10 7C9.724 7 9.488 6.902 9.293 6.707C9.098 6.512 9 6.276 9 6L9 3C9 2.724 9.098 2.488 9.293 2.293C9.488 2.098 9.724 2 10 2L13 2C13.276 2 13.512 2.098 13.707 2.293C13.902 2.488 14 2.724 14 3L14 6C14 6.276 13.902 6.512 13.707 6.707ZM3 6L6 6L6 3L3 3L3 6ZM13 6L13 3L10 3L10 6L13 6ZM6.707 9.293C6.902 9.488 7 9.724 7 10L7 13C7 13.276 6.902 13.512 6.707 13.707C6.512 13.902 6.276 14 6 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 10C2 9.724 2.098 9.488 2.293 9.293C2.488 9.098 2.724 9 3 9L6 9C6.276 9 6.512 9.098 6.707 9.293ZM13.707 13.707C13.512 13.902 13.276 14 13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 10C9 9.724 9.098 9.488 9.293 9.293C9.488 9.098 9.724 9 10 9L13 9C13.276 9 13.512 9.098 13.707 9.293C13.902 9.488 14 9.724 14 10L14 13C14 13.276 13.902 13.512 13.707 13.707ZM3 13L6 13L6 10L3 10L3 13ZM13 13L13 10L10 10L10 13L13 13Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 2.293C6.902 2.488 7 2.724 7 3L7 6C7 6.276 6.902 6.512 6.707 6.707C6.512 6.902 6.276 7 6 7L3 7C2.724 7 2.488 6.902 2.293 6.707C2.098 6.512 2 6.276 2 6L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM13.707 6.707C13.512 6.902 13.276 7 13 7L10 7C9.724 7 9.488 6.902 9.293 6.707C9.098 6.512 9 6.276 9 6L9 3C9 2.724 9.098 2.488 9.293 2.293C9.488 2.098 9.724 2 10 2L13 2C13.276 2 13.512 2.098 13.707 2.293C13.902 2.488 14 2.724 14 3L14 6C14 6.276 13.902 6.512 13.707 6.707ZM3 6L6 6L6 3L3 3L3 6ZM13 6L13 3L10 3L10 6L13 6ZM6.707 9.293C6.902 9.488 7 9.724 7 10L7 13C7 13.276 6.902 13.512 6.707 13.707C6.512 13.902 6.276 14 6 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 10C2 9.724 2.098 9.488 2.293 9.293C2.488 9.098 2.724 9 3 9L6 9C6.276 9 6.512 9.098 6.707 9.293ZM13.707 13.707C13.512 13.902 13.276 14 13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 10C9 9.724 9.098 9.488 9.293 9.293C9.488 9.098 9.724 9 10 9L13 9C13.276 9 13.512 9.098 13.707 9.293C13.902 9.488 14 9.724 14 10L14 13C14 13.276 13.902 13.512 13.707 13.707ZM3 13L6 13L6 10L3 10L3 13ZM13 13L13 10L10 10L10 13L13 13Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6.707 2.293C6.902 2.488 7 2.724 7 3L7 6C7 6.276 6.902 6.512 6.707 6.707C6.512 6.902 6.276 7 6 7L3 7C2.724 7 2.488 6.902 2.293 6.707C2.098 6.512 2 6.276 2 6L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM13.707 6.707C13.512 6.902 13.276 7 13 7L10 7C9.724 7 9.488 6.902 9.293 6.707C9.098 6.512 9 6.276 9 6L9 3C9 2.724 9.098 2.488 9.293 2.293C9.488 2.098 9.724 2 10 2L13 2C13.276 2 13.512 2.098 13.707 2.293C13.902 2.488 14 2.724 14 3L14 6C14 6.276 13.902 6.512 13.707 6.707ZM3 6L6 6L6 3L3 3L3 6ZM13 6L13 3L10 3L10 6L13 6ZM6.707 9.293C6.902 9.488 7 9.724 7 10L7 13C7 13.276 6.902 13.512 6.707 13.707C6.512 13.902 6.276 14 6 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 10C2 9.724 2.098 9.488 2.293 9.293C2.488 9.098 2.724 9 3 9L6 9C6.276 9 6.512 9.098 6.707 9.293ZM13.707 13.707C13.512 13.902 13.276 14 13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 10C9 9.724 9.098 9.488 9.293 9.293C9.488 9.098 9.724 9 10 9L13 9C13.276 9 13.512 9.098 13.707 9.293C13.902 9.488 14 9.724 14 10L14 13C14 13.276 13.902 13.512 13.707 13.707ZM3 13L6 13L6 10L3 10L3 13ZM13 13L13 10L10 10L10 13L13 13Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "grid" (line-round), MIT. https://gentleface.com/icons/grid import SwiftUI struct GridIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 6.707, y: 2.293)) p.addCurve(to: CGPoint(x: 7, y: 3), control1: CGPoint(x: 6.902, y: 2.488), control2: CGPoint(x: 7, y: 2.724)) p.addLine(to: CGPoint(x: 7, y: 6)) p.addCurve(to: CGPoint(x: 6.707, y: 6.707), control1: CGPoint(x: 7, y: 6.276), control2: CGPoint(x: 6.902, y: 6.512)) p.addCurve(to: CGPoint(x: 6, y: 7), control1: CGPoint(x: 6.512, y: 6.902), control2: CGPoint(x: 6.276, y: 7)) p.addLine(to: CGPoint(x: 3, y: 7)) p.addCurve(to: CGPoint(x: 2.293, y: 6.707), control1: CGPoint(x: 2.724, y: 7), control2: CGPoint(x: 2.488, y: 6.902)) p.addCurve(to: CGPoint(x: 2, y: 6), control1: CGPoint(x: 2.098, y: 6.512), control2: CGPoint(x: 2, y: 6.276)) p.addLine(to: CGPoint(x: 2, y: 3)) p.addCurve(to: CGPoint(x: 2.293, y: 2.293), control1: CGPoint(x: 2, y: 2.724), control2: CGPoint(x: 2.098, y: 2.488)) p.addCurve(to: CGPoint(x: 3, y: 2), control1: CGPoint(x: 2.488, y: 2.098), control2: CGPoint(x: 2.724, y: 2)) p.addLine(to: CGPoint(x: 6, y: 2)) p.addCurve(to: CGPoint(x: 6.707, y: 2.293), control1: CGPoint(x: 6.276, y: 2), control2: CGPoint(x: 6.512, y: 2.098)) p.closeSubpath() p.move(to: CGPoint(x: 13.707, y: 6.707)) p.addCurve(to: CGPoint(x: 13, y: 7), control1: CGPoint(x: 13.512, y: 6.902), control2: CGPoint(x: 13.276, y: 7)) p.addLine(to: CGPoint(x: 10, y: 7)) p.addCurve(to: CGPoint(x: 9.293, y: 6.707), control1: CGPoint(x: 9.724, y: 7), control2: CGPoint(x: 9.488, y: 6.902)) p.addCurve(to: CGPoint(x: 9, y: 6), control1: CGPoint(x: 9.098, y: 6.512), control2: CGPoint(x: 9, y: 6.276)) p.addLine(to: CGPoint(x: 9, y: 3)) p.addCurve(to: CGPoint(x: 9.293, y: 2.293), control1: CGPoint(x: 9, y: 2.724), control2: CGPoint(x: 9.098, y: 2.488)) p.addCurve(to: CGPoint(x: 10, y: 2), control1: CGPoint(x: 9.488, y: 2.098), control2: CGPoint(x: 9.724, y: 2)) p.addLine(to: CGPoint(x: 13, y: 2)) p.addCurve(to: CGPoint(x: 13.707, y: 2.293), control1: CGPoint(x: 13.276, y: 2), control2: CGPoint(x: 13.512, y: 2.098)) p.addCurve(to: CGPoint(x: 14, y: 3), control1: CGPoint(x: 13.902, y: 2.488), control2: CGPoint(x: 14, y: 2.724)) p.addLine(to: CGPoint(x: 14, y: 6)) p.addCurve(to: CGPoint(x: 13.707, y: 6.707), control1: CGPoint(x: 14, y: 6.276), control2: CGPoint(x: 13.902, y: 6.512)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 6)) p.addLine(to: CGPoint(x: 6, y: 6)) p.addLine(to: CGPoint(x: 6, y: 3)) p.addLine(to: CGPoint(x: 3, y: 3)) p.addLine(to: CGPoint(x: 3, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 13, y: 6)) p.addLine(to: CGPoint(x: 13, y: 3)) p.addLine(to: CGPoint(x: 10, y: 3)) p.addLine(to: CGPoint(x: 10, y: 6)) p.addLine(to: CGPoint(x: 13, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 6.707, y: 9.293)) p.addCurve(to: CGPoint(x: 7, y: 10), control1: CGPoint(x: 6.902, y: 9.488), control2: CGPoint(x: 7, y: 9.724)) p.addLine(to: CGPoint(x: 7, y: 13)) p.addCurve(to: CGPoint(x: 6.707, y: 13.707), control1: CGPoint(x: 7, y: 13.276), control2: CGPoint(x: 6.902, y: 13.512)) p.addCurve(to: CGPoint(x: 6, y: 14), control1: CGPoint(x: 6.512, y: 13.902), control2: CGPoint(x: 6.276, y: 14)) p.addLine(to: CGPoint(x: 3, y: 14)) p.addCurve(to: CGPoint(x: 2.293, y: 13.707), control1: CGPoint(x: 2.724, y: 14), control2: CGPoint(x: 2.488, y: 13.902)) p.addCurve(to: CGPoint(x: 2, y: 13), control1: CGPoint(x: 2.098, y: 13.512), control2: CGPoint(x: 2, y: 13.276)) p.addLine(to: CGPoint(x: 2, y: 10)) p.addCurve(to: CGPoint(x: 2.293, y: 9.293), control1: CGPoint(x: 2, y: 9.724), control2: CGPoint(x: 2.098, y: 9.488)) p.addCurve(to: CGPoint(x: 3, y: 9), control1: CGPoint(x: 2.488, y: 9.098), control2: CGPoint(x: 2.724, y: 9)) p.addLine(to: CGPoint(x: 6, y: 9)) p.addCurve(to: CGPoint(x: 6.707, y: 9.293), control1: CGPoint(x: 6.276, y: 9), control2: CGPoint(x: 6.512, y: 9.098)) p.closeSubpath() p.move(to: CGPoint(x: 13.707, y: 13.707)) p.addCurve(to: CGPoint(x: 13, y: 14), control1: CGPoint(x: 13.512, y: 13.902), control2: CGPoint(x: 13.276, y: 14)) p.addLine(to: CGPoint(x: 10, y: 14)) p.addCurve(to: CGPoint(x: 9.293, y: 13.707), control1: CGPoint(x: 9.724, y: 14), control2: CGPoint(x: 9.488, y: 13.902)) p.addCurve(to: CGPoint(x: 9, y: 13), control1: CGPoint(x: 9.098, y: 13.512), control2: CGPoint(x: 9, y: 13.276)) p.addLine(to: CGPoint(x: 9, y: 10)) p.addCurve(to: CGPoint(x: 9.293, y: 9.293), control1: CGPoint(x: 9, y: 9.724), control2: CGPoint(x: 9.098, y: 9.488)) p.addCurve(to: CGPoint(x: 10, y: 9), control1: CGPoint(x: 9.488, y: 9.098), control2: CGPoint(x: 9.724, y: 9)) p.addLine(to: CGPoint(x: 13, y: 9)) p.addCurve(to: CGPoint(x: 13.707, y: 9.293), control1: CGPoint(x: 13.276, y: 9), control2: CGPoint(x: 13.512, y: 9.098)) p.addCurve(to: CGPoint(x: 14, y: 10), control1: CGPoint(x: 13.902, y: 9.488), control2: CGPoint(x: 14, y: 9.724)) p.addLine(to: CGPoint(x: 14, y: 13)) p.addCurve(to: CGPoint(x: 13.707, y: 13.707), control1: CGPoint(x: 14, y: 13.276), control2: CGPoint(x: 13.902, y: 13.512)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 13)) p.addLine(to: CGPoint(x: 6, y: 13)) p.addLine(to: CGPoint(x: 6, y: 10)) p.addLine(to: CGPoint(x: 3, y: 10)) p.addLine(to: CGPoint(x: 3, y: 13)) p.closeSubpath() p.move(to: CGPoint(x: 13, y: 13)) p.addLine(to: CGPoint(x: 13, y: 10)) p.addLine(to: CGPoint(x: 10, y: 10)) p.addLine(to: CGPoint(x: 10, y: 13)) p.addLine(to: CGPoint(x: 13, y: 13)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // GridIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "grid" (line-round), MIT. https://gentleface.com/icons/grid import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val GridIcon: ImageVector by lazy { ImageVector.Builder( name = "grid", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M6.707 2.293C6.902 2.488 7 2.724 7 3L7 6C7 6.276 6.902 6.512 6.707 6.707C6.512 6.902 6.276 7 6 7L3 7C2.724 7 2.488 6.902 2.293 6.707C2.098 6.512 2 6.276 2 6L2 3C2 2.724 2.098 2.488 2.293 2.293C2.488 2.098 2.724 2 3 2L6 2C6.276 2 6.512 2.098 6.707 2.293ZM13.707 6.707C13.512 6.902 13.276 7 13 7L10 7C9.724 7 9.488 6.902 9.293 6.707C9.098 6.512 9 6.276 9 6L9 3C9 2.724 9.098 2.488 9.293 2.293C9.488 2.098 9.724 2 10 2L13 2C13.276 2 13.512 2.098 13.707 2.293C13.902 2.488 14 2.724 14 3L14 6C14 6.276 13.902 6.512 13.707 6.707ZM3 6L6 6L6 3L3 3L3 6ZM13 6L13 3L10 3L10 6L13 6ZM6.707 9.293C6.902 9.488 7 9.724 7 10L7 13C7 13.276 6.902 13.512 6.707 13.707C6.512 13.902 6.276 14 6 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 10C2 9.724 2.098 9.488 2.293 9.293C2.488 9.098 2.724 9 3 9L6 9C6.276 9 6.512 9.098 6.707 9.293ZM13.707 13.707C13.512 13.902 13.276 14 13 14L10 14C9.724 14 9.488 13.902 9.293 13.707C9.098 13.512 9 13.276 9 13L9 10C9 9.724 9.098 9.488 9.293 9.293C9.488 9.098 9.724 9 10 9L13 9C13.276 9 13.512 9.098 13.707 9.293C13.902 9.488 14 9.724 14 10L14 13C14 13.276 13.902 13.512 13.707 13.707ZM3 13L6 13L6 10L3 10L3 13ZM13 13L13 10L10 10L10 13L13 13Z"), fill = SolidColor(Color.Black), ).build() } // Icon(GridIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "grid" (line-round), MIT. https://gentleface.com/icons/grid import 'package:flutter/widgets.dart'; class GridIcon extends StatelessWidget { const GridIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _GridIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _GridIconPainter extends CustomPainter { _GridIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(6.707, 2.293) ..cubicTo(6.902, 2.488, 7, 2.724, 7, 3) ..lineTo(7, 6) ..cubicTo(7, 6.276, 6.902, 6.512, 6.707, 6.707) ..cubicTo(6.512, 6.902, 6.276, 7, 6, 7) ..lineTo(3, 7) ..cubicTo(2.724, 7, 2.488, 6.902, 2.293, 6.707) ..cubicTo(2.098, 6.512, 2, 6.276, 2, 6) ..lineTo(2, 3) ..cubicTo(2, 2.724, 2.098, 2.488, 2.293, 2.293) ..cubicTo(2.488, 2.098, 2.724, 2, 3, 2) ..lineTo(6, 2) ..cubicTo(6.276, 2, 6.512, 2.098, 6.707, 2.293) ..close() ..moveTo(13.707, 6.707) ..cubicTo(13.512, 6.902, 13.276, 7, 13, 7) ..lineTo(10, 7) ..cubicTo(9.724, 7, 9.488, 6.902, 9.293, 6.707) ..cubicTo(9.098, 6.512, 9, 6.276, 9, 6) ..lineTo(9, 3) ..cubicTo(9, 2.724, 9.098, 2.488, 9.293, 2.293) ..cubicTo(9.488, 2.098, 9.724, 2, 10, 2) ..lineTo(13, 2) ..cubicTo(13.276, 2, 13.512, 2.098, 13.707, 2.293) ..cubicTo(13.902, 2.488, 14, 2.724, 14, 3) ..lineTo(14, 6) ..cubicTo(14, 6.276, 13.902, 6.512, 13.707, 6.707) ..close() ..moveTo(3, 6) ..lineTo(6, 6) ..lineTo(6, 3) ..lineTo(3, 3) ..lineTo(3, 6) ..close() ..moveTo(13, 6) ..lineTo(13, 3) ..lineTo(10, 3) ..lineTo(10, 6) ..lineTo(13, 6) ..close() ..moveTo(6.707, 9.293) ..cubicTo(6.902, 9.488, 7, 9.724, 7, 10) ..lineTo(7, 13) ..cubicTo(7, 13.276, 6.902, 13.512, 6.707, 13.707) ..cubicTo(6.512, 13.902, 6.276, 14, 6, 14) ..lineTo(3, 14) ..cubicTo(2.724, 14, 2.488, 13.902, 2.293, 13.707) ..cubicTo(2.098, 13.512, 2, 13.276, 2, 13) ..lineTo(2, 10) ..cubicTo(2, 9.724, 2.098, 9.488, 2.293, 9.293) ..cubicTo(2.488, 9.098, 2.724, 9, 3, 9) ..lineTo(6, 9) ..cubicTo(6.276, 9, 6.512, 9.098, 6.707, 9.293) ..close() ..moveTo(13.707, 13.707) ..cubicTo(13.512, 13.902, 13.276, 14, 13, 14) ..lineTo(10, 14) ..cubicTo(9.724, 14, 9.488, 13.902, 9.293, 13.707) ..cubicTo(9.098, 13.512, 9, 13.276, 9, 13) ..lineTo(9, 10) ..cubicTo(9, 9.724, 9.098, 9.488, 9.293, 9.293) ..cubicTo(9.488, 9.098, 9.724, 9, 10, 9) ..lineTo(13, 9) ..cubicTo(13.276, 9, 13.512, 9.098, 13.707, 9.293) ..cubicTo(13.902, 9.488, 14, 9.724, 14, 10) ..lineTo(14, 13) ..cubicTo(14, 13.276, 13.902, 13.512, 13.707, 13.707) ..close() ..moveTo(3, 13) ..lineTo(6, 13) ..lineTo(6, 10) ..lineTo(3, 10) ..lineTo(3, 13) ..close() ..moveTo(13, 13) ..lineTo(13, 10) ..lineTo(10, 10) ..lineTo(10, 13) ..lineTo(13, 13) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_GridIconPainter old) => old.color != color; } ```