boxes icon
boxes from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- boxes
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- 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 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="round" d="M6 12V8c0-.943 0-1.414.293-1.707S7.057 6 8 6h4c.943 0 1.414 0 1.707.293S14 7.057 14 8v4c0 .943 0 1.414-.293 1.707S12.943 14 12 14H8c-.943 0-1.414 0-1.707-.293S6 12.943 6 12m-4 8v-4c0-.943 0-1.414.293-1.707S3.057 14 4 14h4c.943 0 1.414 0 1.707.293S10 15.057 10 16v4c0 .943 0 1.414-.293 1.707S8.943 22 8 22H4c-.943 0-1.414 0-1.707-.293S2 20.943 2 20m8 0v-4c0-.943 0-1.414.293-1.707S11.057 14 12 14h4c.943 0 1.414 0 1.707.293S18 15.057 18 16v4c0 .943 0 1.414-.293 1.707S16.943 22 16 22h-4c-.943 0-1.414 0-1.707-.293S10 20.943 10 20m8 1.5l3.414-3.414c.29-.29.434-.434.51-.617c.076-.184.076-.389.076-.797V12c0-.943 0-1.414-.293-1.707S20.943 10 20 10h-2"/><path stroke-linecap="round" d="m6 10l-3.414 3.414c-.29.29-.434.434-.51.617C2 14.215 2 14.42 2 14.829V16.5m12-3l3.317-2.902c.336-.295.504-.442.594-.639S18 9.54 18 9.092V4c0-.943 0-1.414-.293-1.707S16.943 2 16 2h-4.74c-.376 0-.563 0-.735.065c-.172.066-.312.19-.593.44l-3.26 2.898c-.331.294-.496.441-.584.636C6 6.235 6 6.456 6 6.9V9"/><path d="m14 6l3.5-3.5M18 14l3.5-3.5"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsBoxes(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5"><path strokeLinecap="round" d="M6 12V8c0-.943 0-1.414.293-1.707S7.057 6 8 6h4c.943 0 1.414 0 1.707.293S14 7.057 14 8v4c0 .943 0 1.414-.293 1.707S12.943 14 12 14H8c-.943 0-1.414 0-1.707-.293S6 12.943 6 12m-4 8v-4c0-.943 0-1.414.293-1.707S3.057 14 4 14h4c.943 0 1.414 0 1.707.293S10 15.057 10 16v4c0 .943 0 1.414-.293 1.707S8.943 22 8 22H4c-.943 0-1.414 0-1.707-.293S2 20.943 2 20m8 0v-4c0-.943 0-1.414.293-1.707S11.057 14 12 14h4c.943 0 1.414 0 1.707.293S18 15.057 18 16v4c0 .943 0 1.414-.293 1.707S16.943 22 16 22h-4c-.943 0-1.414 0-1.707-.293S10 20.943 10 20m8 1.5l3.414-3.414c.29-.29.434-.434.51-.617c.076-.184.076-.389.076-.797V12c0-.943 0-1.414-.293-1.707S20.943 10 20 10h-2"/><path strokeLinecap="round" d="m6 10l-3.414 3.414c-.29.29-.434.434-.51.617C2 14.215 2 14.42 2 14.829V16.5m12-3l3.317-2.902c.336-.295.504-.442.594-.639S18 9.54 18 9.092V4c0-.943 0-1.414-.293-1.707S16.943 2 16 2h-4.74c-.376 0-.563 0-.735.065c-.172.066-.312.19-.593.44l-3.26 2.898c-.331.294-.496.441-.584.636C6 6.235 6 6.456 6 6.9V9"/><path d="m14 6l3.5-3.5M18 14l3.5-3.5"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="round" d="M6 12V8c0-.943 0-1.414.293-1.707S7.057 6 8 6h4c.943 0 1.414 0 1.707.293S14 7.057 14 8v4c0 .943 0 1.414-.293 1.707S12.943 14 12 14H8c-.943 0-1.414 0-1.707-.293S6 12.943 6 12m-4 8v-4c0-.943 0-1.414.293-1.707S3.057 14 4 14h4c.943 0 1.414 0 1.707.293S10 15.057 10 16v4c0 .943 0 1.414-.293 1.707S8.943 22 8 22H4c-.943 0-1.414 0-1.707-.293S2 20.943 2 20m8 0v-4c0-.943 0-1.414.293-1.707S11.057 14 12 14h4c.943 0 1.414 0 1.707.293S18 15.057 18 16v4c0 .943 0 1.414-.293 1.707S16.943 22 16 22h-4c-.943 0-1.414 0-1.707-.293S10 20.943 10 20m8 1.5l3.414-3.414c.29-.29.434-.434.51-.617c.076-.184.076-.389.076-.797V12c0-.943 0-1.414-.293-1.707S20.943 10 20 10h-2"/><path stroke-linecap="round" d="m6 10l-3.414 3.414c-.29.29-.434.434-.51.617C2 14.215 2 14.42 2 14.829V16.5m12-3l3.317-2.902c.336-.295.504-.442.594-.639S18 9.54 18 9.092V4c0-.943 0-1.414-.293-1.707S16.943 2 16 2h-4.74c-.376 0-.563 0-.735.065c-.172.066-.312.19-.593.44l-3.26 2.898c-.331.294-.496.441-.584.636C6 6.235 6 6.456 6 6.9V9"/><path d="m14 6l3.5-3.5M18 14l3.5-3.5"/></g></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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M6%2012V8c0-.943%200-1.414.293-1.707S7.057%206%208%206h4c.943%200%201.414%200%201.707.293S14%207.057%2014%208v4c0%20.943%200%201.414-.293%201.707S12.943%2014%2012%2014H8c-.943%200-1.414%200-1.707-.293S6%2012.943%206%2012m-4%208v-4c0-.943%200-1.414.293-1.707S3.057%2014%204%2014h4c.943%200%201.414%200%201.707.293S10%2015.057%2010%2016v4c0%20.943%200%201.414-.293%201.707S8.943%2022%208%2022H4c-.943%200-1.414%200-1.707-.293S2%2020.943%202%2020m8%200v-4c0-.943%200-1.414.293-1.707S11.057%2014%2012%2014h4c.943%200%201.414%200%201.707.293S18%2015.057%2018%2016v4c0%20.943%200%201.414-.293%201.707S16.943%2022%2016%2022h-4c-.943%200-1.414%200-1.707-.293S10%2020.943%2010%2020m8%201.5l3.414-3.414c.29-.29.434-.434.51-.617c.076-.184.076-.389.076-.797V12c0-.943%200-1.414-.293-1.707S20.943%2010%2020%2010h-2%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m6%2010l-3.414%203.414c-.29.29-.434.434-.51.617C2%2014.215%202%2014.42%202%2014.829V16.5m12-3l3.317-2.902c.336-.295.504-.442.594-.639S18%209.54%2018%209.092V4c0-.943%200-1.414-.293-1.707S16.943%202%2016%202h-4.74c-.376%200-.563%200-.735.065c-.172.066-.312.19-.593.44l-3.26%202.898c-.331.294-.496.441-.584.636C6%206.235%206%206.456%206%206.9V9%22%2F%3E%3Cpath%20d%3D%22m14%206l3.5-3.5M18%2014l3.5-3.5%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M6%2012V8c0-.943%200-1.414.293-1.707S7.057%206%208%206h4c.943%200%201.414%200%201.707.293S14%207.057%2014%208v4c0%20.943%200%201.414-.293%201.707S12.943%2014%2012%2014H8c-.943%200-1.414%200-1.707-.293S6%2012.943%206%2012m-4%208v-4c0-.943%200-1.414.293-1.707S3.057%2014%204%2014h4c.943%200%201.414%200%201.707.293S10%2015.057%2010%2016v4c0%20.943%200%201.414-.293%201.707S8.943%2022%208%2022H4c-.943%200-1.414%200-1.707-.293S2%2020.943%202%2020m8%200v-4c0-.943%200-1.414.293-1.707S11.057%2014%2012%2014h4c.943%200%201.414%200%201.707.293S18%2015.057%2018%2016v4c0%20.943%200%201.414-.293%201.707S16.943%2022%2016%2022h-4c-.943%200-1.414%200-1.707-.293S10%2020.943%2010%2020m8%201.5l3.414-3.414c.29-.29.434-.434.51-.617c.076-.184.076-.389.076-.797V12c0-.943%200-1.414-.293-1.707S20.943%2010%2020%2010h-2%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m6%2010l-3.414%203.414c-.29.29-.434.434-.51.617C2%2014.215%202%2014.42%202%2014.829V16.5m12-3l3.317-2.902c.336-.295.504-.442.594-.639S18%209.54%2018%209.092V4c0-.943%200-1.414-.293-1.707S16.943%202%2016%202h-4.74c-.376%200-.563%200-.735.065c-.172.066-.312.19-.593.44l-3.26%202.898c-.331.294-.496.441-.584.636C6%206.235%206%206.456%206%206.9V9%22%2F%3E%3Cpath%20d%3D%22m14%206l3.5-3.5M18%2014l3.5-3.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/boxes.svg?color=%231a73e8&size=48
