Gentleface › Charts & data › bar-chart-sparkle

bar-chart-sparkle icon

Bar chart sparkle: ai insights, generate chart, ai analytics, ai 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="M5 10.5L5 0.5C5 0.359 5.048 0.241 5.144 0.144C5.241 0.048 5.359 0 5.5 0L8.5 0C8.641 0 8.759 0.048 8.856 0.144C8.952 0.241 9 0.359 9 0.5L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 1L6 1L6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11C5.359 11 5.241 10.952 5.144 10.856C5.048 10.759 5 10.641 5 10.5ZM13.856 4.144C13.952 4.241 14 4.359 14 4.5L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 5L11 5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4.5C10 4.359 10.048 4.241 10.144 4.144C10.241 4.048 10.359 4 10.5 4L13.5 4C13.641 4 13.759 4.048 13.856 4.144ZM3.856 7.144C3.952 7.241 4 7.359 4 7.5L4 11.5C4 11.641 3.952 11.759 3.856 11.856C3.759 11.952 3.641 12 3.5 12L0.5 12C0.359 12 0.241 11.952 0.144 11.856C0.048 11.759 0 11.641 0 11.5L0 7.5C0 7.359 0.048 7.241 0.144 7.144C0.241 7.048 0.359 7 0.5 7L3.5 7C3.641 7 3.759 7.048 3.856 7.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16ZM3 8L1 8L1 11L3 11L3 8Z"/></svg>

React

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

export function BarChartSparkleIcon(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="M5 10.5L5 0.5C5 0.359 5.048 0.241 5.144 0.144C5.241 0.048 5.359 0 5.5 0L8.5 0C8.641 0 8.759 0.048 8.856 0.144C8.952 0.241 9 0.359 9 0.5L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 1L6 1L6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11C5.359 11 5.241 10.952 5.144 10.856C5.048 10.759 5 10.641 5 10.5ZM13.856 4.144C13.952 4.241 14 4.359 14 4.5L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 5L11 5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4.5C10 4.359 10.048 4.241 10.144 4.144C10.241 4.048 10.359 4 10.5 4L13.5 4C13.641 4 13.759 4.048 13.856 4.144ZM3.856 7.144C3.952 7.241 4 7.359 4 7.5L4 11.5C4 11.641 3.952 11.759 3.856 11.856C3.759 11.952 3.641 12 3.5 12L0.5 12C0.359 12 0.241 11.952 0.144 11.856C0.048 11.759 0 11.641 0 11.5L0 7.5C0 7.359 0.048 7.241 0.144 7.144C0.241 7.048 0.359 7 0.5 7L3.5 7C3.641 7 3.759 7.048 3.856 7.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16ZM3 8L1 8L1 11L3 11L3 8Z" />
    </svg>
  );
}

Vue

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

Svelte

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

HTML img

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

CSS

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

Data URL

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

Sprite

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

SwiftUI

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

Compose

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

Android XML

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

Flutter

Flutter: see /icons/bar-chart-sparkle.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

ai insights, generate chart, ai analytics, ai chart

Example

AI insights panel on an analytics dashboard

Alternatives

bar-chart-search: explore the data yourself, no AI (explore-data)

Also fits

explore data: insights generated by AI (ai-insights)

Built from

bar-chart + sparkle

Tags

chart, graph, bars, stats, column, report, sparkle

Category

Charts & data

Component name

BarChartSparkleIcon

History

2026-10-15 added

Family 33

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

bar-chart-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp