Ticket Horizontal icon

Use the Ticket Horizontal 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 { TicketHorizontal24Regular, TicketHorizontal24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TicketHorizontal24Regular aria-label="Ticket Horizontal" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_ticket_horizontal_24_regular.svg" width="24" height="24" alt="Ticket Horizontal">

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="M19.75 5C20.9926 5 22 6.00736 22 7.25V9.03418C22 9.56562 21.6004 9.953 21.1523 10.0312C20.2132 10.1953 19.5 11.0149 19.5 12C19.5 12.9847 20.2129 13.8037 21.1523 13.9678C21.6004 14.046 22 14.4334 22 14.9648V16.75C22 17.9926 20.9926 19 19.75 19H4.25C3.00736 19 2 17.9926 2 16.75V14.9648C2 14.4334 2.39956 14.046 2.84766 13.9678L3.02051 13.9297C3.87319 13.7011 4.5 12.9234 4.5 12C4.5 11.0149 3.78683 10.1953 2.84766 10.0312C2.3996 9.953 2 9.56562 2 9.03418V7.25C2 6.00736 3.00736 5 4.25 5H19.75ZM4.25 6.5C3.83579 6.5 3.5 6.83579 3.5 7.25V8.64941C4.94504 9.07981 6 10.414 6 12C6 13.5861 4.94466 14.9184 3.5 15.3486V16.75C3.5 17.1642 3.83579 17.5 4.25 17.5H14.5V16.25C14.5 15.8358 14.8358 15.5 15.25 15.5C15.6642 15.5 16 15.8358 16 16.25V17.5H19.75C20.1642 17.5 20.5 17.1642 20.5 16.75V15.3486C19.0553 14.9184 18 13.5861 18 12C18 10.414 19.055 9.07981 20.5 8.64941V7.25C20.5 6.83579 20.1642 6.5 19.75 6.5H16V7.75C16 8.16421 15.6642 8.5 15.25 8.5C14.8358 8.5 14.5 8.16421 14.5 7.75V6.5H4.25ZM15.25 10C15.6642 10 16 10.3358 16 10.75V13.25C16 13.6642 15.6642 14 15.25 14C14.8358 14 14.5 13.6642 14.5 13.25V10.75C14.5 10.3358 14.8358 10 15.25 10Z" 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_horizontal_24_regular.svg";

Details

Keywords

eventcheckin