Gentleface › Charts & data › cohort-chart

cohort-chart icon

Cohort chart: cohort analysis, retention chart, retention analysis. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

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

// 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: see /icons/cohort-chart.md

Svelte

Svelte: see /icons/cohort-chart.md

HTML img

HTML img: see /icons/cohort-chart.md

CSS

CSS: see /icons/cohort-chart.md

Data URL

Data URL: see /icons/cohort-chart.md

Sprite

Sprite: see /icons/cohort-chart.md

SwiftUI

SwiftUI: see /icons/cohort-chart.md

Compose

Compose: see /icons/cohort-chart.md

Android XML

Android XML: see /icons/cohort-chart.md

Flutter

Flutter: see /icons/cohort-chart.md

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. 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. More in how to use.

Meaning

Use it for

cohort analysis, retention chart, retention analysis

Don’t confuse with

heatmap: a full grid of density values

Also fits

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

Tags

cohort, retention, chart, analytics, matrix, triangle, users, data

Category

Charts & data

Component name

CohortChartIcon

History

2026-10-16 added

Family 33

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

More charts & data icons

chart-legend flowchart gauge node-graph word-cloud · all charts & data icons

For agents

Metadata: /icons/cohort-chart.json · Markdown: /icons/cohort-chart.md · SVG: https://gentleface.com/svg/{style}/16/cohort-chart.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/cohort-chart.png

cohort-chart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp