Gentleface › Charts & data › sankey-chart-three

sankey-chart-three icon

Sankey chart three: sankey diagram, path 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 5L13 1L15 1L15 5L13 5ZM4.432 2.991C5.148 2.963 5.795 2.861 6.375 2.688C6.653 2.604 6.939 2.497 7.234 2.367C7.411 2.289 7.667 2.167 8 2C8.333 1.833 8.589 1.711 8.766 1.633C9.061 1.503 9.347 1.396 9.625 1.313C10.195 1.142 10.83 1.041 11.53 1.01C11.65 1.005 11.766 1.047 11.854 1.128C11.942 1.208 11.994 1.321 12 1.44C12 1.447 12 1.453 12 1.46L12 4.559C12 4.8 11.809 4.999 11.568 5.009C10.852 5.037 10.205 5.139 9.625 5.313C9.347 5.396 9.061 5.503 8.766 5.633C8.589 5.711 8.333 5.833 8 6C7.667 6.167 7.411 6.289 7.234 6.367C6.939 6.497 6.653 6.604 6.375 6.688C5.805 6.858 5.17 6.959 4.47 6.99C4.35 6.995 4.234 6.953 4.146 6.872C4.058 6.792 4.006 6.679 4 6.56C4 6.553 4 6.547 4 6.54L4 3.441C4 3.2 4.191 3.001 4.432 2.991ZM3 14L1 14L1 3L3 3L3 14ZM13 9L13 7L15 7L15 9L13 9ZM4 9.545L4 8.445C4 8.201 4.196 8.001 4.441 7.996C5.153 7.981 5.798 7.93 6.375 7.844C6.792 7.781 7.333 7.667 8 7.5C8.667 7.333 9.208 7.219 9.625 7.156C10.198 7.07 10.836 7.02 11.54 7.005L11.55 7.005C11.799 7.005 12 7.206 12 7.455L12 8.555C12 8.799 11.804 8.999 11.559 9.004C10.847 9.019 10.202 9.07 9.625 9.156C9.208 9.219 8.667 9.333 8 9.5C7.333 9.667 6.792 9.781 6.375 9.844C5.802 9.93 5.164 9.98 4.46 9.995L4.45 9.995C4.201 9.995 4 9.794 4 9.545ZM12 13C12 13.276 11.902 13.512 11.707 13.707C11.512 13.902 11.276 14 11 14L5 14C4.724 14 4.488 13.902 4.293 13.707C4.098 13.512 4 13.276 4 13C4 12.724 4.098 12.488 4.293 12.293C4.488 12.098 4.724 12 5 12L11 12C11.276 12 11.512 12.098 11.707 12.293C11.902 12.488 12 12.724 12 13ZM13 14L13 12L15 12L15 14L13 14Z"/></svg>

React

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

export function SankeyChartThreeIcon(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 5L13 1L15 1L15 5L13 5ZM4.432 2.991C5.148 2.963 5.795 2.861 6.375 2.688C6.653 2.604 6.939 2.497 7.234 2.367C7.411 2.289 7.667 2.167 8 2C8.333 1.833 8.589 1.711 8.766 1.633C9.061 1.503 9.347 1.396 9.625 1.313C10.195 1.142 10.83 1.041 11.53 1.01C11.65 1.005 11.766 1.047 11.854 1.128C11.942 1.208 11.994 1.321 12 1.44C12 1.447 12 1.453 12 1.46L12 4.559C12 4.8 11.809 4.999 11.568 5.009C10.852 5.037 10.205 5.139 9.625 5.313C9.347 5.396 9.061 5.503 8.766 5.633C8.589 5.711 8.333 5.833 8 6C7.667 6.167 7.411 6.289 7.234 6.367C6.939 6.497 6.653 6.604 6.375 6.688C5.805 6.858 5.17 6.959 4.47 6.99C4.35 6.995 4.234 6.953 4.146 6.872C4.058 6.792 4.006 6.679 4 6.56C4 6.553 4 6.547 4 6.54L4 3.441C4 3.2 4.191 3.001 4.432 2.991ZM3 14L1 14L1 3L3 3L3 14ZM13 9L13 7L15 7L15 9L13 9ZM4 9.545L4 8.445C4 8.201 4.196 8.001 4.441 7.996C5.153 7.981 5.798 7.93 6.375 7.844C6.792 7.781 7.333 7.667 8 7.5C8.667 7.333 9.208 7.219 9.625 7.156C10.198 7.07 10.836 7.02 11.54 7.005L11.55 7.005C11.799 7.005 12 7.206 12 7.455L12 8.555C12 8.799 11.804 8.999 11.559 9.004C10.847 9.019 10.202 9.07 9.625 9.156C9.208 9.219 8.667 9.333 8 9.5C7.333 9.667 6.792 9.781 6.375 9.844C5.802 9.93 5.164 9.98 4.46 9.995L4.45 9.995C4.201 9.995 4 9.794 4 9.545ZM12 13C12 13.276 11.902 13.512 11.707 13.707C11.512 13.902 11.276 14 11 14L5 14C4.724 14 4.488 13.902 4.293 13.707C4.098 13.512 4 13.276 4 13C4 12.724 4.098 12.488 4.293 12.293C4.488 12.098 4.724 12 5 12L11 12C11.276 12 11.512 12.098 11.707 12.293C11.902 12.488 12 12.724 12 13ZM13 14L13 12L15 12L15 14L13 14Z" />
    </svg>
  );
}

Vue

Vue: see /icons/sankey-chart-three.md

Svelte

Svelte: see /icons/sankey-chart-three.md

HTML img

HTML img: see /icons/sankey-chart-three.md

CSS

CSS: see /icons/sankey-chart-three.md

Data URL

Data URL: see /icons/sankey-chart-three.md

Sprite

Sprite: see /icons/sankey-chart-three.md

SwiftUI

SwiftUI: see /icons/sankey-chart-three.md

Compose

Compose: see /icons/sankey-chart-three.md

Android XML

Android XML: see /icons/sankey-chart-three.md

Flutter

Flutter: see /icons/sankey-chart-three.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

sankey diagram, path analysis

Built from

variant of sankey-chart

Tags

sankey, flow, paths, journey, funnel, chart, analytics, streams

Category

Charts & data

Component name

SankeyChartThreeIcon

History

2026-10-30 16 px redrawn, added

Family 36

sankey-chart 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

More charts & data icons

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

For agents

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

sankey-chart-three icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp