Receipt Play icon
Used to represent a receipt, purchase order, line items or an invoice. The Receipt Play 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 Play 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 { ReceiptPlay24Regular, ReceiptPlay24Filled } from "@fluentui/react-icons";
export function Example() {
return <ReceiptPlay24Regular aria-label="Receipt Play" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_receipt_play_24_regular.svg" width="24" height="24" alt="Receipt Play"> 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.9782C12.2747 20.5368 12.5142 20.0335 12.6865 19.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.0764C4.97679 11.1572 4.47417 11.3004 4 11.4982V5.25ZM13.75 12.5H10.6536C9.85015 11.8318 8.88313 11.3537 7.82145 11.1344C7.94293 11.0497 8.09066 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.25ZM12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12C9.53757 12 12 14.4624 12 17.5ZM5 19.499C5 19.8982 5.44484 20.1365 5.77714 19.9152L8.779 17.9161C9.07615 17.7183 9.07615 17.2817 8.779 17.0838L5.77714 15.0848C5.44484 14.8635 5 15.1017 5 15.5009V19.499Z" 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_play_24_regular.svg";Details
| Name | Receipt Play |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_receipt_play_24_regular.svg |
| Filled file | ic_fluent_receipt_play_24_filled.svg |
| React components | ReceiptPlay24Regular, ReceiptPlay24Filled |
| License | MIT (© Microsoft Corporation) |