chart multiple icon

chart-multiple-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.

Name: chart-multiple-16
Set: Fluent UI System Color Icons
Style: 16
Viewbox: 16×16
License: MIT

3 other variants in Fluent UI System Color Icons

chart-multiple-20 chart-multiple-24 chart-multiple-32

The same icon in other sets

chart-multiple-16-filledFluent UI System Icons chart-multipleMaterial Design Icons chart-multiplePixelarticons

Use the chart multiple icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGL15JTcmg1)" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGgnLpQeej1)" fill-opacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGSMHKzeNC1)" fill-opacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGOMaFjTxo1)" d="M13 6.574v-.005A5.57 5.57 0 0 0 7.429 1A.436.436 0 0 0 7 1.445V6.5a.5.5 0 0 0 .5.5h5.057c.24 0 .443-.186.443-.426"/><path fill="url(#SVGmsbFvbnF1)" d="M13 7a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0z"/><path fill="url(#SVGoR74be5T1)" d="M10 9a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0z"/><path fill="url(#SVGVqkgJcAV1)" d="M7 11a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0z"/><defs><linearGradient id="SVGL15JTcmg1" x1="11.986" x2="-1.276" y1="14.76" y2="1.619" gradientUnits="userSpaceOnUse"><stop stop-color="#6d37cd"/><stop offset="1" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGOMaFjTxo1" x1="13.25" x2="12.98" y1="5.15" y2=".033" gradientUnits="userSpaceOnUse"><stop stop-color="#e23cb4"/><stop offset="1" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGmsbFvbnF1" x1="14.737" x2="20.318" y1="3.235" y2="5.551" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGoR74be5T1" x1="10.5" x2="14.468" y1="8.5" y2="10.553" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGVqkgJcAV1" x1="7.5" x2="10.007" y1="10" y2="11.849" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><radialGradient id="SVGgnLpQeej1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.71092 0 8.344 13)" gradientUnits="userSpaceOnUse"><stop stop-color="#30116e"/><stop offset=".75" stop-color="#30116e" stop-opacity="0"/></radialGradient><radialGradient id="SVGSMHKzeNC1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.4384 0 11.098 11.626)" gradientUnits="userSpaceOnUse"><stop stop-color="#30116e"/><stop offset="1" stop-color="#30116e" stop-opacity="0"/></radialGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorChartMultiple16(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGL15JTcmg1)" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGgnLpQeej1)" fillOpacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGSMHKzeNC1)" fillOpacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGOMaFjTxo1)" d="M13 6.574v-.005A5.57 5.57 0 0 0 7.429 1A.436.436 0 0 0 7 1.445V6.5a.5.5 0 0 0 .5.5h5.057c.24 0 .443-.186.443-.426"/><path fill="url(#SVGmsbFvbnF1)" d="M13 7a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0z"/><path fill="url(#SVGoR74be5T1)" d="M10 9a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0z"/><path fill="url(#SVGVqkgJcAV1)" d="M7 11a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0z"/><defs><linearGradient id="SVGL15JTcmg1" x1="11.986" x2="-1.276" y1="14.76" y2="1.619" gradientUnits="userSpaceOnUse"><stop stopColor="#6d37cd"/><stop offset="1" stopColor="#ea71ef"/></linearGradient><linearGradient id="SVGOMaFjTxo1" x1="13.25" x2="12.98" y1="5.15" y2=".033" gradientUnits="userSpaceOnUse"><stop stopColor="#e23cb4"/><stop offset="1" stopColor="#ea71ef"/></linearGradient><linearGradient id="SVGmsbFvbnF1" x1="14.737" x2="20.318" y1="3.235" y2="5.551" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGoR74be5T1" x1="10.5" x2="14.468" y1="8.5" y2="10.553" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGVqkgJcAV1" x1="7.5" x2="10.007" y1="10" y2="11.849" gradientUnits="userSpaceOnUse"><stop stopColor="#16bbda"/><stop offset="1" stopColor="#0067bf"/></linearGradient><radialGradient id="SVGgnLpQeej1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.71092 0 8.344 13)" gradientUnits="userSpaceOnUse"><stop stopColor="#30116e"/><stop offset=".75" stopColor="#30116e" stopOpacity="0"/></radialGradient><radialGradient id="SVGSMHKzeNC1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.4384 0 11.098 11.626)" gradientUnits="userSpaceOnUse"><stop stopColor="#30116e"/><stop offset="1" stopColor="#30116e" stopOpacity="0"/></radialGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGL15JTcmg1)" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGgnLpQeej1)" fill-opacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGSMHKzeNC1)" fill-opacity=".4" d="M5.458 2.1c.289-.055.542.177.542.471v4.43A1 1 0 0 0 7 8h4.43c.293 0 .525.253.47.542A5.501 5.501 0 0 1 1 7.5a5.5 5.5 0 0 1 4.458-5.4"/><path fill="url(#SVGOMaFjTxo1)" d="M13 6.574v-.005A5.57 5.57 0 0 0 7.429 1A.436.436 0 0 0 7 1.445V6.5a.5.5 0 0 0 .5.5h5.057c.24 0 .443-.186.443-.426"/><path fill="url(#SVGmsbFvbnF1)" d="M13 7a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0z"/><path fill="url(#SVGoR74be5T1)" d="M10 9a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0z"/><path fill="url(#SVGVqkgJcAV1)" d="M7 11a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0z"/><defs><linearGradient id="SVGL15JTcmg1" x1="11.986" x2="-1.276" y1="14.76" y2="1.619" gradientUnits="userSpaceOnUse"><stop stop-color="#6d37cd"/><stop offset="1" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGOMaFjTxo1" x1="13.25" x2="12.98" y1="5.15" y2=".033" gradientUnits="userSpaceOnUse"><stop stop-color="#e23cb4"/><stop offset="1" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGmsbFvbnF1" x1="14.737" x2="20.318" y1="3.235" y2="5.551" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGoR74be5T1" x1="10.5" x2="14.468" y1="8.5" y2="10.553" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGVqkgJcAV1" x1="7.5" x2="10.007" y1="10" y2="11.849" gradientUnits="userSpaceOnUse"><stop stop-color="#16bbda"/><stop offset="1" stop-color="#0067bf"/></linearGradient><radialGradient id="SVGgnLpQeej1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.71092 0 8.344 13)" gradientUnits="userSpaceOnUse"><stop stop-color="#30116e"/><stop offset=".75" stop-color="#30116e" stop-opacity="0"/></radialGradient><radialGradient id="SVGSMHKzeNC1" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.74881 -2.4384 0 11.098 11.626)" gradientUnits="userSpaceOnUse"><stop stop-color="#30116e"/><stop offset="1" stop-color="#30116e" stop-opacity="0"/></radialGradient></defs></g></svg>
</template>

CSS

.icon-chart-multiple-16 {
  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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGL15JTcmg1)%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgnLpQeej1)%22%20fill-opacity%3D%22.4%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGSMHKzeNC1)%22%20fill-opacity%3D%22.4%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGOMaFjTxo1)%22%20d%3D%22M13%206.574v-.005A5.57%205.57%200%200%200%207.429%201A.436.436%200%200%200%207%201.445V6.5a.5.5%200%200%200%20.5.5h5.057c.24%200%20.443-.186.443-.426%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGmsbFvbnF1)%22%20d%3D%22M13%207a1%201%200%201%201%202%200v7a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGoR74be5T1)%22%20d%3D%22M10%209a1%201%200%201%201%202%200v5a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVqkgJcAV1)%22%20d%3D%22M7%2011a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGL15JTcmg1%22%20x1%3D%2211.986%22%20x2%3D%22-1.276%22%20y1%3D%2214.76%22%20y2%3D%221.619%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236d37cd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea71ef%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGOMaFjTxo1%22%20x1%3D%2213.25%22%20x2%3D%2212.98%22%20y1%3D%225.15%22%20y2%3D%22.033%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e23cb4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea71ef%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGmsbFvbnF1%22%20x1%3D%2214.737%22%20x2%3D%2220.318%22%20y1%3D%223.235%22%20y2%3D%225.551%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGoR74be5T1%22%20x1%3D%2210.5%22%20x2%3D%2214.468%22%20y1%3D%228.5%22%20y2%3D%2210.553%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGVqkgJcAV1%22%20x1%3D%227.5%22%20x2%3D%2210.007%22%20y1%3D%2210%22%20y2%3D%2211.849%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGgnLpQeej1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%202.74881%20-2.71092%200%208.344%2013)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2330116e%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%2330116e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGSMHKzeNC1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%202.74881%20-2.4384%200%2011.098%2011.626)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2330116e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2330116e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGL15JTcmg1)%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgnLpQeej1)%22%20fill-opacity%3D%22.4%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGSMHKzeNC1)%22%20fill-opacity%3D%22.4%22%20d%3D%22M5.458%202.1c.289-.055.542.177.542.471v4.43A1%201%200%200%200%207%208h4.43c.293%200%20.525.253.47.542A5.501%205.501%200%200%201%201%207.5a5.5%205.5%200%200%201%204.458-5.4%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGOMaFjTxo1)%22%20d%3D%22M13%206.574v-.005A5.57%205.57%200%200%200%207.429%201A.436.436%200%200%200%207%201.445V6.5a.5.5%200%200%200%20.5.5h5.057c.24%200%20.443-.186.443-.426%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGmsbFvbnF1)%22%20d%3D%22M13%207a1%201%200%201%201%202%200v7a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGoR74be5T1)%22%20d%3D%22M10%209a1%201%200%201%201%202%200v5a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVqkgJcAV1)%22%20d%3D%22M7%2011a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGL15JTcmg1%22%20x1%3D%2211.986%22%20x2%3D%22-1.276%22%20y1%3D%2214.76%22%20y2%3D%221.619%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236d37cd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea71ef%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGOMaFjTxo1%22%20x1%3D%2213.25%22%20x2%3D%2212.98%22%20y1%3D%225.15%22%20y2%3D%22.033%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e23cb4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea71ef%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGmsbFvbnF1%22%20x1%3D%2214.737%22%20x2%3D%2220.318%22%20y1%3D%223.235%22%20y2%3D%225.551%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGoR74be5T1%22%20x1%3D%2210.5%22%20x2%3D%2214.468%22%20y1%3D%228.5%22%20y2%3D%2210.553%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGVqkgJcAV1%22%20x1%3D%227.5%22%20x2%3D%2210.007%22%20y1%3D%2210%22%20y2%3D%2211.849%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2316bbda%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGgnLpQeej1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%202.74881%20-2.71092%200%208.344%2013)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2330116e%22%2F%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%2330116e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGSMHKzeNC1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%202.74881%20-2.4384%200%2011.098%2011.626)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2330116e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2330116e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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