Menu

Beta
Sign in
Beta
Horizontal Bar Chart SVG icon, line

Horizontal Bar Chart SVG icon, line

Three bars of different lengths extend right from a vertical baseline. It fits ranking lists and customer preference summaries.

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/hZazJX5xbtic/amnt.svg" alt="Horizontal 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="midnight" data-name="Midnight"><path d="M156 203c0-20 9-69-17-74-8-1-15 0-20 5-13 11-8 90-8 111 0 78 0 157 0 236 0 78 0 157 0 236 0 20-4 101 3 115s28 15 37 3c10-13 5-38 5-53 140 0 280 0 420 0 70 0 140 0 210 0 25 0 88 3 109 0 8-2 14-7 17-14 5-11 3-50 3-63 0-17 3-46-2-61-2-8-8-14-16-16-19-5-88-1-112-1-70 0-140 0-209 0-140 0-280 0-419 0l-1-56c114 0 228 0 342 0 56 0 113 0 170 0 91 0 91 16 91-78 0-19 4-42-1-59-2-7-7-14-14-16-14-6-62-2-79-2-57 0-114 0-170 0-57 0-114 0-170 0-25 0-156 4-169-1v-57c80 0 160 0 241 0 39 0 80 0 120 0 8 0 17 1 25-2 24-8 16-57 16-76 0-20 7-65-14-74-9-4-20-3-29-3-40 0-81 0-120 0-80 0-160 0-239 0zm0 24h378v108h-378zm0 212h579v108c-95 0-192 0-287 0-68 0-136 0-203 0-27 0-63 4-89 0zm0 212h735v108h-735z" fill="#10172b" stroke="#10172b"/></g><g id="orange" data-name="Orange"><path d="M156 651v108h735v-108z" fill="#f87119" stroke="#f87119"/></g><g id="turquoise" data-name="Turquoise"><path d="M156 439v108c26 4 62 0 89 0 67 0 135 0 203 0 95 0 192 0 287 0v-108z" fill="#11b3a9" stroke="#11b3a9"/></g><g id="blue" data-name="Blue"><path d="M156 227v108h378v-108z" fill="#377ef5" stroke="#377ef5"/></g></svg>
CSS background-image
.horizontal-bar-chart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/hZazJX5xbtic/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.horizontal-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/hZazJX5xbtic/amnt.svg") center / contain no-repeat;
}
React
import HorizontalBarChartSvg from "./horizontal-bar-chart.jsx"; // from the React tab above

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

Tags

horizontalbarchartrankingchartsiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Horizontal Bar Chart: Three horizontal bars of different lengths extend rightward from a vertical baseline. 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