# radial-bar-chart icon
Radial bar chart. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/radial-bar-chart
- Category: Charts & data
- 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
- Family: activity, activity-alert, activity-check, activity-gear, activity-off, activity-plus, activity-search, activity-sparkle, activity-user, area-chart, area-chart-stacked, axis-x, axis-y, bar-chart, bar-chart-alert, bar-chart-arrow-down, bar-chart-arrow-up, bar-chart-clock, bar-chart-gear, bar-chart-grouped, bar-chart-grouped-filled, bar-chart-horizontal, bar-chart-link, bar-chart-off, bar-chart-pencil, bar-chart-plus, bar-chart-search, bar-chart-sparkle, bar-chart-stacked, bar-chart-star, bar-chart-threshold, bar-chart-x, box-plot-chart, bubble-chart, bullet-chart, candlestick-chart, candlestick-chart-pause, candlestick-chart-play, candlestick-chart-shield, candlestick-chart-swap, candlestick-chart-user, cohort-chart, combo-chart, distribution, donut-chart, funnel-chart, gantt-chart, heatmap, histogram, line-chart, line-chart-forecast, pie-chart, polar-chart, pyramid-chart, qq-plot, radar-chart, sankey-chart, sankey-chart-three, scatter-chart, scatter-chart-trendline, sunburst-chart, treemap, trending-down, trending-up, trending-up-alert, trending-up-check, trending-up-down, trending-up-sparkle, venn-diagram, waterfall-chart
- Component name: RadialBarChartIcon
- Added: 2026-11-12
## Files
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.
- line-round: https://gentleface.com/svg/line-round/16/radial-bar-chart.svg · PNG https://gentleface.com/png/line-round/16/radial-bar-chart.png · https://gentleface.com/png/line-round/32/radial-bar-chart.png · https://gentleface.com/png/line-round/48/radial-bar-chart.png
- line-soft: https://gentleface.com/svg/line-soft/16/radial-bar-chart.svg · PNG https://gentleface.com/png/line-soft/16/radial-bar-chart.png · https://gentleface.com/png/line-soft/32/radial-bar-chart.png · https://gentleface.com/png/line-soft/48/radial-bar-chart.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/radial-bar-chart.svg · PNG https://gentleface.com/png/line-sharp/16/radial-bar-chart.png · https://gentleface.com/png/line-sharp/32/radial-bar-chart.png · https://gentleface.com/png/line-sharp/48/radial-bar-chart.png
- solid-round: https://gentleface.com/svg/solid-round/16/radial-bar-chart.svg · PNG https://gentleface.com/png/solid-round/16/radial-bar-chart.png · https://gentleface.com/png/solid-round/32/radial-bar-chart.png · https://gentleface.com/png/solid-round/48/radial-bar-chart.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/radial-bar-chart.svg · PNG https://gentleface.com/png/solid-soft/16/radial-bar-chart.png · https://gentleface.com/png/solid-soft/32/radial-bar-chart.png · https://gentleface.com/png/solid-soft/48/radial-bar-chart.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/radial-bar-chart.svg · PNG https://gentleface.com/png/solid-sharp/16/radial-bar-chart.png · https://gentleface.com/png/solid-sharp/32/radial-bar-chart.png · https://gentleface.com/png/solid-sharp/48/radial-bar-chart.png
The SVG of every style: https://gentleface.com/icons/radial-bar-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 "radial-bar-chart" (line-round), MIT. https://gentleface.com/icons/radial-bar-chart
import type { SVGProps } from 'react';
export function RadialBarChartIcon(props: SVGProps) {
return (
);
}
```
### Vue
```vue
```
### Svelte
```svelte
```
### HTML img
```html
```
### CSS
```css
/* Gentleface "radial-bar-chart" (line-round), MIT. https://gentleface.com/icons/radial-bar-chart. Takes the text color. */
.icon-radial-bar-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='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'/%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='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'/%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='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'/%3E%3C/svg%3E
```
### Sprite
```html
```
### SwiftUI
```swift
// Gentleface "radial-bar-chart" (line-round), MIT. https://gentleface.com/icons/radial-bar-chart
import SwiftUI
struct RadialBarChartIcon: Shape {
func path(in rect: CGRect) -> Path {
var p = Path()
p.move(to: CGPoint(x: 15, y: 8))
p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 15, y: 11.866), control2: CGPoint(x: 11.866, y: 15))
p.addCurve(to: CGPoint(x: 1, y: 8), control1: CGPoint(x: 4.134, y: 15), control2: CGPoint(x: 1, y: 11.866))
p.addLine(to: CGPoint(x: 3, y: 8))
p.addCurve(to: CGPoint(x: 8, y: 13), control1: CGPoint(x: 3, y: 10.761), control2: CGPoint(x: 5.239, y: 13))
p.addCurve(to: CGPoint(x: 13, y: 8), control1: CGPoint(x: 10.761, y: 13), control2: CGPoint(x: 13, y: 10.761))
p.addCurve(to: CGPoint(x: 8, y: 3), control1: CGPoint(x: 13, y: 5.239), control2: CGPoint(x: 10.761, y: 3))
p.addLine(to: CGPoint(x: 8, y: 1))
p.addCurve(to: CGPoint(x: 15, y: 8), control1: CGPoint(x: 11.866, y: 1), control2: CGPoint(x: 15, y: 4.134))
p.closeSubpath()
p.move(to: CGPoint(x: 8, y: 12))
p.addLine(to: CGPoint(x: 8, y: 10))
p.addCurve(to: CGPoint(x: 10, y: 8), control1: CGPoint(x: 9.105, y: 10), control2: CGPoint(x: 10, y: 9.105))
p.addCurve(to: CGPoint(x: 8, y: 6), control1: CGPoint(x: 10, y: 6.895), control2: CGPoint(x: 9.105, y: 6))
p.addLine(to: CGPoint(x: 8, y: 4))
p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 10.209, y: 4), control2: CGPoint(x: 12, y: 5.791))
p.addCurve(to: CGPoint(x: 8, y: 12), control1: CGPoint(x: 12, y: 10.209), control2: CGPoint(x: 10.209, y: 12))
p.closeSubpath()
return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
}
}
// RadialBarChartIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```
### Compose
```kotlin
// Gentleface "radial-bar-chart" (line-round), MIT. https://gentleface.com/icons/radial-bar-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 RadialBarChartIcon: ImageVector by lazy {
ImageVector.Builder(
name = "radial-bar-chart", defaultWidth = 16.dp, defaultHeight = 16.dp,
viewportWidth = 16f, viewportHeight = 16f,
).addPath(
pathData = addPathNodes("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"),
fill = SolidColor(Color.Black),
).build()
}
// Icon(RadialBarChartIcon, contentDescription = null) tints it with LocalContentColor.
```
### Android XML
```xml
```
### Flutter
```dart
// Gentleface "radial-bar-chart" (line-round), MIT. https://gentleface.com/icons/radial-bar-chart
import 'package:flutter/widgets.dart';
class RadialBarChartIcon extends StatelessWidget {
const RadialBarChartIcon({super.key, this.size = 16, this.color});
final double size;
final Color? color;
@override
Widget build(BuildContext context) => CustomPaint(
size: Size.square(size),
painter: _RadialBarChartIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
);
}
class _RadialBarChartIconPainter extends CustomPainter {
_RadialBarChartIconPainter(this.color);
final Color color;
@override
void paint(Canvas canvas, Size size) {
canvas.scale(size.width / 16, size.height / 16);
final p = Path()
..moveTo(15, 8)
..cubicTo(15, 11.866, 11.866, 15, 8, 15)
..cubicTo(4.134, 15, 1, 11.866, 1, 8)
..lineTo(3, 8)
..cubicTo(3, 10.761, 5.239, 13, 8, 13)
..cubicTo(10.761, 13, 13, 10.761, 13, 8)
..cubicTo(13, 5.239, 10.761, 3, 8, 3)
..lineTo(8, 1)
..cubicTo(11.866, 1, 15, 4.134, 15, 8)
..close()
..moveTo(8, 12)
..lineTo(8, 10)
..cubicTo(9.105, 10, 10, 9.105, 10, 8)
..cubicTo(10, 6.895, 9.105, 6, 8, 6)
..lineTo(8, 4)
..cubicTo(10.209, 4, 12, 5.791, 12, 8)
..cubicTo(12, 10.209, 10.209, 12, 8, 12)
..close();
canvas.drawPath(p, Paint()..color = color);
}
@override
bool shouldRepaint(_RadialBarChartIconPainter old) => old.color != color;
}
```