Box Toolbox icon
Used for shipping, production scenarios. The Box Toolbox 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 Toolbox 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 { BoxToolbox24Regular, BoxToolbox24Filled } from "@fluentui/react-icons";
export function Example() {
return <BoxToolbox24Regular aria-label="Box Toolbox" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_box_toolbox_24_regular.svg" width="24" height="24" alt="Box Toolbox"> 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="M13.4089 2.51301C12.5053 2.14671 11.4947 2.14671 10.5911 2.51301L3.09252 5.55298C2.43211 5.82071 2 6.46216 2 7.17477V16.8275C2 17.5401 2.43211 18.1815 3.09252 18.4493L10.5911 21.4892C10.7263 21.5441 10.8639 21.5907 11.0032 21.6291C11.0011 21.5867 11 21.5439 11 21.501V20.0364L3.65607 17.0592C3.56173 17.0209 3.5 16.9293 3.5 16.8275V7.75027L11.2503 10.7643V15.4092C11.5487 14.7957 12.0906 14.3224 12.7503 14.1153V10.7656L20.5 7.7734V11.5508C21.3872 12.0043 21.9955 12.9255 22 13.9892V7.17477C22 6.46216 21.5679 5.82071 20.9075 5.55298L13.4089 2.51301ZM11.1547 3.90312C11.6968 3.68334 12.3032 3.68334 12.8453 3.90312L19.4376 6.57567L16.7684 7.60628L9.24097 4.67894L11.1547 3.90312ZM7.21472 5.50039L14.6917 8.40811L12.0013 9.44691L4.58967 6.5646L7.21472 5.50039ZM14 15.001H13.5C12.6716 15.001 12 15.6725 12 16.501V18.001H14.5V17.751C14.5 17.3368 14.8358 17.001 15.25 17.001C15.6642 17.001 16 17.3368 16 17.751V18.001H19V17.751C19 17.3368 19.3358 17.001 19.75 17.001C20.1642 17.001 20.5 17.3368 20.5 17.751V18.001H23V16.501C23 15.6725 22.3284 15.001 21.5 15.001H21V14.001C21 13.0345 20.2165 12.251 19.25 12.251H15.75C14.7835 12.251 14 13.0345 14 14.001V15.001ZM15.5 14.001C15.5 13.8629 15.6119 13.751 15.75 13.751H19.25C19.3881 13.751 19.5 13.8629 19.5 14.001V15.001H15.5V14.001ZM12 21.501V19.501H14.5V20.251C14.5 20.6652 14.8358 21.001 15.25 21.001C15.6642 21.001 16 20.6652 16 20.251V19.501H19V20.251C19 20.6652 19.3358 21.001 19.75 21.001C20.1642 21.001 20.5 20.6652 20.5 20.251V19.501H23V21.501C23 22.3294 22.3284 23.001 21.5 23.001H13.5C12.6716 23.001 12 22.3294 12 21.501Z" 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_toolbox_24_regular.svg";Details
| Name | Box Toolbox |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_box_toolbox_24_regular.svg |
| Filled file | ic_fluent_box_toolbox_24_filled.svg |
| React components | BoxToolbox24Regular, BoxToolbox24Filled |
| License | MIT (© Microsoft Corporation) |