line-chart icon

Line chart: line chart, graph, line graph, time series. 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.144ZM7.146 7.146C7.246 7.047 7.364 6.997 7.5 6.997C7.636 6.997 7.754 7.047 7.854 7.146L9.5 8.793L13.146 5.146C13.246 5.047 13.364 4.997 13.5 4.997C13.636 4.997 13.754 5.047 13.854 5.146C13.951 5.244 14 5.362 14 5.5C14 5.638 13.951 5.756 13.854 5.854L9.854 9.854C9.754 9.953 9.636 10.003 9.5 10.003C9.364 10.003 9.246 9.953 9.146 9.854L7.5 8.207L4.854 10.854C4.756 10.951 4.638 11 4.5 11C4.362 11 4.244 10.951 4.146 10.854C4.047 10.754 3.997 10.636 3.997 10.5C3.997 10.364 4.047 10.246 4.146 10.146L7.146 7.146Z"/></svg>

React

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

export function LineChartIcon(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.144ZM7.146 7.146C7.246 7.047 7.364 6.997 7.5 6.997C7.636 6.997 7.754 7.047 7.854 7.146L9.5 8.793L13.146 5.146C13.246 5.047 13.364 4.997 13.5 4.997C13.636 4.997 13.754 5.047 13.854 5.146C13.951 5.244 14 5.362 14 5.5C14 5.638 13.951 5.756 13.854 5.854L9.854 9.854C9.754 9.953 9.636 10.003 9.5 10.003C9.364 10.003 9.246 9.953 9.146 9.854L7.5 8.207L4.854 10.854C4.756 10.951 4.638 11 4.5 11C4.362 11 4.244 10.951 4.146 10.854C4.047 10.754 3.997 10.636 3.997 10.5C3.997 10.364 4.047 10.246 4.146 10.146L7.146 7.146Z" />
    </svg>
  );
}

Vue

Vue: see /icons/line-chart.md

Svelte

Svelte: see /icons/line-chart.md

HTML img

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

CSS

CSS: see /icons/line-chart.md

Data URL

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

Sprite

Sprite: see /icons/line-chart.md

SwiftUI

SwiftUI: see /icons/line-chart.md

Compose

Compose: see /icons/line-chart.md

Android XML

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

Flutter

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

line chart, graph, line graph, time series, metrics

Alternatives

area-chart: the area under the line filled (area-chart)
trending-up: only the direction of a trend (trending-up)
node-graph: a network of nodes and links (knowledge-graph)
bar-chart: a bar chart (bar-chart)

Also fits

activity: a metric over time with axes (line-chart)
area chart: a line without the filled area (line-chart)
analytics: trends over time (line-chart)
candlestick chart: a simple price line (line-chart)
performance: a performance metric over time (line-chart)
trace: metrics over time (metrics)

Tags

chart, graph, plot, statistics, report, data

Category

Charts & data

Component name

LineChartIcon

History

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

line-chart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp