boxes icon
boxes from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.
- Name
- boxes
- Set
- Bootstrap Icons
- Style
- Outline
- Viewbox
- 16×16
- License
- MIT
The same icon in other sets
Use the boxes icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2l-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504L1.508 9.071l2.742 1.567l2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134l2.75 1.571v-3.134L8.5 9.933zm.508-3.996l2.742 1.567l2.742-1.567l-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643L8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z"/></svg>
React
import type { SVGProps } from "react";
export function BiBoxes(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2l-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504L1.508 9.071l2.742 1.567l2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134l2.75 1.571v-3.134L8.5 9.933zm.508-3.996l2.742 1.567l2.742-1.567l-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643L8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2l-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504L1.508 9.071l2.742 1.567l2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134l2.75 1.571v-3.134L8.5 9.933zm.508-3.996l2.742 1.567l2.742-1.567l-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643L8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z"/></svg> </template>
CSS
.icon-boxes {
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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.752.066a.5.5%200%200%201%20.496%200l3.75%202.143a.5.5%200%200%201%20.252.434v3.995l3.498%202A.5.5%200%200%201%2016%209.07v4.286a.5.5%200%200%201-.252.434l-3.75%202.143a.5.5%200%200%201-.496%200l-3.502-2l-3.502%202.001a.5.5%200%200%201-.496%200l-3.75-2.143A.5.5%200%200%201%200%2013.357V9.071a.5.5%200%200%201%20.252-.434L3.75%206.638V2.643a.5.5%200%200%201%20.252-.434zM4.25%207.504L1.508%209.071l2.742%201.567l2.742-1.567zM7.5%209.933l-2.75%201.571v3.134l2.75-1.571zm1%203.134l2.75%201.571v-3.134L8.5%209.933zm.508-3.996l2.742%201.567l2.742-1.567l-2.742-1.567zm2.242-2.433V3.504L8.5%205.076V8.21zM7.5%208.21V5.076L4.75%203.504v3.134zM5.258%202.643L8%204.21l2.742-1.567L8%201.076zM15%209.933l-2.75%201.571v3.134L15%2013.067zM3.75%2014.638v-3.134L1%209.933v3.134z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.752.066a.5.5%200%200%201%20.496%200l3.75%202.143a.5.5%200%200%201%20.252.434v3.995l3.498%202A.5.5%200%200%201%2016%209.07v4.286a.5.5%200%200%201-.252.434l-3.75%202.143a.5.5%200%200%201-.496%200l-3.502-2l-3.502%202.001a.5.5%200%200%201-.496%200l-3.75-2.143A.5.5%200%200%201%200%2013.357V9.071a.5.5%200%200%201%20.252-.434L3.75%206.638V2.643a.5.5%200%200%201%20.252-.434zM4.25%207.504L1.508%209.071l2.742%201.567l2.742-1.567zM7.5%209.933l-2.75%201.571v3.134l2.75-1.571zm1%203.134l2.75%201.571v-3.134L8.5%209.933zm.508-3.996l2.742%201.567l2.742-1.567l-2.742-1.567zm2.242-2.433V3.504L8.5%205.076V8.21zM7.5%208.21V5.076L4.75%203.504v3.134zM5.258%202.643L8%204.21l2.742-1.567L8%201.076zM15%209.933l-2.75%201.571v3.134L15%2013.067zM3.75%2014.638v-3.134L1%209.933v3.134z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bi/boxes.svg?color=%231a73e8&size=48
