Menu

Beta
Sign in
Product Comparison SVG icon, gradient

Product Comparison SVG icon, gradient

A product comparison symbol shows items being evaluated side by side. Use it on an electronics retailer’s website and in a travel booking app’s hotel results.

Free · from Online Shopping Icons, Gradient

Similar SVGs

More from Online Shopping Icons, Gradient

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/fNbMzlXn37Df/amnt.svg" alt="Product Comparison" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><defs><linearGradient id="g0" gradientUnits="userSpaceOnUse" x1="8" y1="8" x2="56" y2="56"><stop offset="0" stop-color="#8538e8"/><stop offset="1" stop-color="#147bff"/></linearGradient><linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="8" y1="8" x2="56" y2="56"><stop offset="0" stop-color="#8538e8"/><stop offset="1" stop-color="#147bff"/></linearGradient><linearGradient id="g2" gradientUnits="userSpaceOnUse" x1="8" y1="8" x2="56" y2="56"><stop offset="0" stop-color="#8538e8"/><stop offset="1" stop-color="#147bff"/></linearGradient><linearGradient id="g3" gradientUnits="userSpaceOnUse" x1="8" y1="8" x2="56" y2="56"><stop offset="0" stop-color="#8538e8"/><stop offset="1" stop-color="#147bff"/></linearGradient><linearGradient id="g4" gradientUnits="userSpaceOnUse" x1="8" y1="8" x2="56" y2="56"><stop offset="0" stop-color="#8538e8"/><stop offset="1" stop-color="#147bff"/></linearGradient></defs><g id="layer-1" data-name="Group 1"><path d="M10 9L24 9C26.21 9 28 10.79 28 13L28 51C28 53.21 26.21 55 24 55L10 55C7.79 55 6 53.21 6 51L6 13C6 10.79 7.79 9 10 9Z" fill="none" stroke="url(#g0) #147bff" stroke-width="2.5" stroke-linejoin="round"/><path d="M40 9L54 9C56.21 9 58 10.79 58 13L58 51C58 53.21 56.21 55 54 55L40 55C37.79 55 36 53.21 36 51L36 13C36 10.79 37.79 9 40 9Z" fill="none" stroke="url(#g1) #147bff" stroke-width="2.5" stroke-linejoin="round"/><path d="M14 16L20 16C21.1 16 22 16.9 22 18L22 29C22 30.1 21.1 31 20 31L14 31C12.9 31 12 30.1 12 29L12 18C12 16.9 12.9 16 14 16Z" fill="url(#g2) #147bff"/><path d="M54.5 23.5C54.5 27.64 51.14 31 47 31C42.86 31 39.5 27.64 39.5 23.5C39.5 19.36 42.86 16 47 16C51.14 16 54.5 19.36 54.5 23.5Z" fill="url(#g3) #147bff"/></g><g id="layer-2" data-name="Group 2"><path d="M12 38L22 38M12 45L19 45M42 38L52 38M42 45L49 45" fill="#000000" stroke="url(#g4) #147bff" stroke-width="2.5" stroke-linecap="round"/></g><g id="layer-3" data-name="Shape 3"><path d="M31 29L34 32L31 35" fill="none" stroke="#ff746d" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-4" data-name="Shape 4"><path d="M10 12L24 12M40 12L54 12" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-opacity="0.35"/></g></svg>
CSS background-image
.product-comparison {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/fNbMzlXn37Df/amnt.svg");
  background-size: contain;
}
React
import ProductComparisonSvg from "./product-comparison.jsx"; // from the React tab above

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

Tags

compareproductsshoppingfeatures

Made with AMNT

AMNT SVG 1.1 drew this from the words Product comparison. bold simple silhouette, smooth shading from violet to electric blue with a small coral accent, subtle highlights, crisp edges, no background, readable at small size. as part of the pack Online Shopping Icons, Gradient. 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