Gentleface › Charts & data › scatter-chart

scatter-chart icon

Scatter chart: scatter chart, scatter plot, scatter graph. 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="M14.856 14.144C14.952 14.241 15 14.359 15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1C1.641 1 1.759 1.048 1.856 1.144C1.952 1.241 2 1.359 2 1.5L2 14L14.5 14C14.641 14 14.759 14.048 14.856 14.144ZM11.561 2.439C11.854 2.732 12 3.086 12 3.5C12 3.914 11.854 4.268 11.561 4.561C11.268 4.854 10.914 5 10.5 5C10.086 5 9.732 4.854 9.439 4.561C9.146 4.268 9 3.914 9 3.5C9 3.086 9.146 2.732 9.439 2.439C9.732 2.146 10.086 2 10.5 2C10.914 2 11.268 2.146 11.561 2.439ZM4.439 4.439C4.732 4.146 5.086 4 5.5 4C5.914 4 6.268 4.146 6.561 4.439C6.854 4.732 7 5.086 7 5.5C7 5.914 6.854 6.268 6.561 6.561C6.268 6.854 5.914 7 5.5 7C5.086 7 4.732 6.854 4.439 6.561C4.146 6.268 4 5.914 4 5.5C4 5.086 4.146 4.732 4.439 4.439ZM12.439 6.439C12.732 6.146 13.086 6 13.5 6C13.914 6 14.268 6.146 14.561 6.439C14.854 6.732 15 7.086 15 7.5C15 7.914 14.854 8.268 14.561 8.561C14.268 8.854 13.914 9 13.5 9C13.086 9 12.732 8.854 12.439 8.561C12.146 8.268 12 7.914 12 7.5C12 7.086 12.146 6.732 12.439 6.439ZM8.439 7.439C8.732 7.146 9.086 7 9.5 7C9.914 7 10.268 7.146 10.561 7.439C10.854 7.732 11 8.086 11 8.5C11 8.914 10.854 9.268 10.561 9.561C10.268 9.854 9.914 10 9.5 10C9.086 10 8.732 9.854 8.439 9.561C8.146 9.268 8 8.914 8 8.5C8 8.086 8.146 7.732 8.439 7.439ZM3.439 9.439C3.732 9.146 4.086 9 4.5 9C4.914 9 5.268 9.146 5.561 9.439C5.854 9.732 6 10.086 6 10.5C6 10.914 5.854 11.268 5.561 11.561C5.268 11.854 4.914 12 4.5 12C4.086 12 3.732 11.854 3.439 11.561C3.146 11.268 3 10.914 3 10.5C3 10.086 3.146 9.732 3.439 9.439Z"/></svg>

React

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

export function ScatterChartIcon(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="M14.856 14.144C14.952 14.241 15 14.359 15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1C1.641 1 1.759 1.048 1.856 1.144C1.952 1.241 2 1.359 2 1.5L2 14L14.5 14C14.641 14 14.759 14.048 14.856 14.144ZM11.561 2.439C11.854 2.732 12 3.086 12 3.5C12 3.914 11.854 4.268 11.561 4.561C11.268 4.854 10.914 5 10.5 5C10.086 5 9.732 4.854 9.439 4.561C9.146 4.268 9 3.914 9 3.5C9 3.086 9.146 2.732 9.439 2.439C9.732 2.146 10.086 2 10.5 2C10.914 2 11.268 2.146 11.561 2.439ZM4.439 4.439C4.732 4.146 5.086 4 5.5 4C5.914 4 6.268 4.146 6.561 4.439C6.854 4.732 7 5.086 7 5.5C7 5.914 6.854 6.268 6.561 6.561C6.268 6.854 5.914 7 5.5 7C5.086 7 4.732 6.854 4.439 6.561C4.146 6.268 4 5.914 4 5.5C4 5.086 4.146 4.732 4.439 4.439ZM12.439 6.439C12.732 6.146 13.086 6 13.5 6C13.914 6 14.268 6.146 14.561 6.439C14.854 6.732 15 7.086 15 7.5C15 7.914 14.854 8.268 14.561 8.561C14.268 8.854 13.914 9 13.5 9C13.086 9 12.732 8.854 12.439 8.561C12.146 8.268 12 7.914 12 7.5C12 7.086 12.146 6.732 12.439 6.439ZM8.439 7.439C8.732 7.146 9.086 7 9.5 7C9.914 7 10.268 7.146 10.561 7.439C10.854 7.732 11 8.086 11 8.5C11 8.914 10.854 9.268 10.561 9.561C10.268 9.854 9.914 10 9.5 10C9.086 10 8.732 9.854 8.439 9.561C8.146 9.268 8 8.914 8 8.5C8 8.086 8.146 7.732 8.439 7.439ZM3.439 9.439C3.732 9.146 4.086 9 4.5 9C4.914 9 5.268 9.146 5.561 9.439C5.854 9.732 6 10.086 6 10.5C6 10.914 5.854 11.268 5.561 11.561C5.268 11.854 4.914 12 4.5 12C4.086 12 3.732 11.854 3.439 11.561C3.146 11.268 3 10.914 3 10.5C3 10.086 3.146 9.732 3.439 9.439Z" />
    </svg>
  );
}

Vue

Vue: see /icons/scatter-chart.md

Svelte

Svelte: see /icons/scatter-chart.md

HTML img

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

CSS

CSS: see /icons/scatter-chart.md

Data URL

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

Sprite

Sprite: see /icons/scatter-chart.md

SwiftUI

SwiftUI: see /icons/scatter-chart.md

Compose

Compose: see /icons/scatter-chart.md

Android XML

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

Flutter

Flutter: see /icons/scatter-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

scatter chart, scatter plot, scatter graph

Alternatives

bubble-chart: points sized by a third value (bubble-chart)

Also fits

bubble chart: points of one size (scatter-chart)

Tags

chart, graph, scatter, plot, dots, correlation, statistics, data

Category

Charts & data

Component name

ScatterChartIcon

History

2026-10-15 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/scatter-chart.json · Markdown: /icons/scatter-chart.md · SVG: https://gentleface.com/svg/{style}/16/scatter-chart.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/scatter-chart.png

scatter-chart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp