radial-bar-chart icon

Code line-round

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M15 8C15 11.866 11.866 15 8 15C4.134 15 1 11.866 1 8L3 8C3 10.761 5.239 13 8 13C10.761 13 13 10.761 13 8C13 5.239 10.761 3 8 3L8 1C11.866 1 15 4.134 15 8ZM8 12L8 10C9.105 10 10 9.105 10 8C10 6.895 9.105 6 8 6L8 4C10.209 4 12 5.791 12 8C12 10.209 10.209 12 8 12Z"/></svg>

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

export function RadialBarChartIcon(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="M15 8C15 11.866 11.866 15 8 15C4.134 15 1 11.866 1 8L3 8C3 10.761 5.239 13 8 13C10.761 13 13 10.761 13 8C13 5.239 10.761 3 8 3L8 1C11.866 1 15 4.134 15 8ZM8 12L8 10C9.105 10 10 9.105 10 8C10 6.895 9.105 6 8 6L8 4C10.209 4 12 5.791 12 8C12 10.209 10.209 12 8 12Z" />
    </svg>
  );
}

Vue: see /icons/radial-bar-chart.md

Svelte: see /icons/radial-bar-chart.md

HTML img: see /icons/radial-bar-chart.md

CSS: see /icons/radial-bar-chart.md

Data URL: see /icons/radial-bar-chart.md

Sprite: see /icons/radial-bar-chart.md

SwiftUI: see /icons/radial-bar-chart.md

Compose: see /icons/radial-bar-chart.md

Android XML: see /icons/radial-bar-chart.md

Flutter: see /icons/radial-bar-chart.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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

radial bar chart, radial chart, concentric progress, activity rings

Tags

radial bar chart, radial chart, circular bar, concentric, progress rings, activity rings, chart

Category

Charts & data

Component name

RadialBarChartIcon

History

• 2026-11-12 20 px drawn, 24 px drawn, added

Family 70

More charts & data icons

chart-legend dimension-horizontal flowchart gauge infographic join-left join-right node-graph node-graph-minus node-graph-plus touchpoints word-cloud · all charts & data icons

For agents

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