chart area icon

chart-area from Line Awesome by Icons8 · Line · Business · Apache-2.0 Free for personal and commercial use.

Name: chart-area
Set: Line Awesome
Style: Line
Category: Business
Viewbox: 32×32
License: Apache 2.0
Aliases: chart-area-solid

The same icon in other sets

chart-areaCarbon chart-areaFont Awesome 6 Solid chart-areaFont Awesome Solid chart-areaHuge Icons chart-areaLucide chart-areaMyna UI Icons chart-areaTabler Icons chart-areaTDesign Icons

More business icons from Line Awesome

business-time chart-bar chart-bar-solid city copyright copyright-solid folder-minus folder-plus pen-square percent registered registered-solid trademark chart-line chart-pie

Use the chart area icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m28 4.063l-1.625 1.25l-4.625 3.625L16.156 8l-.375-.063l-.344.22l-5.687 3.78l-4.563-.906L4 10.781V28h24zm-2 4.093v5.375l-4.219 3.344l-5.468-1.813l-.47-.156l-.405.25l-5.563 3.719L6 17.312V13.22l3.813.75l.406.094l.344-.22l5.656-3.78l5.625.937l.437.063l.344-.282zm0 7.938V26H6v-6.5l3.625 1.438l.5.187l.438-.281l5.624-3.75l5.5 1.843l.5.188l.438-.344z"/></svg>

React

import type { SVGProps } from "react";

export function LaChartArea(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m28 4.063l-1.625 1.25l-4.625 3.625L16.156 8l-.375-.063l-.344.22l-5.687 3.78l-4.563-.906L4 10.781V28h24zm-2 4.093v5.375l-4.219 3.344l-5.468-1.813l-.47-.156l-.405.25l-5.563 3.719L6 17.312V13.22l3.813.75l.406.094l.344-.22l5.656-3.78l5.625.937l.437.063l.344-.282zm0 7.938V26H6v-6.5l3.625 1.438l.5.187l.438-.281l5.624-3.75l5.5 1.843l.5.188l.438-.344z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m28 4.063l-1.625 1.25l-4.625 3.625L16.156 8l-.375-.063l-.344.22l-5.687 3.78l-4.563-.906L4 10.781V28h24zm-2 4.093v5.375l-4.219 3.344l-5.468-1.813l-.47-.156l-.405.25l-5.563 3.719L6 17.312V13.22l3.813.75l.406.094l.344-.22l5.656-3.78l5.625.937l.437.063l.344-.282zm0 7.938V26H6v-6.5l3.625 1.438l.5.187l.438-.281l5.624-3.75l5.5 1.843l.5.188l.438-.344z"/></svg>
</template>

CSS

.icon-chart-area {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m28%204.063l-1.625%201.25l-4.625%203.625L16.156%208l-.375-.063l-.344.22l-5.687%203.78l-4.563-.906L4%2010.781V28h24zm-2%204.093v5.375l-4.219%203.344l-5.468-1.813l-.47-.156l-.405.25l-5.563%203.719L6%2017.312V13.22l3.813.75l.406.094l.344-.22l5.656-3.78l5.625.937l.437.063l.344-.282zm0%207.938V26H6v-6.5l3.625%201.438l.5.187l.438-.281l5.624-3.75l5.5%201.843l.5.188l.438-.344z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m28%204.063l-1.625%201.25l-4.625%203.625L16.156%208l-.375-.063l-.344.22l-5.687%203.78l-4.563-.906L4%2010.781V28h24zm-2%204.093v5.375l-4.219%203.344l-5.468-1.813l-.47-.156l-.405.25l-5.563%203.719L6%2017.312V13.22l3.813.75l.406.094l.344-.22l5.656-3.78l5.625.937l.437.063l.344-.282zm0%207.938V26H6v-6.5l3.625%201.438l.5.187l.438-.281l5.624-3.75l5.5%201.843l.5.188l.438-.344z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/chart-area.svg?color=%231a73e8&size=48