shape square icon
shape-square from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- shape-square
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-shape-square
The same icon in other sets
Related icons in BoxIcons v2
Use the shape square icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 6c0-1.654-1.346-3-3-3a2.99 2.99 0 0 0-2.815 2h-6.37A2.99 2.99 0 0 0 6 3C4.346 3 3 4.346 3 6c0 1.302.839 2.401 2 2.815v6.369A3 3 0 0 0 3 18c0 1.654 1.346 3 3 3a2.99 2.99 0 0 0 2.815-2h6.369a2.99 2.99 0 0 0 2.815 2c1.654 0 3-1.346 3-3a3 3 0 0 0-2-2.816V8.816A3 3 0 0 0 21 6m-3-1a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m-2.815 12h-6.37A2.99 2.99 0 0 0 7 15.184V8.816A2.99 2.99 0 0 0 8.815 7h6.369A2.99 2.99 0 0 0 17 8.815v6.369A2.99 2.99 0 0 0 15.185 17M6 5a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m0 14a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m12 0a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></svg>
React
import type { SVGProps } from "react";
export function BxShapeSquare(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 6c0-1.654-1.346-3-3-3a2.99 2.99 0 0 0-2.815 2h-6.37A2.99 2.99 0 0 0 6 3C4.346 3 3 4.346 3 6c0 1.302.839 2.401 2 2.815v6.369A3 3 0 0 0 3 18c0 1.654 1.346 3 3 3a2.99 2.99 0 0 0 2.815-2h6.369a2.99 2.99 0 0 0 2.815 2c1.654 0 3-1.346 3-3a3 3 0 0 0-2-2.816V8.816A3 3 0 0 0 21 6m-3-1a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m-2.815 12h-6.37A2.99 2.99 0 0 0 7 15.184V8.816A2.99 2.99 0 0 0 8.815 7h6.369A2.99 2.99 0 0 0 17 8.815v6.369A2.99 2.99 0 0 0 15.185 17M6 5a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m0 14a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m12 0a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 6c0-1.654-1.346-3-3-3a2.99 2.99 0 0 0-2.815 2h-6.37A2.99 2.99 0 0 0 6 3C4.346 3 3 4.346 3 6c0 1.302.839 2.401 2 2.815v6.369A3 3 0 0 0 3 18c0 1.654 1.346 3 3 3a2.99 2.99 0 0 0 2.815-2h6.369a2.99 2.99 0 0 0 2.815 2c1.654 0 3-1.346 3-3a3 3 0 0 0-2-2.816V8.816A3 3 0 0 0 21 6m-3-1a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m-2.815 12h-6.37A2.99 2.99 0 0 0 7 15.184V8.816A2.99 2.99 0 0 0 8.815 7h6.369A2.99 2.99 0 0 0 17 8.815v6.369A2.99 2.99 0 0 0 15.185 17M6 5a1.001 1.001 0 1 1-1 1c0-.551.448-1 1-1m0 14a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m12 0a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></svg> </template>
CSS
.icon-shape-square {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%206c0-1.654-1.346-3-3-3a2.99%202.99%200%200%200-2.815%202h-6.37A2.99%202.99%200%200%200%206%203C4.346%203%203%204.346%203%206c0%201.302.839%202.401%202%202.815v6.369A3%203%200%200%200%203%2018c0%201.654%201.346%203%203%203a2.99%202.99%200%200%200%202.815-2h6.369a2.99%202.99%200%200%200%202.815%202c1.654%200%203-1.346%203-3a3%203%200%200%200-2-2.816V8.816A3%203%200%200%200%2021%206m-3-1a1.001%201.001%200%201%201-1%201c0-.551.448-1%201-1m-2.815%2012h-6.37A2.99%202.99%200%200%200%207%2015.184V8.816A2.99%202.99%200%200%200%208.815%207h6.369A2.99%202.99%200%200%200%2017%208.815v6.369A2.99%202.99%200%200%200%2015.185%2017M6%205a1.001%201.001%200%201%201-1%201c0-.551.448-1%201-1m0%2014a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202m12%200a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%206c0-1.654-1.346-3-3-3a2.99%202.99%200%200%200-2.815%202h-6.37A2.99%202.99%200%200%200%206%203C4.346%203%203%204.346%203%206c0%201.302.839%202.401%202%202.815v6.369A3%203%200%200%200%203%2018c0%201.654%201.346%203%203%203a2.99%202.99%200%200%200%202.815-2h6.369a2.99%202.99%200%200%200%202.815%202c1.654%200%203-1.346%203-3a3%203%200%200%200-2-2.816V8.816A3%203%200%200%200%2021%206m-3-1a1.001%201.001%200%201%201-1%201c0-.551.448-1%201-1m-2.815%2012h-6.37A2.99%202.99%200%200%200%207%2015.184V8.816A2.99%202.99%200%200%200%208.815%207h6.369A2.99%202.99%200%200%200%2017%208.815v6.369A2.99%202.99%200%200%200%2015.185%2017M6%205a1.001%201.001%200%201%201-1%201c0-.551.448-1%201-1m0%2014a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202m12%200a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/shape-square.svg?color=%231a73e8&size=48
