box icon
box from Material Design Icons by Pictogrammers · Filled · Brand / Logo · Apache-2.0 Free for personal and commercial use.
- Name
- box
- Set
- Material Design Icons
- Style
- Filled
- Category
- Brand / Logo
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
boxAkar IconsboxBootstrap IconsboxBoxIcons v2boxBoxIcons v2 SolidboxCarbonboxFont Awesome 6 SolidboxFeather Iconsbox-16-filledFluent UI System Iconsboxcss.ggboxHuge IconsboxHumbleiconsboxIconoirboxJam IconsboxLine AwesomeboxSVG LogosboxLucideboxMage IconsboxMajesticonsboxMaterial Symbolsbox-fillMingCute IconboxPixelarticonsboxRadix IconsboxSimple Iconsbox-boldSolar
More brand / logo icons from Material Design Icons
Use the box icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.39 14.04a2.57 2.57 0 0 0-2.57-2.57a2.565 2.565 0 1 0 2.57 2.57m1.71 0a4.274 4.274 0 0 1-8.05 2A4.274 4.274 0 0 1 1 14.11V7c0-.44.39-.82.86-.82s.84.38.85.82v3.62c.72-.54 1.61-.86 2.57-.86c1.63 0 3.05.92 3.77 2.27a4.27 4.27 0 0 1 3.77-2.27c2.36 0 4.28 1.92 4.28 4.28m-9.26 0c0-1.42-1.15-2.57-2.56-2.57a2.57 2.57 0 0 0-2.57 2.57a2.565 2.565 0 0 0 5.13 0m15 2.92c.11.16.16.34.16.51c0 .26-.12.53-.34.68a.9.9 0 0 1-.51.17c-.25 0-.5-.11-.65-.32l-1.91-2.53L17.7 18c-.17.21-.42.32-.67.32c-.18 0-.36-.06-.53-.17c-.21-.15-.33-.43-.33-.69c0-.17.06-.35.16-.5l2.17-2.92l-2.17-2.93a.83.83 0 0 1-.16-.5c0-.26.12-.51.33-.68c.39-.28.91-.21 1.2.16l1.89 2.52l1.91-2.52c.26-.37.79-.44 1.16-.16c.23.17.34.43.34.7c0 .17-.05.34-.16.48l-2.18 2.93z"/></svg>
React
import type { SVGProps } from "react";
export function MdiBox(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="M15.39 14.04a2.57 2.57 0 0 0-2.57-2.57a2.565 2.565 0 1 0 2.57 2.57m1.71 0a4.274 4.274 0 0 1-8.05 2A4.274 4.274 0 0 1 1 14.11V7c0-.44.39-.82.86-.82s.84.38.85.82v3.62c.72-.54 1.61-.86 2.57-.86c1.63 0 3.05.92 3.77 2.27a4.27 4.27 0 0 1 3.77-2.27c2.36 0 4.28 1.92 4.28 4.28m-9.26 0c0-1.42-1.15-2.57-2.56-2.57a2.57 2.57 0 0 0-2.57 2.57a2.565 2.565 0 0 0 5.13 0m15 2.92c.11.16.16.34.16.51c0 .26-.12.53-.34.68a.9.9 0 0 1-.51.17c-.25 0-.5-.11-.65-.32l-1.91-2.53L17.7 18c-.17.21-.42.32-.67.32c-.18 0-.36-.06-.53-.17c-.21-.15-.33-.43-.33-.69c0-.17.06-.35.16-.5l2.17-2.92l-2.17-2.93a.83.83 0 0 1-.16-.5c0-.26.12-.51.33-.68c.39-.28.91-.21 1.2.16l1.89 2.52l1.91-2.52c.26-.37.79-.44 1.16-.16c.23.17.34.43.34.7c0 .17-.05.34-.16.48l-2.18 2.93z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.39 14.04a2.57 2.57 0 0 0-2.57-2.57a2.565 2.565 0 1 0 2.57 2.57m1.71 0a4.274 4.274 0 0 1-8.05 2A4.274 4.274 0 0 1 1 14.11V7c0-.44.39-.82.86-.82s.84.38.85.82v3.62c.72-.54 1.61-.86 2.57-.86c1.63 0 3.05.92 3.77 2.27a4.27 4.27 0 0 1 3.77-2.27c2.36 0 4.28 1.92 4.28 4.28m-9.26 0c0-1.42-1.15-2.57-2.56-2.57a2.57 2.57 0 0 0-2.57 2.57a2.565 2.565 0 0 0 5.13 0m15 2.92c.11.16.16.34.16.51c0 .26-.12.53-.34.68a.9.9 0 0 1-.51.17c-.25 0-.5-.11-.65-.32l-1.91-2.53L17.7 18c-.17.21-.42.32-.67.32c-.18 0-.36-.06-.53-.17c-.21-.15-.33-.43-.33-.69c0-.17.06-.35.16-.5l2.17-2.92l-2.17-2.93a.83.83 0 0 1-.16-.5c0-.26.12-.51.33-.68c.39-.28.91-.21 1.2.16l1.89 2.52l1.91-2.52c.26-.37.79-.44 1.16-.16c.23.17.34.43.34.7c0 .17-.05.34-.16.48l-2.18 2.93z"/></svg> </template>
CSS
.icon-box {
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%22M15.39%2014.04a2.57%202.57%200%200%200-2.57-2.57a2.565%202.565%200%201%200%202.57%202.57m1.71%200a4.274%204.274%200%200%201-8.05%202A4.274%204.274%200%200%201%201%2014.11V7c0-.44.39-.82.86-.82s.84.38.85.82v3.62c.72-.54%201.61-.86%202.57-.86c1.63%200%203.05.92%203.77%202.27a4.27%204.27%200%200%201%203.77-2.27c2.36%200%204.28%201.92%204.28%204.28m-9.26%200c0-1.42-1.15-2.57-2.56-2.57a2.57%202.57%200%200%200-2.57%202.57a2.565%202.565%200%200%200%205.13%200m15%202.92c.11.16.16.34.16.51c0%20.26-.12.53-.34.68a.9.9%200%200%201-.51.17c-.25%200-.5-.11-.65-.32l-1.91-2.53L17.7%2018c-.17.21-.42.32-.67.32c-.18%200-.36-.06-.53-.17c-.21-.15-.33-.43-.33-.69c0-.17.06-.35.16-.5l2.17-2.92l-2.17-2.93a.83.83%200%200%201-.16-.5c0-.26.12-.51.33-.68c.39-.28.91-.21%201.2.16l1.89%202.52l1.91-2.52c.26-.37.79-.44%201.16-.16c.23.17.34.43.34.7c0%20.17-.05.34-.16.48l-2.18%202.93z%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%22M15.39%2014.04a2.57%202.57%200%200%200-2.57-2.57a2.565%202.565%200%201%200%202.57%202.57m1.71%200a4.274%204.274%200%200%201-8.05%202A4.274%204.274%200%200%201%201%2014.11V7c0-.44.39-.82.86-.82s.84.38.85.82v3.62c.72-.54%201.61-.86%202.57-.86c1.63%200%203.05.92%203.77%202.27a4.27%204.27%200%200%201%203.77-2.27c2.36%200%204.28%201.92%204.28%204.28m-9.26%200c0-1.42-1.15-2.57-2.56-2.57a2.57%202.57%200%200%200-2.57%202.57a2.565%202.565%200%200%200%205.13%200m15%202.92c.11.16.16.34.16.51c0%20.26-.12.53-.34.68a.9.9%200%200%201-.51.17c-.25%200-.5-.11-.65-.32l-1.91-2.53L17.7%2018c-.17.21-.42.32-.67.32c-.18%200-.36-.06-.53-.17c-.21-.15-.33-.43-.33-.69c0-.17.06-.35.16-.5l2.17-2.92l-2.17-2.93a.83.83%200%200%201-.16-.5c0-.26.12-.51.33-.68c.39-.28.91-.21%201.2.16l1.89%202.52l1.91-2.52c.26-.37.79-.44%201.16-.16c.23.17.34.43.34.7c0%20.17-.05.34-.16.48l-2.18%202.93z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/box.svg?color=%231a73e8&size=48
