# cohort-chart icon

Cohort chart. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/cohort-chart

- Category: Charts & data
- Use it for: cohort analysis, retention chart, retention analysis
- Tags: cohort, retention, chart, analytics, matrix, triangle, users, data
- Family: activity, activity-search, area-chart, area-chart-stacked, bar-chart, bar-chart-clock, bar-chart-grouped, bar-chart-grouped-filled, bar-chart-horizontal, bar-chart-off, bar-chart-pencil, bar-chart-plus, bar-chart-search, bar-chart-sparkle, bar-chart-stacked, bubble-chart, candlestick-chart, combo-chart, donut-chart, funnel-chart, gantt-chart, heatmap, histogram, line-chart, pie-chart, radar-chart, scatter-chart, treemap, trending-down, trending-up, trending-up-down, venn-diagram, waterfall-chart
- Component name: CohortChartIcon
- Added: 2026-10-16

## Don't confuse with

- `heatmap`: a full grid of density values

## Also fits

- heatmap: a staircase of retention cells (cohort-analysis)

## 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/cohort-chart.svg · PNG https://gentleface.com/png/line-round/16/cohort-chart.png · https://gentleface.com/png/line-round/32/cohort-chart.png · https://gentleface.com/png/line-round/48/cohort-chart.png
- line-soft: https://gentleface.com/svg/line-soft/16/cohort-chart.svg · PNG https://gentleface.com/png/line-soft/16/cohort-chart.png · https://gentleface.com/png/line-soft/32/cohort-chart.png · https://gentleface.com/png/line-soft/48/cohort-chart.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/cohort-chart.svg · PNG https://gentleface.com/png/line-sharp/16/cohort-chart.png · https://gentleface.com/png/line-sharp/32/cohort-chart.png · https://gentleface.com/png/line-sharp/48/cohort-chart.png
- solid-round: https://gentleface.com/svg/solid-round/16/cohort-chart.svg · PNG https://gentleface.com/png/solid-round/16/cohort-chart.png · https://gentleface.com/png/solid-round/32/cohort-chart.png · https://gentleface.com/png/solid-round/48/cohort-chart.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/cohort-chart.svg · PNG https://gentleface.com/png/solid-soft/16/cohort-chart.png · https://gentleface.com/png/solid-soft/32/cohort-chart.png · https://gentleface.com/png/solid-soft/48/cohort-chart.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/cohort-chart.svg · PNG https://gentleface.com/png/solid-sharp/16/cohort-chart.png · https://gentleface.com/png/solid-sharp/32/cohort-chart.png · https://gentleface.com/png/solid-sharp/48/cohort-chart.png

The SVG of every style: https://gentleface.com/icons/cohort-chart.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
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z"/></svg>
```

### React

```tsx
// Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart
import type { SVGProps } from 'react';

export function CohortChartIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart -->
<script>
  let props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
  <path d="M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/cohort-chart.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart. Takes the text color. */
.icon-cohort-chart {
  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='M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z'/%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='M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z'/%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='M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#cohort-chart"/></svg>
```

### SwiftUI

```swift
// Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart
import SwiftUI

struct CohortChartIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 13.707, y: 5.707))
        p.addCurve(to: CGPoint(x: 13, y: 6), control1: CGPoint(x: 13.512, y: 5.902), control2: CGPoint(x: 13.276, y: 6))
        p.addLine(to: CGPoint(x: 10, y: 6))
        p.addLine(to: CGPoint(x: 10, y: 9))
        p.addCurve(to: CGPoint(x: 9.707, y: 9.707), control1: CGPoint(x: 10, y: 9.276), control2: CGPoint(x: 9.902, y: 9.512))
        p.addCurve(to: CGPoint(x: 9, y: 10), control1: CGPoint(x: 9.512, y: 9.902), control2: CGPoint(x: 9.276, y: 10))
        p.addLine(to: CGPoint(x: 6, y: 10))
        p.addLine(to: CGPoint(x: 6, y: 13))
        p.addCurve(to: CGPoint(x: 5.707, y: 13.707), control1: CGPoint(x: 6, y: 13.276), control2: CGPoint(x: 5.902, y: 13.512))
        p.addCurve(to: CGPoint(x: 5, y: 14), control1: CGPoint(x: 5.512, y: 13.902), control2: CGPoint(x: 5.276, y: 14))
        p.addLine(to: CGPoint(x: 2, y: 14))
        p.addCurve(to: CGPoint(x: 1.293, y: 13.707), control1: CGPoint(x: 1.724, y: 14), control2: CGPoint(x: 1.488, y: 13.902))
        p.addCurve(to: CGPoint(x: 1, y: 13), control1: CGPoint(x: 1.098, y: 13.512), control2: CGPoint(x: 1, y: 13.276))
        p.addLine(to: CGPoint(x: 1, y: 2))
        p.addCurve(to: CGPoint(x: 1.293, y: 1.293), control1: CGPoint(x: 1, y: 1.724), control2: CGPoint(x: 1.098, y: 1.488))
        p.addCurve(to: CGPoint(x: 2, y: 1), control1: CGPoint(x: 1.488, y: 1.098), control2: CGPoint(x: 1.724, y: 1))
        p.addLine(to: CGPoint(x: 13, y: 1))
        p.addCurve(to: CGPoint(x: 13.707, y: 1.293), control1: CGPoint(x: 13.276, y: 1), control2: CGPoint(x: 13.512, y: 1.098))
        p.addCurve(to: CGPoint(x: 14, y: 2), control1: CGPoint(x: 13.902, y: 1.488), control2: CGPoint(x: 14, y: 1.724))
        p.addLine(to: CGPoint(x: 14, y: 5))
        p.addCurve(to: CGPoint(x: 13.707, y: 5.707), control1: CGPoint(x: 14, y: 5.276), control2: CGPoint(x: 13.902, y: 5.512))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5, y: 5))
        p.addLine(to: CGPoint(x: 5, y: 2))
        p.addLine(to: CGPoint(x: 2, y: 2))
        p.addLine(to: CGPoint(x: 2, y: 5))
        p.addLine(to: CGPoint(x: 5, y: 5))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8, y: 5))
        p.addCurve(to: CGPoint(x: 8.707, y: 4.707), control1: CGPoint(x: 8.276, y: 5), control2: CGPoint(x: 8.512, y: 4.902))
        p.addCurve(to: CGPoint(x: 9, y: 4), control1: CGPoint(x: 8.902, y: 4.512), control2: CGPoint(x: 9, y: 4.276))
        p.addLine(to: CGPoint(x: 9, y: 2))
        p.addLine(to: CGPoint(x: 6, y: 2))
        p.addLine(to: CGPoint(x: 6, y: 5))
        p.addLine(to: CGPoint(x: 8, y: 5))
        p.closeSubpath()
        p.move(to: CGPoint(x: 13, y: 2))
        p.addLine(to: CGPoint(x: 10, y: 2))
        p.addLine(to: CGPoint(x: 10, y: 4))
        p.addCurve(to: CGPoint(x: 9.86, y: 4.736), control1: CGPoint(x: 10, y: 4.254), control2: CGPoint(x: 9.953, y: 4.5))
        p.addCurve(to: CGPoint(x: 9.708, y: 5.041), control1: CGPoint(x: 9.817, y: 4.843), control2: CGPoint(x: 9.767, y: 4.944))
        p.addCurve(to: CGPoint(x: 10, y: 5), control1: CGPoint(x: 9.8, y: 5.014), control2: CGPoint(x: 9.897, y: 5))
        p.addLine(to: CGPoint(x: 13, y: 5))
        p.addLine(to: CGPoint(x: 13, y: 2))
        p.closeSubpath()
        p.move(to: CGPoint(x: 9, y: 6))
        p.addCurve(to: CGPoint(x: 9.041, y: 5.708), control1: CGPoint(x: 9, y: 5.897), control2: CGPoint(x: 9.014, y: 5.8))
        p.addCurve(to: CGPoint(x: 8.736, y: 5.86), control1: CGPoint(x: 8.944, y: 5.767), control2: CGPoint(x: 8.843, y: 5.817))
        p.addCurve(to: CGPoint(x: 8, y: 6), control1: CGPoint(x: 8.5, y: 5.953), control2: CGPoint(x: 8.254, y: 6))
        p.addLine(to: CGPoint(x: 6, y: 6))
        p.addLine(to: CGPoint(x: 6, y: 8))
        p.addCurve(to: CGPoint(x: 5.86, y: 8.736), control1: CGPoint(x: 6, y: 8.254), control2: CGPoint(x: 5.953, y: 8.5))
        p.addCurve(to: CGPoint(x: 5.708, y: 9.041), control1: CGPoint(x: 5.817, y: 8.843), control2: CGPoint(x: 5.767, y: 8.944))
        p.addCurve(to: CGPoint(x: 6, y: 9), control1: CGPoint(x: 5.8, y: 9.014), control2: CGPoint(x: 5.897, y: 9))
        p.addLine(to: CGPoint(x: 9, y: 9))
        p.addLine(to: CGPoint(x: 9, y: 6))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.707, y: 8.707))
        p.addCurve(to: CGPoint(x: 5, y: 8), control1: CGPoint(x: 4.902, y: 8.512), control2: CGPoint(x: 5, y: 8.276))
        p.addLine(to: CGPoint(x: 5, y: 6))
        p.addLine(to: CGPoint(x: 2, y: 6))
        p.addLine(to: CGPoint(x: 2, y: 9))
        p.addLine(to: CGPoint(x: 4, y: 9))
        p.addCurve(to: CGPoint(x: 4.707, y: 8.707), control1: CGPoint(x: 4.276, y: 9), control2: CGPoint(x: 4.512, y: 8.902))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5, y: 10))
        p.addCurve(to: CGPoint(x: 5.041, y: 9.708), control1: CGPoint(x: 5, y: 9.897), control2: CGPoint(x: 5.014, y: 9.8))
        p.addCurve(to: CGPoint(x: 4.736, y: 9.86), control1: CGPoint(x: 4.944, y: 9.767), control2: CGPoint(x: 4.843, y: 9.817))
        p.addCurve(to: CGPoint(x: 4, y: 10), control1: CGPoint(x: 4.5, y: 9.953), control2: CGPoint(x: 4.254, y: 10))
        p.addLine(to: CGPoint(x: 2, y: 10))
        p.addLine(to: CGPoint(x: 2, y: 13))
        p.addLine(to: CGPoint(x: 5, y: 13))
        p.addLine(to: CGPoint(x: 5, y: 10))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// CohortChartIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart
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 CohortChartIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "cohort-chart", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(CohortChartIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_cohort_chart.xml · Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M13.707 5.707C13.512 5.902 13.276 6 13 6L10 6L10 9C10 9.276 9.902 9.512 9.707 9.707C9.512 9.902 9.276 10 9 10L6 10L6 13C6 13.276 5.902 13.512 5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L13 1C13.276 1 13.512 1.098 13.707 1.293C13.902 1.488 14 1.724 14 2L14 5C14 5.276 13.902 5.512 13.707 5.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5C8.276 5 8.512 4.902 8.707 4.707C8.902 4.512 9 4.276 9 4L9 2L6 2L6 5L8 5ZM13 2L10 2L10 4C10 4.254 9.953 4.5 9.86 4.736C9.817 4.843 9.767 4.944 9.708 5.041C9.8 5.014 9.897 5 10 5L13 5L13 2ZM9 6C9 5.897 9.014 5.8 9.041 5.708C8.944 5.767 8.843 5.817 8.736 5.86C8.5 5.953 8.254 6 8 6L6 6L6 8C6 8.254 5.953 8.5 5.86 8.736C5.817 8.843 5.767 8.944 5.708 9.041C5.8 9.014 5.897 9 6 9L9 9L9 6ZM4.707 8.707C4.902 8.512 5 8.276 5 8L5 6L2 6L2 9L4 9C4.276 9 4.512 8.902 4.707 8.707ZM5 10C5 9.897 5.014 9.8 5.041 9.708C4.944 9.767 4.843 9.817 4.736 9.86C4.5 9.953 4.254 10 4 10L2 10L2 13L5 13L5 10Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "cohort-chart" (line-round), MIT. https://gentleface.com/icons/cohort-chart
import 'package:flutter/widgets.dart';

class CohortChartIcon extends StatelessWidget {
  const CohortChartIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _CohortChartIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _CohortChartIconPainter extends CustomPainter {
  _CohortChartIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(13.707, 5.707)
      ..cubicTo(13.512, 5.902, 13.276, 6, 13, 6)
      ..lineTo(10, 6)
      ..lineTo(10, 9)
      ..cubicTo(10, 9.276, 9.902, 9.512, 9.707, 9.707)
      ..cubicTo(9.512, 9.902, 9.276, 10, 9, 10)
      ..lineTo(6, 10)
      ..lineTo(6, 13)
      ..cubicTo(6, 13.276, 5.902, 13.512, 5.707, 13.707)
      ..cubicTo(5.512, 13.902, 5.276, 14, 5, 14)
      ..lineTo(2, 14)
      ..cubicTo(1.724, 14, 1.488, 13.902, 1.293, 13.707)
      ..cubicTo(1.098, 13.512, 1, 13.276, 1, 13)
      ..lineTo(1, 2)
      ..cubicTo(1, 1.724, 1.098, 1.488, 1.293, 1.293)
      ..cubicTo(1.488, 1.098, 1.724, 1, 2, 1)
      ..lineTo(13, 1)
      ..cubicTo(13.276, 1, 13.512, 1.098, 13.707, 1.293)
      ..cubicTo(13.902, 1.488, 14, 1.724, 14, 2)
      ..lineTo(14, 5)
      ..cubicTo(14, 5.276, 13.902, 5.512, 13.707, 5.707)
      ..close()
      ..moveTo(5, 5)
      ..lineTo(5, 2)
      ..lineTo(2, 2)
      ..lineTo(2, 5)
      ..lineTo(5, 5)
      ..close()
      ..moveTo(8, 5)
      ..cubicTo(8.276, 5, 8.512, 4.902, 8.707, 4.707)
      ..cubicTo(8.902, 4.512, 9, 4.276, 9, 4)
      ..lineTo(9, 2)
      ..lineTo(6, 2)
      ..lineTo(6, 5)
      ..lineTo(8, 5)
      ..close()
      ..moveTo(13, 2)
      ..lineTo(10, 2)
      ..lineTo(10, 4)
      ..cubicTo(10, 4.254, 9.953, 4.5, 9.86, 4.736)
      ..cubicTo(9.817, 4.843, 9.767, 4.944, 9.708, 5.041)
      ..cubicTo(9.8, 5.014, 9.897, 5, 10, 5)
      ..lineTo(13, 5)
      ..lineTo(13, 2)
      ..close()
      ..moveTo(9, 6)
      ..cubicTo(9, 5.897, 9.014, 5.8, 9.041, 5.708)
      ..cubicTo(8.944, 5.767, 8.843, 5.817, 8.736, 5.86)
      ..cubicTo(8.5, 5.953, 8.254, 6, 8, 6)
      ..lineTo(6, 6)
      ..lineTo(6, 8)
      ..cubicTo(6, 8.254, 5.953, 8.5, 5.86, 8.736)
      ..cubicTo(5.817, 8.843, 5.767, 8.944, 5.708, 9.041)
      ..cubicTo(5.8, 9.014, 5.897, 9, 6, 9)
      ..lineTo(9, 9)
      ..lineTo(9, 6)
      ..close()
      ..moveTo(4.707, 8.707)
      ..cubicTo(4.902, 8.512, 5, 8.276, 5, 8)
      ..lineTo(5, 6)
      ..lineTo(2, 6)
      ..lineTo(2, 9)
      ..lineTo(4, 9)
      ..cubicTo(4.276, 9, 4.512, 8.902, 4.707, 8.707)
      ..close()
      ..moveTo(5, 10)
      ..cubicTo(5, 9.897, 5.014, 9.8, 5.041, 9.708)
      ..cubicTo(4.944, 9.767, 4.843, 9.817, 4.736, 9.86)
      ..cubicTo(4.5, 9.953, 4.254, 10, 4, 10)
      ..lineTo(2, 10)
      ..lineTo(2, 13)
      ..lineTo(5, 13)
      ..lineTo(5, 10)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_CohortChartIconPainter old) => old.color != color;
}
```