# bar-chart-grouped-filled icon Bar chart grouped filled. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/bar-chart-grouped-filled - Category: Charts & data - Built from: variant of bar-chart-grouped - Tags: chart, graph, bars, grouped, clustered, column, comparison, series, statistics, report, filled - Family: bar-chart-grouped, activity, activity-search, area-chart, area-chart-stacked, bar-chart, bar-chart-clock, 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, scatter-chart, treemap, trending-down, trending-up, trending-up-down, venn-diagram, waterfall-chart - Component name: BarChartGroupedFilledIcon - Added: 2026-10-16 ## 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/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/line-round/16/bar-chart-grouped-filled.png · https://gentleface.com/png/line-round/32/bar-chart-grouped-filled.png · https://gentleface.com/png/line-round/48/bar-chart-grouped-filled.png - line-soft: https://gentleface.com/svg/line-soft/16/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/line-soft/16/bar-chart-grouped-filled.png · https://gentleface.com/png/line-soft/32/bar-chart-grouped-filled.png · https://gentleface.com/png/line-soft/48/bar-chart-grouped-filled.png - line-sharp: https://gentleface.com/svg/line-sharp/16/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/line-sharp/16/bar-chart-grouped-filled.png · https://gentleface.com/png/line-sharp/32/bar-chart-grouped-filled.png · https://gentleface.com/png/line-sharp/48/bar-chart-grouped-filled.png - solid-round: https://gentleface.com/svg/solid-round/16/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/solid-round/16/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-round/32/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-round/48/bar-chart-grouped-filled.png - solid-soft: https://gentleface.com/svg/solid-soft/16/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/solid-soft/16/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-soft/32/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-soft/48/bar-chart-grouped-filled.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/bar-chart-grouped-filled.svg · PNG https://gentleface.com/png/solid-sharp/16/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-sharp/32/bar-chart-grouped-filled.png · https://gentleface.com/png/solid-sharp/48/bar-chart-grouped-filled.png The SVG of every style: https://gentleface.com/icons/bar-chart-grouped-filled.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 "bar-chart-grouped-filled" (line-round), MIT. https://gentleface.com/icons/bar-chart-grouped-filled import type { SVGProps } from 'react'; export function BarChartGroupedFilledIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "bar-chart-grouped-filled" (line-round), MIT. https://gentleface.com/icons/bar-chart-grouped-filled. Takes the text color. */ .icon-bar-chart-grouped-filled { 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='M3.144 2.144C3.241 2.048 3.359 2 3.5 2L6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L1 14L1 8L3 8L3 2.5C3 2.359 3.048 2.241 3.144 2.144ZM11 8L11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L9 14L9 8L11 8ZM6 13L6 3L4 3L4 8L5 8L5 13L6 13ZM14 13L14 3L12 3L12 8L13 8L13 13L14 13Z'/%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='M3.144 2.144C3.241 2.048 3.359 2 3.5 2L6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L1 14L1 8L3 8L3 2.5C3 2.359 3.048 2.241 3.144 2.144ZM11 8L11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L9 14L9 8L11 8ZM6 13L6 3L4 3L4 8L5 8L5 13L6 13ZM14 13L14 3L12 3L12 8L13 8L13 13L14 13Z'/%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='M3.144 2.144C3.241 2.048 3.359 2 3.5 2L6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L1 14L1 8L3 8L3 2.5C3 2.359 3.048 2.241 3.144 2.144ZM11 8L11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L9 14L9 8L11 8ZM6 13L6 3L4 3L4 8L5 8L5 13L6 13ZM14 13L14 3L12 3L12 8L13 8L13 13L14 13Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "bar-chart-grouped-filled" (line-round), MIT. https://gentleface.com/icons/bar-chart-grouped-filled import SwiftUI struct BarChartGroupedFilledIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 3.144, y: 2.144)) p.addCurve(to: CGPoint(x: 3.5, y: 2), control1: CGPoint(x: 3.241, y: 2.048), control2: CGPoint(x: 3.359, y: 2)) p.addLine(to: CGPoint(x: 6.5, y: 2)) p.addCurve(to: CGPoint(x: 6.856, y: 2.144), control1: CGPoint(x: 6.641, y: 2), control2: CGPoint(x: 6.759, y: 2.048)) p.addCurve(to: CGPoint(x: 7, y: 2.5), control1: CGPoint(x: 6.952, y: 2.241), control2: CGPoint(x: 7, y: 2.359)) p.addLine(to: CGPoint(x: 7, y: 13.5)) p.addCurve(to: CGPoint(x: 6.856, y: 13.856), control1: CGPoint(x: 7, y: 13.641), control2: CGPoint(x: 6.952, y: 13.759)) p.addCurve(to: CGPoint(x: 6.5, y: 14), control1: CGPoint(x: 6.759, y: 13.952), control2: CGPoint(x: 6.641, y: 14)) p.addLine(to: CGPoint(x: 1, y: 14)) p.addLine(to: CGPoint(x: 1, y: 8)) p.addLine(to: CGPoint(x: 3, y: 8)) p.addLine(to: CGPoint(x: 3, y: 2.5)) p.addCurve(to: CGPoint(x: 3.144, y: 2.144), control1: CGPoint(x: 3, y: 2.359), control2: CGPoint(x: 3.048, y: 2.241)) p.closeSubpath() p.move(to: CGPoint(x: 11, y: 8)) p.addLine(to: CGPoint(x: 11, y: 2.5)) p.addCurve(to: CGPoint(x: 11.144, y: 2.144), control1: CGPoint(x: 11, y: 2.359), control2: CGPoint(x: 11.048, y: 2.241)) p.addCurve(to: CGPoint(x: 11.5, y: 2), control1: CGPoint(x: 11.241, y: 2.048), control2: CGPoint(x: 11.359, y: 2)) p.addLine(to: CGPoint(x: 14.5, y: 2)) p.addCurve(to: CGPoint(x: 14.856, y: 2.144), control1: CGPoint(x: 14.641, y: 2), control2: CGPoint(x: 14.759, y: 2.048)) p.addCurve(to: CGPoint(x: 15, y: 2.5), control1: CGPoint(x: 14.952, y: 2.241), control2: CGPoint(x: 15, y: 2.359)) p.addLine(to: CGPoint(x: 15, y: 13.5)) p.addCurve(to: CGPoint(x: 14.856, y: 13.856), control1: CGPoint(x: 15, y: 13.641), control2: CGPoint(x: 14.952, y: 13.759)) p.addCurve(to: CGPoint(x: 14.5, y: 14), control1: CGPoint(x: 14.759, y: 13.952), control2: CGPoint(x: 14.641, y: 14)) p.addLine(to: CGPoint(x: 9, y: 14)) p.addLine(to: CGPoint(x: 9, y: 8)) p.addLine(to: CGPoint(x: 11, y: 8)) p.closeSubpath() p.move(to: CGPoint(x: 6, y: 13)) p.addLine(to: CGPoint(x: 6, y: 3)) p.addLine(to: CGPoint(x: 4, y: 3)) p.addLine(to: CGPoint(x: 4, y: 8)) p.addLine(to: CGPoint(x: 5, y: 8)) p.addLine(to: CGPoint(x: 5, y: 13)) p.addLine(to: CGPoint(x: 6, y: 13)) p.closeSubpath() p.move(to: CGPoint(x: 14, y: 13)) p.addLine(to: CGPoint(x: 14, y: 3)) p.addLine(to: CGPoint(x: 12, y: 3)) p.addLine(to: CGPoint(x: 12, y: 8)) p.addLine(to: CGPoint(x: 13, y: 8)) p.addLine(to: CGPoint(x: 13, y: 13)) p.addLine(to: CGPoint(x: 14, y: 13)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BarChartGroupedFilledIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "bar-chart-grouped-filled" (line-round), MIT. https://gentleface.com/icons/bar-chart-grouped-filled 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 BarChartGroupedFilledIcon: ImageVector by lazy { ImageVector.Builder( name = "bar-chart-grouped-filled", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M3.144 2.144C3.241 2.048 3.359 2 3.5 2L6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L1 14L1 8L3 8L3 2.5C3 2.359 3.048 2.241 3.144 2.144ZM11 8L11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5L15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L9 14L9 8L11 8ZM6 13L6 3L4 3L4 8L5 8L5 13L6 13ZM14 13L14 3L12 3L12 8L13 8L13 13L14 13Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BarChartGroupedFilledIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "bar-chart-grouped-filled" (line-round), MIT. https://gentleface.com/icons/bar-chart-grouped-filled import 'package:flutter/widgets.dart'; class BarChartGroupedFilledIcon extends StatelessWidget { const BarChartGroupedFilledIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BarChartGroupedFilledIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BarChartGroupedFilledIconPainter extends CustomPainter { _BarChartGroupedFilledIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(3.144, 2.144) ..cubicTo(3.241, 2.048, 3.359, 2, 3.5, 2) ..lineTo(6.5, 2) ..cubicTo(6.641, 2, 6.759, 2.048, 6.856, 2.144) ..cubicTo(6.952, 2.241, 7, 2.359, 7, 2.5) ..lineTo(7, 13.5) ..cubicTo(7, 13.641, 6.952, 13.759, 6.856, 13.856) ..cubicTo(6.759, 13.952, 6.641, 14, 6.5, 14) ..lineTo(1, 14) ..lineTo(1, 8) ..lineTo(3, 8) ..lineTo(3, 2.5) ..cubicTo(3, 2.359, 3.048, 2.241, 3.144, 2.144) ..close() ..moveTo(11, 8) ..lineTo(11, 2.5) ..cubicTo(11, 2.359, 11.048, 2.241, 11.144, 2.144) ..cubicTo(11.241, 2.048, 11.359, 2, 11.5, 2) ..lineTo(14.5, 2) ..cubicTo(14.641, 2, 14.759, 2.048, 14.856, 2.144) ..cubicTo(14.952, 2.241, 15, 2.359, 15, 2.5) ..lineTo(15, 13.5) ..cubicTo(15, 13.641, 14.952, 13.759, 14.856, 13.856) ..cubicTo(14.759, 13.952, 14.641, 14, 14.5, 14) ..lineTo(9, 14) ..lineTo(9, 8) ..lineTo(11, 8) ..close() ..moveTo(6, 13) ..lineTo(6, 3) ..lineTo(4, 3) ..lineTo(4, 8) ..lineTo(5, 8) ..lineTo(5, 13) ..lineTo(6, 13) ..close() ..moveTo(14, 13) ..lineTo(14, 3) ..lineTo(12, 3) ..lineTo(12, 8) ..lineTo(13, 8) ..lineTo(13, 13) ..lineTo(14, 13) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BarChartGroupedFilledIconPainter old) => old.color != color; } ```