The Heroicons document chart bar icon depicts a document with a bar chart, commonly used to represent data analysis, reports, or performance metrics.
Common uses
- Displaying analytics dashboards
- Representing financial reports
- Indicating data visualization sections
Use it in React
Install
npm i @heroicons/reactImport & render
import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
<DocumentChartBarIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<DocumentChartBarIcon className="size-6" />24/solid
<DocumentChartBarIcon className="size-6" />20/solid
<DocumentChartBarIcon className="size-6" />16/solid
<DocumentChartBarIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- documentchartbarbar chartanalyticsreportdata
FAQ
- What is the document chart bar icon used for?
- It's typically used to signify areas related to data, reports, analytics, or performance tracking within an application.
- How do I use this icon in React?
- Import it using: `import { DocumentChartBarIcon } from '@heroicons/react/24/outline'`. Then use it as a component: `<DocumentChartBarIcon className="h-6 w-6" />`.
- What is the license for Heroicons?
- Heroicons are available under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →