Add icons to this collection by clicking the heart icon.
Side By Side icon - also known as button, view, stack, symbol, ui, stacked, side by side, icon, web interface, and user interface. Created in a clean gradient 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="512"
height="512"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="linear-gradient"
x1="3.859"
x2="13.141"
y1="13.141"
y2="3.859"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#903e97" />
<stop offset=".008" stop-color="#903e97" />
<stop offset=".13" stop-color="#983b92" />
<stop offset=".318" stop-color="#ae3486" />
<stop offset=".549" stop-color="#d12771" />
<stop offset=".679" stop-color="#e81f64" />
<stop offset=".908" stop-color="#ed3946" />
<stop offset="1" stop-color="#ef4438" />
</linearGradient>
<linearGradient
id="linear-gradient-3"
x1="18.859"
x2="28.141"
y1="13.141"
y2="3.859"
href="#linear-gradient"
/>
<linearGradient
id="linear-gradient-5"
x1="3.859"
x2="13.141"
y1="28.141"
y2="18.859"
href="#linear-gradient"
/>
<linearGradient
id="linear-gradient-7"
x1="18.859"
x2="28.141"
y1="28.141"
y2="18.859"
href="#linear-gradient"
/>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-3);
}
.cls-3 {
fill: url(#linear-gradient-5);
}
.cls-4 {
fill: url(#linear-gradient-7);
}
</style>
</defs>
<path
d="M11.071 14H5.929A2.932 2.932 0 0 1 3 11.071V5.929A2.932 2.932 0 0 1 5.929 3h5.142A2.932 2.932 0 0 1 14 5.929v5.142A2.932 2.932 0 0 1 11.071 14ZM5.929 5A.93.93 0 0 0 5 5.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929V5.929A.93.93 0 0 0 11.071 5Z"
class="cls-1"
/>
<path
d="M11.071 14H5.929A2.932 2.932 0 0 1 3 11.071V5.929A2.932 2.932 0 0 1 5.929 3h5.142A2.932 2.932 0 0 1 14 5.929v5.142A2.932 2.932 0 0 1 11.071 14ZM5.929 5A.93.93 0 0 0 5 5.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929V5.929A.93.93 0 0 0 11.071 5Z"
class="cls-1"
/>
<path
d="M26.071 14h-5.142A2.932 2.932 0 0 1 18 11.071V5.929A2.932 2.932 0 0 1 20.929 3h5.142A2.932 2.932 0 0 1 29 5.929v5.142A2.932 2.932 0 0 1 26.071 14Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929V5.929A.93.93 0 0 0 26.071 5Z"
class="cls-2"
/>
<path
d="M26.071 14h-5.142A2.932 2.932 0 0 1 18 11.071V5.929A2.932 2.932 0 0 1 20.929 3h5.142A2.932 2.932 0 0 1 29 5.929v5.142A2.932 2.932 0 0 1 26.071 14Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929V5.929A.93.93 0 0 0 26.071 5Z"
class="cls-2"
/>
<path
d="M11.071 29H5.929A2.932 2.932 0 0 1 3 26.071v-5.142A2.932 2.932 0 0 1 5.929 18h5.142A2.932 2.932 0 0 1 14 20.929v5.142A2.932 2.932 0 0 1 11.071 29Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929v-5.142a.93.93 0 0 0-.929-.929Z"
class="cls-3"
/>
<path
d="M11.071 29H5.929A2.932 2.932 0 0 1 3 26.071v-5.142A2.932 2.932 0 0 1 5.929 18h5.142A2.932 2.932 0 0 1 14 20.929v5.142A2.932 2.932 0 0 1 11.071 29Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929v-5.142a.93.93 0 0 0-.929-.929Z"
class="cls-3"
/>
<path
d="M26.071 29h-5.142A2.932 2.932 0 0 1 18 26.071v-5.142A2.932 2.932 0 0 1 20.929 18h5.142A2.932 2.932 0 0 1 29 20.929v5.142A2.932 2.932 0 0 1 26.071 29Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929v-5.142a.93.93 0 0 0-.929-.929Z"
class="cls-4"
/>
<path
d="M26.071 29h-5.142A2.932 2.932 0 0 1 18 26.071v-5.142A2.932 2.932 0 0 1 20.929 18h5.142A2.932 2.932 0 0 1 29 20.929v5.142A2.932 2.932 0 0 1 26.071 29Zm-5.142-9a.93.93 0 0 0-.929.929v5.142a.93.93 0 0 0 .929.929h5.142a.93.93 0 0 0 .929-.929v-5.142a.93.93 0 0 0-.929-.929Z"
class="cls-4"
/>
</svg>
More icons in the same style and category