Menu

Comparison Chart SVG icon, line

Comparison Chart SVG icon, line

Two pairs of neighboring bars share a baseline and show contrasting heights. Place it in before-and-after reports and regional comparison sheets.

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/JLdVhNkywjFl/amnt.svg" alt="Comparison 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="navy" data-name="Navy"><path d="M303 799c0-120 0-241 0-361 0-61 0-121 0-181 0-18 2-36 0-53-6-40-70-28-99-28-14 0-30-2-44 0-11 2-22 12-25 23-5 19-1 63-1 85-1 56 0 114 0 172 0 44-1 89-1 134 0 14 1 28 1 43-1 22 2 157-1 166-13 0-53-7-49 14 3 14 42 10 54 10 41 0 82 0 124-1 61-1 122 2 183 0 21-1 41 2 61 1 38-2 74 0 112 0 28 0 56-2 85-1 17 0 34 2 52 1 25-1 51 0 77 0 16 0 31-2 46-1 12 0 51 4 58-3 4-3 5-7 4-11-2-14-27-9-37-9-5-26-1-103-1-134 0-8 1-17 0-24-6-35-59-27-85-27-10 0-20 1-30 1-42 0-54 5-54 50 0 44 0 89 0 134h-9c0-115 0-230 0-344 0-58 0-115 0-172 0-90 0-85-87-85-90 0-86-3-86 87 0 57 0 114 0 172 0 114 0 228 0 342h-71c0-48 0-97 0-145 0-12 1-24-1-35-9-35-57-25-83-25-28 0-78-10-83 29-1 10 0 22 0 33 0 47 0 95 0 143zm-22 0h-125c0-110 0-220 0-330 0-56 0-111 0-166 0-17-3-87 0-97 1-3 4-6 6-7 9-4 44-1 56-1s46-3 56 1c3 1 6 4 7 7 3 10 0 79 0 95 0 55 0 110 0 166 0 110 0 221 0 332zm421 0h-129c0-107 0-214 0-320 0-54 0-108 0-161 0-17-3-78 0-89 1-4 4-7 8-8 11-4 43-1 56-1 12 0 49-3 58 1 4 1 6 5 7 9 3 15 0 67 0 86 0 53 0 107 0 161 0 107 0 215 0 322zm-244 0h-123c0-40 0-81 0-121 0-71-10-62 61-62 70 0 62-11 62 60 0 41 0 82 0 123zm422 0h-125c0-37 0-74 0-111 0-65-1-52 62-52 12 0 58-5 63 8 3 9 0 31 0 42 0 37 0 75 0 113z" fill="#03214d" stroke="#03214d"/></g><g id="turquoise" data-name="Turquoise"><path d="M281 799c0-111 0-222 0-332 0-56 0-111 0-166 0-16 3-85 0-95-1-3-4-6-7-7-10-4-44-1-56-1s-47-3-56 1c-2 1-5 4-6 7-3 10 0 80 0 97 0 55 0 110 0 166 0 110 0 220 0 330z" fill="#0eb6a9" stroke="#0eb6a9"/><path d="M458 799c0-41 0-82 0-123 0-71 8-60-62-60-71 0-61-9-61 62 0 40 0 81 0 121z" fill="#0eb6a9" stroke="#0eb6a9"/></g><g id="orange" data-name="Orange"><path d="M702 799c0-107 0-215 0-322 0-54 0-108 0-161 0-19 3-71 0-86-1-4-3-8-7-9-9-4-46-1-58-1-13 0-45-3-56 1-4 1-7 4-8 8-3 11 0 72 0 89 0 53 0 107 0 161 0 106 0 213 0 320z" fill="#fc7202" stroke="#fc7202"/><path d="M880 799c0-38 0-76 0-113 0-11 3-33 0-42-5-13-51-8-63-8-63 0-62-13-62 52 0 37 0 74 0 111z" fill="#fc7202" stroke="#fc7202"/></g></svg>
CSS background-image
.comparison-chart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/JLdVhNkywjFl/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.comparison-chart {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/JLdVhNkywjFl/amnt.svg") center / contain no-repeat;
}
React
import ComparisonChartSvg from "./comparison-chart.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Comparison Chart: Two pairs of side-by-side bars share a baseline, with contrasting heights in each pair. 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