Gentleface › Charts & data › candlestick-chart

candlestick-chart icon

Candlestick chart: candlestick chart, stock chart, ohlc chart, trading chart. 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.5 14C14.641 14 14.759 14.048 14.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 14ZM11.144 1.144C11.241 1.048 11.359 1 11.5 1C11.641 1 11.759 1.048 11.856 1.144C11.952 1.241 12 1.359 12 1.5L12 3L13.5 3C13.641 3 13.759 3.048 13.856 3.144C13.952 3.241 14 3.359 14 3.5L14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L12 7L12 8.5C12 8.641 11.952 8.759 11.856 8.856C11.759 8.952 11.641 9 11.5 9C11.359 9 11.241 8.952 11.144 8.856C11.048 8.759 11 8.641 11 8.5L11 7L9.5 7C9.359 7 9.241 6.952 9.144 6.856C9.048 6.759 9 6.641 9 6.5L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11 3L11 1.5C11 1.359 11.048 1.241 11.144 1.144ZM7.856 6.144C7.952 6.241 8 6.359 8 6.5L8 10.5C8 10.641 7.952 10.759 7.856 10.856C7.759 10.952 7.641 11 7.5 11L6 11L6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5L5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 6.5C3 6.359 3.048 6.241 3.144 6.144C3.241 6.048 3.359 6 3.5 6L5 6L5 4.5C5 4.359 5.048 4.241 5.144 4.144C5.241 4.048 5.359 4 5.5 4C5.641 4 5.759 4.048 5.856 4.144C5.952 4.241 6 4.359 6 4.5L6 6L7.5 6C7.641 6 7.759 6.048 7.856 6.144ZM10 6L13 6L13 4L10 4L10 6ZM7 7L4 7L4 10L7 10L7 7Z"/></svg>

React

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

export function CandlestickChartIcon(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.5 14C14.641 14 14.759 14.048 14.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 14ZM11.144 1.144C11.241 1.048 11.359 1 11.5 1C11.641 1 11.759 1.048 11.856 1.144C11.952 1.241 12 1.359 12 1.5L12 3L13.5 3C13.641 3 13.759 3.048 13.856 3.144C13.952 3.241 14 3.359 14 3.5L14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L12 7L12 8.5C12 8.641 11.952 8.759 11.856 8.856C11.759 8.952 11.641 9 11.5 9C11.359 9 11.241 8.952 11.144 8.856C11.048 8.759 11 8.641 11 8.5L11 7L9.5 7C9.359 7 9.241 6.952 9.144 6.856C9.048 6.759 9 6.641 9 6.5L9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L11 3L11 1.5C11 1.359 11.048 1.241 11.144 1.144ZM7.856 6.144C7.952 6.241 8 6.359 8 6.5L8 10.5C8 10.641 7.952 10.759 7.856 10.856C7.759 10.952 7.641 11 7.5 11L6 11L6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5L5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 6.5C3 6.359 3.048 6.241 3.144 6.144C3.241 6.048 3.359 6 3.5 6L5 6L5 4.5C5 4.359 5.048 4.241 5.144 4.144C5.241 4.048 5.359 4 5.5 4C5.641 4 5.759 4.048 5.856 4.144C5.952 4.241 6 4.359 6 4.5L6 6L7.5 6C7.641 6 7.759 6.048 7.856 6.144ZM10 6L13 6L13 4L10 4L10 6ZM7 7L4 7L4 10L7 10L7 7Z" />
    </svg>
  );
}

Vue

Vue: see /icons/candlestick-chart.md

Svelte

Svelte: see /icons/candlestick-chart.md

HTML img

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

CSS

CSS: see /icons/candlestick-chart.md

Data URL

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

Sprite

Sprite: see /icons/candlestick-chart.md

SwiftUI

SwiftUI: see /icons/candlestick-chart.md

Compose

Compose: see /icons/candlestick-chart.md

Android XML

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

Flutter

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

candlestick chart, stock chart, ohlc chart, trading chart

Alternatives

line-chart: a simple price line (line-chart)
banknote-trending-up: investment returns (investment)

Also fits

investment: a stock or price chart

Tags

candlestick, candle, stock, ohlc, trading, market, price, chart, finance

Category

Charts & data

Component name

CandlestickChartIcon

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

candlestick-chart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp