Ticket Diagonal icon
Used to represent general event scenarios. Contains horizontal & diagonal variants. The Ticket Diagonal 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 Ticket Diagonal 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 { TicketDiagonal24Regular, TicketDiagonal24Filled } from "@fluentui/react-icons";
export function Example() {
return <TicketDiagonal24Regular aria-label="Ticket Diagonal" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ticket_diagonal_24_regular.svg" width="24" height="24" alt="Ticket Diagonal"> 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="M12.4486 2.65364C13.3272 1.77537 14.7516 1.77493 15.6303 2.65364L16.8852 3.90854C17.334 4.35771 17.2209 5.0144 16.8686 5.3646C16.64 5.59191 16.5004 5.9043 16.5004 6.25035C16.5008 6.94048 17.0605 7.50036 17.7504 7.50036C18.0947 7.50018 18.4055 7.35984 18.6332 7.13024L18.7026 7.06676C19.041 6.7849 19.5894 6.70288 20.0033 7.03551L20.0903 7.11364L21.3383 8.3617L21.4926 8.5326C22.2126 9.4162 22.1616 10.7198 21.3383 11.5434L11.5453 21.3364C10.6667 22.2147 9.24218 22.2141 8.36361 21.3364L7.11458 20.0874C6.66626 19.6387 6.77837 18.9829 7.13118 18.6323L7.21321 18.5424C7.39322 18.326 7.50013 18.0509 7.50032 17.7504C7.50032 17.0604 6.94047 16.5008 6.25031 16.5004C5.90484 16.5004 5.59282 16.6394 5.36554 16.8676C5.01515 17.2195 4.3592 17.3317 3.91045 16.8832L2.65556 15.6284C1.77685 14.7497 1.7772 13.3253 2.65556 12.4467L12.4486 2.65364ZM14.5697 3.7142C14.277 3.42149 13.8022 3.42136 13.5092 3.7142L11.142 6.08043L11.9701 6.90856C12.2626 7.20145 12.2628 7.67638 11.9701 7.96912C11.6773 8.26184 11.2024 8.2616 10.9095 7.96912L10.0814 7.14098L3.71611 13.5072C3.4233 13.8002 3.42337 14.2751 3.71611 14.5678L4.6585 15.5102C5.10731 15.1905 5.65651 15.0004 6.25031 15.0004C7.76868 15.0008 9.00033 16.2318 9.00033 17.7504C9.00016 18.3447 8.80728 18.8919 8.48763 19.3393L9.42416 20.2759C9.71716 20.568 10.1922 20.5682 10.4847 20.2759L16.85 13.9096L16.0307 13.0903C15.7378 12.7974 15.7378 12.3226 16.0307 12.0297C16.3235 11.7368 16.7984 11.7368 17.0912 12.0297L17.9106 12.849L20.2778 10.4828C20.5702 10.1902 20.5699 9.71522 20.2778 9.42225L19.3412 8.48572C18.8932 8.80628 18.3456 9.00023 17.7504 9.00037C16.2317 9.00037 15.0008 7.76863 15.0004 6.25035C15.0004 5.65575 15.1915 5.10595 15.5121 4.65659L14.5697 3.7142ZM13.0306 9.02967C13.3235 8.73681 13.7983 8.73681 14.0912 9.02967L14.9701 9.90858C15.2626 10.2015 15.2628 10.6764 14.9701 10.9691C14.6774 11.2619 14.2024 11.2616 13.9096 10.9691L13.0306 10.0902C12.7378 9.79737 12.7378 9.32254 13.0306 9.02967Z" 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/ticket_diagonal_24_regular.svg";Details
| Name | Ticket Diagonal |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ticket_diagonal_24_regular.svg |
| Filled file | ic_fluent_ticket_diagonal_24_filled.svg |
| React components | TicketDiagonal24Regular, TicketDiagonal24Filled |
| License | MIT (© Microsoft Corporation) |