Document Cube icon
Used to represent general file types and actions. The Document Cube 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 Document Cube 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 { DocumentCube24Regular, DocumentCube24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentCube24Regular aria-label="Document Cube" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_cube_24_regular.svg" width="24" height="24" alt="Document Cube"> 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="M6 2C4.89543 2 4 2.89543 4 4V11.7049L4.88197 11.2639C5.07996 11.1649 5.28783 11.0938 5.5 11.0505V4C5.5 3.72386 5.72386 3.5 6 3.5H12V8C12 9.10457 12.8954 10 14 10H18.5V20C18.5 20.2761 18.2761 20.5 18 20.5H11.8859C11.686 21.1379 11.2347 21.6807 10.618 21.989L10.5961 22H18C19.1046 22 20 21.1046 20 20V9.82777C20 9.29733 19.7893 8.78863 19.4142 8.41355L13.5864 2.58579C13.2114 2.21071 12.7027 2 12.1722 2H6ZM17.3793 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V4.62066L17.3793 8.5ZM6.67082 12.1584L10.1708 13.9084C10.679 14.1624 11 14.6818 11 15.25V19.753C11 20.3211 10.679 20.8405 10.1708 21.0946L6.67082 22.8446C6.24853 23.0557 5.75147 23.0557 5.32918 22.8446L1.82918 21.0946C1.321 20.8405 1 20.3211 1 19.753V15.25C1 14.6818 1.321 14.1624 1.82918 13.9084L5.32918 12.1584C5.75147 11.9472 6.24853 11.9472 6.67082 12.1584ZM3.22361 15.0528C2.97662 14.9293 2.67628 15.0294 2.55279 15.2764C2.42929 15.5234 2.5294 15.8237 2.77639 15.9472L5.5 17.3091V20.5C5.5 20.7762 5.72386 21 6 21C6.27614 21 6.5 20.7762 6.5 20.5V17.3091L9.22361 15.9472C9.4706 15.8237 9.57071 15.5234 9.44721 15.2764C9.32372 15.0294 9.02338 14.9293 8.77639 15.0528L6 16.441L3.22361 15.0528Z" 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/document_cube_24_regular.svg";Details
| Name | Document Cube |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_cube_24_regular.svg |
| Filled file | ic_fluent_document_cube_24_filled.svg |
| React components | DocumentCube24Regular, DocumentCube24Filled |
| License | MIT (© Microsoft Corporation) |