Menu

Beta
Sign in
Product Grid SVG icon, gradient

Product Grid SVG icon, gradient

A product grid represents a browsable arrangement of merchandise. It works in an online fashion catalog and on a store app’s category page.

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/NchPgJLNhX3e/amnt.svg" alt="Product Grid" 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="9" y1="9" x2="55" y2="55"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1878ff"/></linearGradient><linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="9" y1="9" x2="55" y2="55"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1878ff"/></linearGradient><linearGradient id="g2" gradientUnits="userSpaceOnUse" x1="9" y1="9" x2="55" y2="55"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1878ff"/></linearGradient><linearGradient id="g3" gradientUnits="userSpaceOnUse" x1="9" y1="9" x2="55" y2="55"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1878ff"/></linearGradient></defs><g id="layer-1" data-name="Group 1"><path d="M12 8L25 8C27.21 8 29 9.79 29 12L29 25C29 27.21 27.21 29 25 29L12 29C9.79 29 8 27.21 8 25L8 12C8 9.79 9.79 8 12 8Z" fill="url(#g0) #1878ff" stroke="#5336c8" stroke-width="1.5"/><path d="M39 8L52 8C54.21 8 56 9.79 56 12L56 25C56 27.21 54.21 29 52 29L39 29C36.79 29 35 27.21 35 25L35 12C35 9.79 36.79 8 39 8Z" fill="url(#g1) #1878ff" stroke="#5336c8" stroke-width="1.5"/><path d="M12 35L25 35C27.21 35 29 36.79 29 39L29 52C29 54.21 27.21 56 25 56L12 56C9.79 56 8 54.21 8 52L8 39C8 36.79 9.79 35 12 35Z" fill="url(#g2) #1878ff" stroke="#5336c8" stroke-width="1.5"/><path d="M39 35L52 35C54.21 35 56 36.79 56 39L56 52C56 54.21 54.21 56 52 56L39 56C36.79 56 35 54.21 35 52L35 39C35 36.79 36.79 35 39 35Z" fill="url(#g3) #1878ff" stroke="#5336c8" stroke-width="1.5"/></g><g id="layer-2" data-name="Group 2"><path d="M13 13L23 13M40 13L50 13M13 40L23 40M40 40L50 40" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-opacity="0.3"/></g><g id="layer-3" data-name="Circle 3"><path d="M51 47C51 49.21 49.21 51 47 51C44.79 51 43 49.21 43 47C43 44.79 44.79 43 47 43C49.21 43 51 44.79 51 47Z" fill="#ff746d"/></g></svg>
CSS background-image
.product-grid {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NchPgJLNhX3e/amnt.svg");
  background-size: contain;
}
React
import ProductGridSvg from "./product-grid.jsx"; // from the React tab above

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

Tags

productsgridcatalogbrowse

Made with AMNT

AMNT SVG 1.1 drew this from the words Product grid. 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