Add icons to this collection by clicking the heart icon.
Layout icon - also known as interface, web, web design, columns, development, two, layout, design, ui, web development, and art and design. Created in a clean filled style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="b" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="c" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="d" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="e" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="f" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="g" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="h" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="i" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="j" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="k" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="l" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="m" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="n" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="o" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="p" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
<clipPath id="q" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<mask id="a">
<rect width="100%" height="100%" fill="#fff" />
<path
d="M0 0h104.001Z"
transform="matrix(1.33333 0 0 -1.33333 381.286 421.34)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h104.001Z"
transform="matrix(1.33333 0 0 -1.33333 162.713 421.34)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h267.931Z"
transform="matrix(1.33333 0 0 -1.33333 162.713 500.257)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-324.531-144.276"
transform="matrix(1.33333 0 0 -1.33333 553.003 168.366)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 338.618-150.117"
transform="matrix(1.33333 0 0 -1.33333 111.001 160.578)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h56.523Z"
transform="matrix(1.33333 0 0 -1.33333 303.652 56.754)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 497.028 56.754)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 94.435 56.754)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v56.523Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 379.015)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 588.231)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 185.639)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h56.523Z"
transform="matrix(1.33333 0 0 -1.33333 303.652 625.551)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 94.435 625.551)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 497.028 625.551)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v56.523Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 379.015)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 185.639)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 588.231)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M15.677 496.738h55.82v-55.819h-55.82zM15.677 70.819h55.82V15h-55.82zM441.858 496.738h55.819v-55.819h-55.819zM441.858 70.819h55.819V15h-55.819z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
</mask>
<g mask="url(#a)">
<path
d="M0 0h104.001Z"
transform="matrix(1.33333 0 0 -1.33333 381.286 421.34)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-104.001"
transform="matrix(1.33333 0 0 -1.33333 519.954 421.339)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h104.001Z"
transform="matrix(1.33333 0 0 -1.33333 162.713 421.34)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h104.001"
transform="matrix(1.33333 0 0 -1.33333 162.713 421.339)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h267.931Z"
transform="matrix(1.33333 0 0 -1.33333 162.713 500.257)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-267.931"
transform="matrix(1.33333 0 0 -1.33333 519.954 500.257)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M122.035 255.593h267.931v119.6H122.035Z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-324.531-144.276"
transform="matrix(1.33333 0 0 -1.33333 553.003 168.366)"
fill="none"
stroke="#fff"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 338.618-150.117"
transform="matrix(1.33333 0 0 -1.33333 111.001 160.578)"
fill="none"
stroke="#fff"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h56.523Z"
transform="matrix(1.33333 0 0 -1.33333 303.652 56.754)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#b)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h56.523"
transform="translate(227.738 469.435)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 497.028 56.754)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#c)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h68.402"
transform="translate(372.771 469.435)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 94.435 56.754)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#d)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h68.402"
transform="translate(70.827 469.435)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v56.523Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 379.015)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#e)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v-56.523"
transform="translate(43.587 284.262)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 588.231)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#f)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v-68.402"
transform="translate(43.587 139.229)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 58.116 185.639)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#g)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v-68.402"
transform="translate(43.587 441.173)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0h56.523Z"
transform="matrix(1.33333 0 0 -1.33333 303.652 625.551)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#h)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h-56.523"
transform="translate(284.262 42.836)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 94.435 625.551)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#i)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h-68.402"
transform="translate(139.229 42.836)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0h68.403Z"
transform="matrix(1.33333 0 0 -1.33333 497.028 625.551)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#j)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0h-68.402"
transform="translate(441.173 42.836)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v56.523Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 379.015)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#k)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v56.523"
transform="translate(469.07 227.738)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 185.639)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#l)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v68.402"
transform="translate(469.07 372.771)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M0 0v68.403Z"
transform="matrix(1.33333 0 0 -1.33333 625.426 588.231)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#m)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M0 0v68.402"
transform="translate(469.07 70.827)"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M15.677 496.738h55.82v-55.819h-55.82z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#n)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M15.677 496.738h55.82v-55.819h-55.82z"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M15.677 70.819h55.82V15h-55.82z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#o)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M15.677 70.819h55.82V15h-55.82z"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M441.858 496.738h55.819v-55.819h-55.819z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#p)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M441.858 496.738h55.819v-55.819h-55.819z"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<path
d="M441.858 70.819h55.819V15h-55.819z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#000"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g
clip-path="url(#q)"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
>
<path
d="M441.858 70.819h55.819V15h-55.819z"
fill="none"
stroke="#000"
stroke-width="30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</g>
</svg>
More icons in the same style and category