Menu

Beta
Sign in
Stacked Bar Chart SVG icon, line

Stacked Bar Chart SVG icon, line

Three vertical bars each contain two outlined segments. Use this icon in department spending reports and product mix presentations.

Free · from Charts and data icons, line · Set 2

Similar SVGs

More from Charts and data icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nu2saPk0F_S9/amnt.svg" alt="Stacked Bar Chart" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M426 460v374h172v-374z" fill="#017efb" stroke="#017efb"/><path d="M164 560l1 274h172v-274z" fill="#017efb" stroke="#017efb"/><path d="M687 625v209h173c0-28 3-197-1-209z" fill="#017efb" stroke="#017efb"/></g><g id="tangerine" data-name="Tangerine"><path d="M426 154v285h172v-285z" fill="#fc9a21" stroke="#fc9a21"/><path d="M687 494v110h174c-7-29 3-78-2-110z" fill="#fc9a21" stroke="#fc9a21"/></g><g id="navy" data-name="Navy"><path d="M425 133c-8 2-16 6-18 14-6 14-2 66-2 84 0 39 0 78 0 117 0 77 0 156 0 234 0 77 0 156 0 234 0 8-1 17 2 25 7 21 57 14 76 14 29 0 91 4 116 0 7-1 16-6 18-13 6-12 2-68 2-84 0-39 0-78 0-117 0-78 0-156 0-234s0-156 0-234c0-8 1-18-1-25-7-22-58-15-76-15-27 0-54 0-81 0-12 0-25-2-36 0zm1 21h172v285h-172zm0 306h172v374h-172z" fill="#021d4a" stroke="#021d4a"/><path d="M160 319c-8 2-14 8-15 15-4 13-1 30-1 44 0 37 0 76 0 114 0 61 0 123 0 186 0 38 0 78 0 117 0 13-3 30 0 43 2 7 7 12 13 14 11 5 168 6 184 2 7-2 13-7 15-14 6-16 2-130 2-156 0-63 0-126 0-188 0-28 4-143-1-161-2-6-6-12-12-14-7-3-173-4-185-2zm6 20h171v200h-172c0-43 0-85 0-127 0-24-3-49 1-73zm-2 221h173v274h-172z" fill="#021d4a" stroke="#021d4a"/><path d="M690 473c-9 1-18 4-21 12-6 14-2 89-2 110 0 47-1 95-1 144 0 17-3 97 5 107 7 9 18 9 29 9 50 0 100 2 151 0 8 0 18 0 24-8 9-10 5-95 5-114 0-50 0-100 0-149 0-19 4-94-6-104-8-9-24-7-35-7-46 1-106-4-149 0zm-3 21h172c5 32-5 81 2 110h-174zm0 131h172c4 12 1 181 1 209h-173z" fill="#021d4a" stroke="#021d4a"/></g><g id="turquoise" data-name="Turquoise"><path d="M166 339c-4 24-1 49-1 73 0 42 0 84 0 127h172v-200z" fill="#21bea5" stroke="#21bea5"/></g></svg>
CSS background-image
.stacked-bar-chart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nu2saPk0F_S9/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.stacked-bar-chart {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nu2saPk0F_S9/amnt.svg") center / contain no-repeat;
}
React
import StackedBarChartSvg from "./stacked-bar-chart.jsx"; // from the React tab above

<StackedBarChartSvg width={48} height={48} />

Tags

stackedbarchartcomparisonchartsiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Stacked Bar Chart: Three vertical bars are each divided into two outlined segments. A flat colour icon. as part of the pack Charts and data icons, line · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings