Gentleface › Charts & data › bar-chart-grouped-filled
bar-chart-grouped-filled icon
bar-chart-grouped-filledBar chart grouped filled. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
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="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"/></svg>
// 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<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="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" />
</svg>
);
}Vue: see /icons/bar-chart-grouped-filled.md
Svelte: see /icons/bar-chart-grouped-filled.md
HTML img: see /icons/bar-chart-grouped-filled.md
CSS: see /icons/bar-chart-grouped-filled.md
Data URL: see /icons/bar-chart-grouped-filled.md
Sprite: see /icons/bar-chart-grouped-filled.md
SwiftUI: see /icons/bar-chart-grouped-filled.md
Compose: see /icons/bar-chart-grouped-filled.md
Android XML: see /icons/bar-chart-grouped-filled.md
Flutter: see /icons/bar-chart-grouped-filled.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
- Built from
- variant of
bar-chart-grouped - Tags
- chart, graph, bars, grouped, clustered, column, comparison, series, statistics, report, filled
- Category
- Charts & data
- Component name
BarChartGroupedFilledIcon- History
- added
Family 33
More charts & data icons
chart-legend flowchart gauge node-graph word-cloud · all charts & data icons
For agents
Metadata: /icons/bar-chart-grouped-filled.json · Markdown: /icons/bar-chart-grouped-filled.md · SVG: https://gentleface.com/svg/{style}/16/bar-chart-grouped-filled.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/bar-chart-grouped-filled.png