Grid Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
The Grid icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/321064.svg" alt="Grid icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/321064.svg" alt="Grid icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/321064.svg" alt="Grid icon" :width="24" :height="24" />
CSS background
.icon-grid {
background-image: url('https://proicons.com/icon/321064.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>grid</title>
<g id="grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#FFFFFF" x="68" y="37" width="183" height="111"></rect>
<g id="Browser-/-Grid-/-448-/-Light" transform="translate(72.188358, 43.000000)" fill="#D0E2FF" opacity="0.3">
<g id="Grid" transform="translate(-0.000000, 0.000000)">
<rect id="Column" x="168.435464" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="157.206433" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="145.977402" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="134.748371" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="123.51934" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="112.290309" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="101.061278" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="89.8322474" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="78.6032165" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="67.3741856" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="56.1451546" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="44.9161237" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="33.6870928" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="22.4580619" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="11.2290309" y="0" width="6.88230928" height="105"></rect>
<rect id="Column" x="0" y="0" width="6.88230928" height="105"></rect>
</g>
</g>
<g id="Browser-/-Template-/-448-/-White" transform="translate(67.000000, 32.003521)">
<rect id="Background" stroke="#C6C6C6" stroke-width="0.5" x="0.25" y="4.24647876" width="184.5" height="112.130435"></rect>
<g id="Header-type" transform="translate(0.000000, 4.005964)">
<polygon id="background" fill="#161616" points="0 0 185 0 185 6.944 0 6.944"></polygon>
<rect id="border-bottom" fill="#393939" x="0" y="6.79933333" width="185" height="1"></rect>
<text id="[Name]" font-family="IBMPlexSans-SemiBold, IBM Plex Sans" font-size="2.02533333" font-weight="500" line-spacing="2.604" letter-spacing="0.0144666666" fill="#FFFFFF">
<tspan x="6.65466667" y="4.02533333">[Name]</tspan>
</text>
<text id="IBM" font-family="IBMPlexSans, IBM Plex Sans" font-size="2.02533333" font-weight="normal" line-spacing="2.604" letter-spacing="0.0144666666" fill="#FFFFFF">
<tspan x="2.31466667" y="4.02533333">IBM</tspan>
</text>
</g>
<g id="Browser-bar" transform="translate(0.000000, 0.000000)">
<path d="M0.978,0 L184.022,0 C184.562134,-1.581948e-14 185,0.437865515 185,0.978 L185,4 L185,4 L0,4 L0,0.978 C4.48749056e-17,0.437865515 0.437865515,-1.2282351e-16 0.978,0 Z" id="Background" fill="#A8A8A8"></path>
<ellipse id="Oval-2" fill="#FFFFFF" cx="5.50591586" cy="2" rx="1" ry="1"></ellipse>
<ellipse id="Oval-1" fill="#FFFFFF" cx="2.50591586" cy="2" rx="1" ry="1"></ellipse>
</g>
</g>
<rect id="Rectangle" fill="#161616" x="68" y="36" width="16" height="6"></rect>
</g>
</svg>
More from Carbon Icons
View all
Grid in other icon packs
Copied!