React Area Chart with Icons

Color-coded legends are fine, but adding icons makes them scannable at a glance. This React area chart puts custom Lucide icons next to each series label in the legend—TrendingUp for mobile, TrendingDown for desktop. You define icons in the chartConfig object alongside colors and labels, and the shadcn/ui ChartLegendContent component renders them automatically. Super useful in Next.js dashboards where users need to quickly identify what's what without reading labels. The stacked areas show both series with the legend at the bottom for easy reference.

React Area Chart with Icons preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/area-icons.json

npx shadcn@latest add https://www.shadcn.io/r/area-icons.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/area-icons.json

bunx shadcn@latest add https://www.shadcn.io/r/area-icons.json

Related Components

FAQ