Receipt Cube icon
Used to represent a receipt, purchase order, line items or an invoice. The Receipt 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 Receipt 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 { ReceiptCube24Regular, ReceiptCube24Filled } from "@fluentui/react-icons";
export function Example() {
return <ReceiptCube24Regular aria-label="Receipt Cube" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_receipt_cube_24_regular.svg" width="24" height="24" alt="Receipt 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="M4 5.25C4 4.00736 5.00736 3 6.25 3H15.75C16.9926 3 18 4.00736 18 5.25V14H22V17.75C22 19.5449 20.5449 21 18.75 21H11.6668C11.8811 20.6276 12 20.1993 12 19.753V19.5H16.5V5.25C16.5 4.83579 16.1642 4.5 15.75 4.5H6.25C5.83579 4.5 5.5 4.83579 5.5 5.25V11.0505C5.28783 11.0938 5.07996 11.1649 4.88197 11.2639L4 11.7049V5.25ZM13.75 12.5H9.59017L7.55009 11.48C7.65849 11.1992 7.93098 11 8.25 11H13.75C14.1642 11 14.5 11.3358 14.5 11.75C14.5 12.1642 14.1642 12.5 13.75 12.5ZM18 19.5H18.75C19.7165 19.5 20.5 18.7165 20.5 17.75V15.5H18V19.5ZM8.25 7C7.83579 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.83579 8.5 8.25 8.5H13.75C14.1642 8.5 14.5 8.16421 14.5 7.75C14.5 7.33579 14.1642 7 13.75 7H8.25ZM10.1708 13.9084L6.67082 12.1584C6.24853 11.9472 5.75147 11.9472 5.32918 12.1584L1.82918 13.9084C1.321 14.1624 1 14.6818 1 15.25V19.753C1 20.3211 1.321 20.8405 1.82918 21.0946L5.32918 22.8446C5.75147 23.0557 6.24853 23.0557 6.67082 22.8446L10.1708 21.0946C10.679 20.8405 11 20.3211 11 19.753V15.25C11 14.6818 10.679 14.1624 10.1708 13.9084ZM2.55279 15.2764C2.67628 15.0294 2.97662 14.9293 3.22361 15.0528L6 16.441L8.77639 15.0528C9.02338 14.9293 9.32372 15.0294 9.44721 15.2764C9.57071 15.5234 9.4706 15.8237 9.22361 15.9472L6.5 17.3091V20.5C6.5 20.7762 6.27614 21 6 21C5.72386 21 5.5 20.7762 5.5 20.5V17.3091L2.77639 15.9472C2.5294 15.8237 2.42929 15.5234 2.55279 15.2764Z" 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/receipt_cube_24_regular.svg";Details
| Name | Receipt Cube |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_receipt_cube_24_regular.svg |
| Filled file | ic_fluent_receipt_cube_24_filled.svg |
| React components | ReceiptCube24Regular, ReceiptCube24Filled |
| License | MIT (© Microsoft Corporation) |