Histogram SVG icon, line

Histogram SVG icon, line

Adjacent bars of varying heights touch along a common baseline. Add it to test score reports and quality control documents.

Similar SVGs

More from Charts and data icons, line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/flvLUi-xp9ir/amnt.svg" alt="Histogram" 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="navy" data-name="Navy"><path d="M607 370c0-50 0-100 0-150 0-26 11-84-24-90-11-1-24 0-35 0-23 0-98-4-114 3-8 3-13 9-15 17-3 15-1 32-1 47 0 33 0 67 0 101-36 0-72 0-108 0-14 0-31-2-44 0-9 2-16 9-19 17-6 16-2 154-2 183-40 0-80 0-119 0-59 0-52 15-52 67 0 78 0 157 0 236 0 34 1 46 40 45 10 0 20 1 31 1 37 0 74 0 112 0 77 0 155-2 233-1 75 1 151-2 226 1 39 2 78 0 118 0 20 0 96 5 108-7 4-4 7-9 8-15 4-24 0-69 0-95 0-40 0-79 0-118 0-56 7-65-53-65-40 0-79 0-118 0 0-36 0-73 0-109 0-15 2-32 0-46-1-5-3-10-7-14-3-4-9-7-15-8-14-2-29 0-43 0-36 0-71 0-107 0zM584 825h-144c0-127 0-254 0-381 0-64 0-128 0-191 0-14-3-90 0-96 1-2 1-3 3-5 4-2 78 0 89 0 7 0 48-2 52 2 2 2 1 32 1 37-1 31-1 61-1 92 0 61 1 122 0 184-1 54 1 109 1 164 0 28-2 58-1 86 1 30 3 80 0 108zM418 319v506h-151c0-109 0-218 0-327 0-55-2-110 0-164 0-5-1-10 2-13s133-2 149-2zm189 72c19 0 137-3 145 1 2 0 3 1 5 3 3 5 0 121 0 138 0 97 0 195 0 292h-150zM245 520v305h-149c0-75 0-151 0-226 0-10-2-75 2-78 3-3 27-1 33-1 38 0 76 0 114 0zM928 825h-149v-257c33 0 67 0 101 0 60 0 48-7 48 54 0 67 0 135 0 203z" fill="#022559" stroke="#022559"/></g><g id="orange" data-name="Orange"><path d="M584 825c3-28 1-78 0-108-1-28 1-58 1-86 0-55-2-110-1-164 1-62 0-123 0-184 0-31 0-61 1-92 0-5 1-35-1-37-4-4-45-2-52-2-11 0-85-2-89 0-2 2-2 3-3 5-3 6 0 82 0 96 0 63 0 127 0 191 0 127 0 254 0 381z" fill="#fc8e2c" stroke="#fc8e2c"/><path d="M928 825c0-68 0-136 0-203 0-61 12-54-48-54-34 0-68 0-101 0v257z" fill="#fc8e2c" stroke="#fc8e2c"/></g><g id="teal" data-name="Teal"><path d="M418 319c-16 0-146-1-149 2s-2 8-2 13c-2 54 0 109 0 164 0 109 0 218 0 327h151z" fill="#0cb5a6" stroke="#0cb5a6"/></g><g id="blue" data-name="Blue"><path d="M607 391v434h150c0-97 0-195 0-292 0-17 3-133 0-138-2-2-3-3-5-3-8-4-126-1-145-1z" fill="#2c79f6" stroke="#2c79f6"/><path d="M245 520c-38 0-76 0-114 0-6 0-30-2-33 1-4 3-2 68-2 78 0 75 0 151 0 226h149z" fill="#2c79f6" stroke="#2c79f6"/></g></svg>
CSS background-image
.histogram {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/flvLUi-xp9ir/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.histogram {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/flvLUi-xp9ir/amnt.svg") center / contain no-repeat;
}
React
import HistogramSvg from "./histogram.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Histogram: Adjacent vertical bars of varying heights touch along a shared 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