add chart icon

add-chart-rounded from Material Symbols Light by Google · Rounded · Business · Apache-2.0 Free for personal and commercial use.

Name: add-chart-rounded
Set: Material Symbols Light
Style: Rounded
Category: Business
Viewbox: 24×24
License: Apache 2.0

5 other variants in Material Symbols Light

add-chart add-chart-outline add-chart-outline-rounded add-chart-outline-sharp add-chart-sharp

The same icon in other sets

add-chartMaterial Symbols

More business icons from Material Symbols Light

Use the add chart icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.088 16.356q.143-.144.143-.356v-5q0-.213-.144-.356q-.144-.144-.357-.144t-.356.144t-.143.356v5q0 .213.144.356t.357.144t.356-.144m3.769 0Q12 16.213 12 16V8q0-.213-.144-.356t-.357-.144t-.356.144T11 8v8q0 .213.144.356t.357.144t.356-.144m3.769 0q.143-.144.143-.356v-2q0-.213-.144-.356t-.356-.144t-.356.144t-.144.356v2q0 .213.144.356q.144.144.357.144t.356-.144m2.017-8.5Q17.5 7.713 17.5 7.5V6H16q-.213 0-.356-.144t-.144-.357t.144-.356T16 5h1.5V3.5q0-.213.144-.356T18.001 3t.356.144t.143.356V5H20q.213 0 .356.144t.144.357t-.144.356T20 6h-1.5v1.5q0 .213-.144.356T17.999 8t-.356-.144M5.116 20q-.691 0-1.153-.462T3.5 18.384V5.616q0-.691.463-1.153T5.115 4h8.808q.213 0 .356.144t.144.356v2.962q0 .666.475 1.14t1.14.475H19q.213 0 .356.144t.144.356v8.808q0 .69-.462 1.153T17.884 20z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightAddChartRounded(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.088 16.356q.143-.144.143-.356v-5q0-.213-.144-.356q-.144-.144-.357-.144t-.356.144t-.143.356v5q0 .213.144.356t.357.144t.356-.144m3.769 0Q12 16.213 12 16V8q0-.213-.144-.356t-.357-.144t-.356.144T11 8v8q0 .213.144.356t.357.144t.356-.144m3.769 0q.143-.144.143-.356v-2q0-.213-.144-.356t-.356-.144t-.356.144t-.144.356v2q0 .213.144.356q.144.144.357.144t.356-.144m2.017-8.5Q17.5 7.713 17.5 7.5V6H16q-.213 0-.356-.144t-.144-.357t.144-.356T16 5h1.5V3.5q0-.213.144-.356T18.001 3t.356.144t.143.356V5H20q.213 0 .356.144t.144.357t-.144.356T20 6h-1.5v1.5q0 .213-.144.356T17.999 8t-.356-.144M5.116 20q-.691 0-1.153-.462T3.5 18.384V5.616q0-.691.463-1.153T5.115 4h8.808q.213 0 .356.144t.144.356v2.962q0 .666.475 1.14t1.14.475H19q.213 0 .356.144t.144.356v8.808q0 .69-.462 1.153T17.884 20z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.088 16.356q.143-.144.143-.356v-5q0-.213-.144-.356q-.144-.144-.357-.144t-.356.144t-.143.356v5q0 .213.144.356t.357.144t.356-.144m3.769 0Q12 16.213 12 16V8q0-.213-.144-.356t-.357-.144t-.356.144T11 8v8q0 .213.144.356t.357.144t.356-.144m3.769 0q.143-.144.143-.356v-2q0-.213-.144-.356t-.356-.144t-.356.144t-.144.356v2q0 .213.144.356q.144.144.357.144t.356-.144m2.017-8.5Q17.5 7.713 17.5 7.5V6H16q-.213 0-.356-.144t-.144-.357t.144-.356T16 5h1.5V3.5q0-.213.144-.356T18.001 3t.356.144t.143.356V5H20q.213 0 .356.144t.144.357t-.144.356T20 6h-1.5v1.5q0 .213-.144.356T17.999 8t-.356-.144M5.116 20q-.691 0-1.153-.462T3.5 18.384V5.616q0-.691.463-1.153T5.115 4h8.808q.213 0 .356.144t.144.356v2.962q0 .666.475 1.14t1.14.475H19q.213 0 .356.144t.144.356v8.808q0 .69-.462 1.153T17.884 20z"/></svg>
</template>

CSS

.icon-add-chart-rounded {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.088%2016.356q.143-.144.143-.356v-5q0-.213-.144-.356q-.144-.144-.357-.144t-.356.144t-.143.356v5q0%20.213.144.356t.357.144t.356-.144m3.769%200Q12%2016.213%2012%2016V8q0-.213-.144-.356t-.357-.144t-.356.144T11%208v8q0%20.213.144.356t.357.144t.356-.144m3.769%200q.143-.144.143-.356v-2q0-.213-.144-.356t-.356-.144t-.356.144t-.144.356v2q0%20.213.144.356q.144.144.357.144t.356-.144m2.017-8.5Q17.5%207.713%2017.5%207.5V6H16q-.213%200-.356-.144t-.144-.357t.144-.356T16%205h1.5V3.5q0-.213.144-.356T18.001%203t.356.144t.143.356V5H20q.213%200%20.356.144t.144.357t-.144.356T20%206h-1.5v1.5q0%20.213-.144.356T17.999%208t-.356-.144M5.116%2020q-.691%200-1.153-.462T3.5%2018.384V5.616q0-.691.463-1.153T5.115%204h8.808q.213%200%20.356.144t.144.356v2.962q0%20.666.475%201.14t1.14.475H19q.213%200%20.356.144t.144.356v8.808q0%20.69-.462%201.153T17.884%2020z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.088%2016.356q.143-.144.143-.356v-5q0-.213-.144-.356q-.144-.144-.357-.144t-.356.144t-.143.356v5q0%20.213.144.356t.357.144t.356-.144m3.769%200Q12%2016.213%2012%2016V8q0-.213-.144-.356t-.357-.144t-.356.144T11%208v8q0%20.213.144.356t.357.144t.356-.144m3.769%200q.143-.144.143-.356v-2q0-.213-.144-.356t-.356-.144t-.356.144t-.144.356v2q0%20.213.144.356q.144.144.357.144t.356-.144m2.017-8.5Q17.5%207.713%2017.5%207.5V6H16q-.213%200-.356-.144t-.144-.357t.144-.356T16%205h1.5V3.5q0-.213.144-.356T18.001%203t.356.144t.143.356V5H20q.213%200%20.356.144t.144.357t-.144.356T20%206h-1.5v1.5q0%20.213-.144.356T17.999%208t-.356-.144M5.116%2020q-.691%200-1.153-.462T3.5%2018.384V5.616q0-.691.463-1.153T5.115%204h8.808q.213%200%20.356.144t.144.356v2.962q0%20.666.475%201.14t1.14.475H19q.213%200%20.356.144t.144.356v8.808q0%20.69-.462%201.153T17.884%2020z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/add-chart-rounded.svg?color=%231a73e8&size=48