Box Edit icon
Used for shipping, production scenarios. The Box Edit 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 Edit 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 { BoxEdit24Regular, BoxEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <BoxEdit24Regular aria-label="Box Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_box_edit_24_regular.svg" width="24" height="24" alt="Box Edit"> 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.7315 21.5462 10.8746 21.5943 11.0194 21.6335C11.0298 21.559 11.0444 21.4839 11.0632 21.4085L11.5209 19.5778C11.6829 18.9298 12.018 18.338 12.4903 17.8658L12.7503 17.6057V10.7656L20.5 7.7734V11.008C21.0085 10.9747 21.5233 11.0592 22 11.2613V7.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.50039ZM3.5 7.75027L11.2503 10.7643V20.1354C11.2183 20.1241 11.1863 20.112 11.1547 20.0991L3.65607 17.0592C3.56173 17.0209 3.5 16.9293 3.5 16.8275V7.75027ZM19.0999 12.6704L13.1974 18.5729C12.8533 18.917 12.6092 19.3482 12.4911 19.8203L12.0334 21.651C11.8344 22.4472 12.5556 23.1683 13.3517 22.9693L15.1824 22.5116C15.6545 22.3936 16.0857 22.1494 16.4299 21.8053L22.3323 15.9029C23.2249 15.0103 23.2249 13.5631 22.3323 12.6704C21.4397 11.7778 19.9925 11.7778 19.0999 12.6704Z" 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_edit_24_regular.svg";Details
| Name | Box Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_box_edit_24_regular.svg |
| Filled file | ic_fluent_box_edit_24_filled.svg |
| React components | BoxEdit24Regular, BoxEdit24Filled |
| License | MIT (© Microsoft Corporation) |