Box Multiple icon
Used for shipping, production scenarios. The Box Multiple icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Box Multiple icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { BoxMultiple24Regular, BoxMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <BoxMultiple24Regular aria-label="Box Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_box_multiple_24_regular.svg" width="24" height="24" alt="Box Multiple"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.78 3.73716C15.2766 3.55115 14.7234 3.55115 14.22 3.73716L9.91334 5.32875C9.81518 5.36503 9.75 5.4586 9.75 5.56325V8.35645C9.25319 8.27702 8.7468 8.27702 8.25 8.35645V5.56325C8.25 4.83071 8.70625 4.17569 9.39337 3.92175L13.7001 2.33017C14.539 2.02015 15.461 2.02015 16.2999 2.33017L20.6066 3.92175C21.2937 4.17569 21.75 4.83071 21.75 5.56325V16.2333C21.75 16.9658 21.2937 17.6208 20.6066 17.8748L16.5892 19.3594C16.6938 19.0674 16.75 18.7547 16.75 18.4325V17.7009L20.0867 16.4678C20.1848 16.4315 20.25 16.3379 20.25 16.2333V5.56325C20.25 5.4586 20.1848 5.36503 20.0867 5.32875L15.78 3.73716ZM11.7692 7.66706C11.3777 7.53174 11.1701 7.10468 11.3054 6.71319C11.4407 6.32171 11.8678 6.11404 12.2593 6.24936L14.9178 7.16832C14.9708 7.18663 15.0284 7.18661 15.0813 7.16826L17.7318 6.24986C18.1232 6.11424 18.5504 6.32158 18.686 6.71297C18.8216 7.10435 18.6143 7.53157 18.2229 7.66718L15.5725 8.58558C15.2017 8.71404 14.7986 8.7142 14.4278 8.58602L11.7692 7.66706ZM5.76921 14.6671C5.37772 14.5317 5.17006 14.1047 5.30538 13.7132C5.4407 13.3217 5.86776 13.114 6.25925 13.2494L8.99959 14.1966L11.7318 13.2499C12.1232 13.1142 12.5504 13.3216 12.686 13.713C12.8216 14.1043 12.6143 14.5316 12.2229 14.6672L9.74989 15.5241V18.2234C9.74989 18.6376 9.4141 18.9734 8.99989 18.9734C8.58567 18.9734 8.24989 18.6376 8.24989 18.2234V15.5245L5.76921 14.6671ZM10.2999 9.52939C9.46103 9.21937 8.53897 9.21937 7.70008 9.52939L3.39337 11.121C2.70625 11.3749 2.25 12.0299 2.25 12.7625V18.4325C2.25 19.165 2.70625 19.8201 3.39337 20.074L7.70008 21.6656C8.53897 21.9756 9.46103 21.9756 10.2999 21.6656L14.6066 20.074C15.2937 19.8201 15.75 19.165 15.75 18.4325V12.7625C15.75 12.0299 15.2937 11.3749 14.6066 11.121L10.2999 9.52939ZM8.22005 10.9364C8.72338 10.7504 9.27662 10.7504 9.77995 10.9364L14.0867 12.528C14.1848 12.5642 14.25 12.6578 14.25 12.7625V18.4325C14.25 18.5371 14.1848 18.6307 14.0867 18.667L9.77995 20.2586C9.27662 20.4446 8.72338 20.4446 8.22005 20.2586L3.91334 18.667C3.81518 18.6307 3.75 18.5371 3.75 18.4325V12.7625C3.75 12.6578 3.81518 12.5642 3.91334 12.528L8.22005 10.9364Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/box_multiple_24_regular.svg";Details
| Name | Box Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_box_multiple_24_regular.svg |
| Filled file | ic_fluent_box_multiple_24_filled.svg |
| React components | BoxMultiple24Regular, BoxMultiple24Filled |
| License | MIT (© Microsoft Corporation) |