# scatter-chart icon Scatter chart. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/scatter-chart - Category: Charts & data - Use it for: scatter chart, scatter plot, scatter graph - Tags: chart, graph, scatter, plot, dots, correlation, statistics, 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, cohort-chart, combo-chart, donut-chart, funnel-chart, gantt-chart, heatmap, histogram, line-chart, pie-chart, radar-chart, treemap, trending-down, trending-up, trending-up-down, venn-diagram, waterfall-chart - Component name: ScatterChartIcon - Added: 2026-10-15 ## Alternatives - `bubble-chart`: points sized by a third value (bubble-chart) ## Also fits - bubble chart: points of one size (scatter-chart) ## 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/scatter-chart.svg · PNG https://gentleface.com/png/line-round/16/scatter-chart.png · https://gentleface.com/png/line-round/32/scatter-chart.png · https://gentleface.com/png/line-round/48/scatter-chart.png - line-soft: https://gentleface.com/svg/line-soft/16/scatter-chart.svg · PNG https://gentleface.com/png/line-soft/16/scatter-chart.png · https://gentleface.com/png/line-soft/32/scatter-chart.png · https://gentleface.com/png/line-soft/48/scatter-chart.png - line-sharp: https://gentleface.com/svg/line-sharp/16/scatter-chart.svg · PNG https://gentleface.com/png/line-sharp/16/scatter-chart.png · https://gentleface.com/png/line-sharp/32/scatter-chart.png · https://gentleface.com/png/line-sharp/48/scatter-chart.png - solid-round: https://gentleface.com/svg/solid-round/16/scatter-chart.svg · PNG https://gentleface.com/png/solid-round/16/scatter-chart.png · https://gentleface.com/png/solid-round/32/scatter-chart.png · https://gentleface.com/png/solid-round/48/scatter-chart.png - solid-soft: https://gentleface.com/svg/solid-soft/16/scatter-chart.svg · PNG https://gentleface.com/png/solid-soft/16/scatter-chart.png · https://gentleface.com/png/solid-soft/32/scatter-chart.png · https://gentleface.com/png/solid-soft/48/scatter-chart.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/scatter-chart.svg · PNG https://gentleface.com/png/solid-sharp/16/scatter-chart.png · https://gentleface.com/png/solid-sharp/32/scatter-chart.png · https://gentleface.com/png/solid-sharp/48/scatter-chart.png The SVG of every style: https://gentleface.com/icons/scatter-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 ``` ### React ```tsx // Gentleface "scatter-chart" (line-round), MIT. https://gentleface.com/icons/scatter-chart import type { SVGProps } from 'react'; export function ScatterChartIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "scatter-chart" (line-round), MIT. https://gentleface.com/icons/scatter-chart. Takes the text color. */ .icon-scatter-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='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'/%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='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'/%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='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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "scatter-chart" (line-round), MIT. https://gentleface.com/icons/scatter-chart import SwiftUI struct ScatterChartIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.856, y: 14.144)) p.addCurve(to: CGPoint(x: 15, y: 14.5), control1: CGPoint(x: 14.952, y: 14.241), control2: CGPoint(x: 15, y: 14.359)) p.addCurve(to: CGPoint(x: 14.856, y: 14.856), control1: CGPoint(x: 15, y: 14.641), control2: CGPoint(x: 14.952, y: 14.759)) p.addCurve(to: CGPoint(x: 14.5, y: 15), control1: CGPoint(x: 14.759, y: 14.952), control2: CGPoint(x: 14.641, y: 15)) p.addLine(to: CGPoint(x: 1.5, y: 15)) p.addCurve(to: CGPoint(x: 1.144, y: 14.856), control1: CGPoint(x: 1.359, y: 15), control2: CGPoint(x: 1.241, y: 14.952)) p.addCurve(to: CGPoint(x: 1, y: 14.5), control1: CGPoint(x: 1.048, y: 14.759), control2: CGPoint(x: 1, y: 14.641)) p.addLine(to: CGPoint(x: 1, y: 1.5)) p.addCurve(to: CGPoint(x: 1.144, y: 1.144), control1: CGPoint(x: 1, y: 1.359), control2: CGPoint(x: 1.048, y: 1.241)) p.addCurve(to: CGPoint(x: 1.5, y: 1), control1: CGPoint(x: 1.241, y: 1.048), control2: CGPoint(x: 1.359, y: 1)) p.addCurve(to: CGPoint(x: 1.856, y: 1.144), control1: CGPoint(x: 1.641, y: 1), control2: CGPoint(x: 1.759, y: 1.048)) p.addCurve(to: CGPoint(x: 2, y: 1.5), control1: CGPoint(x: 1.952, y: 1.241), control2: CGPoint(x: 2, y: 1.359)) p.addLine(to: CGPoint(x: 2, y: 14)) p.addLine(to: CGPoint(x: 14.5, y: 14)) p.addCurve(to: CGPoint(x: 14.856, y: 14.144), control1: CGPoint(x: 14.641, y: 14), control2: CGPoint(x: 14.759, y: 14.048)) p.closeSubpath() p.move(to: CGPoint(x: 11.561, y: 2.439)) p.addCurve(to: CGPoint(x: 12, y: 3.5), control1: CGPoint(x: 11.854, y: 2.732), control2: CGPoint(x: 12, y: 3.086)) p.addCurve(to: CGPoint(x: 11.561, y: 4.561), control1: CGPoint(x: 12, y: 3.914), control2: CGPoint(x: 11.854, y: 4.268)) p.addCurve(to: CGPoint(x: 10.5, y: 5), control1: CGPoint(x: 11.268, y: 4.854), control2: CGPoint(x: 10.914, y: 5)) p.addCurve(to: CGPoint(x: 9.439, y: 4.561), control1: CGPoint(x: 10.086, y: 5), control2: CGPoint(x: 9.732, y: 4.854)) p.addCurve(to: CGPoint(x: 9, y: 3.5), control1: CGPoint(x: 9.146, y: 4.268), control2: CGPoint(x: 9, y: 3.914)) p.addCurve(to: CGPoint(x: 9.439, y: 2.439), control1: CGPoint(x: 9, y: 3.086), control2: CGPoint(x: 9.146, y: 2.732)) p.addCurve(to: CGPoint(x: 10.5, y: 2), control1: CGPoint(x: 9.732, y: 2.146), control2: CGPoint(x: 10.086, y: 2)) p.addCurve(to: CGPoint(x: 11.561, y: 2.439), control1: CGPoint(x: 10.914, y: 2), control2: CGPoint(x: 11.268, y: 2.146)) p.closeSubpath() p.move(to: CGPoint(x: 4.439, y: 4.439)) p.addCurve(to: CGPoint(x: 5.5, y: 4), control1: CGPoint(x: 4.732, y: 4.146), control2: CGPoint(x: 5.086, y: 4)) p.addCurve(to: CGPoint(x: 6.561, y: 4.439), control1: CGPoint(x: 5.914, y: 4), control2: CGPoint(x: 6.268, y: 4.146)) p.addCurve(to: CGPoint(x: 7, y: 5.5), control1: CGPoint(x: 6.854, y: 4.732), control2: CGPoint(x: 7, y: 5.086)) p.addCurve(to: CGPoint(x: 6.561, y: 6.561), control1: CGPoint(x: 7, y: 5.914), control2: CGPoint(x: 6.854, y: 6.268)) p.addCurve(to: CGPoint(x: 5.5, y: 7), control1: CGPoint(x: 6.268, y: 6.854), control2: CGPoint(x: 5.914, y: 7)) p.addCurve(to: CGPoint(x: 4.439, y: 6.561), control1: CGPoint(x: 5.086, y: 7), control2: CGPoint(x: 4.732, y: 6.854)) p.addCurve(to: CGPoint(x: 4, y: 5.5), control1: CGPoint(x: 4.146, y: 6.268), control2: CGPoint(x: 4, y: 5.914)) p.addCurve(to: CGPoint(x: 4.439, y: 4.439), control1: CGPoint(x: 4, y: 5.086), control2: CGPoint(x: 4.146, y: 4.732)) p.closeSubpath() p.move(to: CGPoint(x: 12.439, y: 6.439)) p.addCurve(to: CGPoint(x: 13.5, y: 6), control1: CGPoint(x: 12.732, y: 6.146), control2: CGPoint(x: 13.086, y: 6)) p.addCurve(to: CGPoint(x: 14.561, y: 6.439), control1: CGPoint(x: 13.914, y: 6), control2: CGPoint(x: 14.268, y: 6.146)) p.addCurve(to: CGPoint(x: 15, y: 7.5), control1: CGPoint(x: 14.854, y: 6.732), control2: CGPoint(x: 15, y: 7.086)) p.addCurve(to: CGPoint(x: 14.561, y: 8.561), control1: CGPoint(x: 15, y: 7.914), control2: CGPoint(x: 14.854, y: 8.268)) p.addCurve(to: CGPoint(x: 13.5, y: 9), control1: CGPoint(x: 14.268, y: 8.854), control2: CGPoint(x: 13.914, y: 9)) p.addCurve(to: CGPoint(x: 12.439, y: 8.561), control1: CGPoint(x: 13.086, y: 9), control2: CGPoint(x: 12.732, y: 8.854)) p.addCurve(to: CGPoint(x: 12, y: 7.5), control1: CGPoint(x: 12.146, y: 8.268), control2: CGPoint(x: 12, y: 7.914)) p.addCurve(to: CGPoint(x: 12.439, y: 6.439), control1: CGPoint(x: 12, y: 7.086), control2: CGPoint(x: 12.146, y: 6.732)) p.closeSubpath() p.move(to: CGPoint(x: 8.439, y: 7.439)) p.addCurve(to: CGPoint(x: 9.5, y: 7), control1: CGPoint(x: 8.732, y: 7.146), control2: CGPoint(x: 9.086, y: 7)) p.addCurve(to: CGPoint(x: 10.561, y: 7.439), control1: CGPoint(x: 9.914, y: 7), control2: CGPoint(x: 10.268, y: 7.146)) p.addCurve(to: CGPoint(x: 11, y: 8.5), control1: CGPoint(x: 10.854, y: 7.732), control2: CGPoint(x: 11, y: 8.086)) p.addCurve(to: CGPoint(x: 10.561, y: 9.561), control1: CGPoint(x: 11, y: 8.914), control2: CGPoint(x: 10.854, y: 9.268)) p.addCurve(to: CGPoint(x: 9.5, y: 10), control1: CGPoint(x: 10.268, y: 9.854), control2: CGPoint(x: 9.914, y: 10)) p.addCurve(to: CGPoint(x: 8.439, y: 9.561), control1: CGPoint(x: 9.086, y: 10), control2: CGPoint(x: 8.732, y: 9.854)) p.addCurve(to: CGPoint(x: 8, y: 8.5), control1: CGPoint(x: 8.146, y: 9.268), control2: CGPoint(x: 8, y: 8.914)) p.addCurve(to: CGPoint(x: 8.439, y: 7.439), control1: CGPoint(x: 8, y: 8.086), control2: CGPoint(x: 8.146, y: 7.732)) p.closeSubpath() p.move(to: CGPoint(x: 3.439, y: 9.439)) p.addCurve(to: CGPoint(x: 4.5, y: 9), control1: CGPoint(x: 3.732, y: 9.146), control2: CGPoint(x: 4.086, y: 9)) p.addCurve(to: CGPoint(x: 5.561, y: 9.439), control1: CGPoint(x: 4.914, y: 9), control2: CGPoint(x: 5.268, y: 9.146)) p.addCurve(to: CGPoint(x: 6, y: 10.5), control1: CGPoint(x: 5.854, y: 9.732), control2: CGPoint(x: 6, y: 10.086)) p.addCurve(to: CGPoint(x: 5.561, y: 11.561), control1: CGPoint(x: 6, y: 10.914), control2: CGPoint(x: 5.854, y: 11.268)) p.addCurve(to: CGPoint(x: 4.5, y: 12), control1: CGPoint(x: 5.268, y: 11.854), control2: CGPoint(x: 4.914, y: 12)) p.addCurve(to: CGPoint(x: 3.439, y: 11.561), control1: CGPoint(x: 4.086, y: 12), control2: CGPoint(x: 3.732, y: 11.854)) p.addCurve(to: CGPoint(x: 3, y: 10.5), control1: CGPoint(x: 3.146, y: 11.268), control2: CGPoint(x: 3, y: 10.914)) p.addCurve(to: CGPoint(x: 3.439, y: 9.439), control1: CGPoint(x: 3, y: 10.086), control2: CGPoint(x: 3.146, y: 9.732)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ScatterChartIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "scatter-chart" (line-round), MIT. https://gentleface.com/icons/scatter-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 ScatterChartIcon: ImageVector by lazy { ImageVector.Builder( name = "scatter-chart", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(ScatterChartIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "scatter-chart" (line-round), MIT. https://gentleface.com/icons/scatter-chart import 'package:flutter/widgets.dart'; class ScatterChartIcon extends StatelessWidget { const ScatterChartIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ScatterChartIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ScatterChartIconPainter extends CustomPainter { _ScatterChartIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.856, 14.144) ..cubicTo(14.952, 14.241, 15, 14.359, 15, 14.5) ..cubicTo(15, 14.641, 14.952, 14.759, 14.856, 14.856) ..cubicTo(14.759, 14.952, 14.641, 15, 14.5, 15) ..lineTo(1.5, 15) ..cubicTo(1.359, 15, 1.241, 14.952, 1.144, 14.856) ..cubicTo(1.048, 14.759, 1, 14.641, 1, 14.5) ..lineTo(1, 1.5) ..cubicTo(1, 1.359, 1.048, 1.241, 1.144, 1.144) ..cubicTo(1.241, 1.048, 1.359, 1, 1.5, 1) ..cubicTo(1.641, 1, 1.759, 1.048, 1.856, 1.144) ..cubicTo(1.952, 1.241, 2, 1.359, 2, 1.5) ..lineTo(2, 14) ..lineTo(14.5, 14) ..cubicTo(14.641, 14, 14.759, 14.048, 14.856, 14.144) ..close() ..moveTo(11.561, 2.439) ..cubicTo(11.854, 2.732, 12, 3.086, 12, 3.5) ..cubicTo(12, 3.914, 11.854, 4.268, 11.561, 4.561) ..cubicTo(11.268, 4.854, 10.914, 5, 10.5, 5) ..cubicTo(10.086, 5, 9.732, 4.854, 9.439, 4.561) ..cubicTo(9.146, 4.268, 9, 3.914, 9, 3.5) ..cubicTo(9, 3.086, 9.146, 2.732, 9.439, 2.439) ..cubicTo(9.732, 2.146, 10.086, 2, 10.5, 2) ..cubicTo(10.914, 2, 11.268, 2.146, 11.561, 2.439) ..close() ..moveTo(4.439, 4.439) ..cubicTo(4.732, 4.146, 5.086, 4, 5.5, 4) ..cubicTo(5.914, 4, 6.268, 4.146, 6.561, 4.439) ..cubicTo(6.854, 4.732, 7, 5.086, 7, 5.5) ..cubicTo(7, 5.914, 6.854, 6.268, 6.561, 6.561) ..cubicTo(6.268, 6.854, 5.914, 7, 5.5, 7) ..cubicTo(5.086, 7, 4.732, 6.854, 4.439, 6.561) ..cubicTo(4.146, 6.268, 4, 5.914, 4, 5.5) ..cubicTo(4, 5.086, 4.146, 4.732, 4.439, 4.439) ..close() ..moveTo(12.439, 6.439) ..cubicTo(12.732, 6.146, 13.086, 6, 13.5, 6) ..cubicTo(13.914, 6, 14.268, 6.146, 14.561, 6.439) ..cubicTo(14.854, 6.732, 15, 7.086, 15, 7.5) ..cubicTo(15, 7.914, 14.854, 8.268, 14.561, 8.561) ..cubicTo(14.268, 8.854, 13.914, 9, 13.5, 9) ..cubicTo(13.086, 9, 12.732, 8.854, 12.439, 8.561) ..cubicTo(12.146, 8.268, 12, 7.914, 12, 7.5) ..cubicTo(12, 7.086, 12.146, 6.732, 12.439, 6.439) ..close() ..moveTo(8.439, 7.439) ..cubicTo(8.732, 7.146, 9.086, 7, 9.5, 7) ..cubicTo(9.914, 7, 10.268, 7.146, 10.561, 7.439) ..cubicTo(10.854, 7.732, 11, 8.086, 11, 8.5) ..cubicTo(11, 8.914, 10.854, 9.268, 10.561, 9.561) ..cubicTo(10.268, 9.854, 9.914, 10, 9.5, 10) ..cubicTo(9.086, 10, 8.732, 9.854, 8.439, 9.561) ..cubicTo(8.146, 9.268, 8, 8.914, 8, 8.5) ..cubicTo(8, 8.086, 8.146, 7.732, 8.439, 7.439) ..close() ..moveTo(3.439, 9.439) ..cubicTo(3.732, 9.146, 4.086, 9, 4.5, 9) ..cubicTo(4.914, 9, 5.268, 9.146, 5.561, 9.439) ..cubicTo(5.854, 9.732, 6, 10.086, 6, 10.5) ..cubicTo(6, 10.914, 5.854, 11.268, 5.561, 11.561) ..cubicTo(5.268, 11.854, 4.914, 12, 4.5, 12) ..cubicTo(4.086, 12, 3.732, 11.854, 3.439, 11.561) ..cubicTo(3.146, 11.268, 3, 10.914, 3, 10.5) ..cubicTo(3, 10.086, 3.146, 9.732, 3.439, 9.439) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ScatterChartIconPainter old) => old.color != color; } ```