Fluent Icons

Ticket Horizontal icon

Used to represent general event scenarios. Contains horizontal & diagonal variants. The Ticket Horizontal icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_ticket_horizontal_24_regular.svg

Ticket Horizontal icon in React

npm install @fluentui/react-icons

import { TicketHorizontal24Regular } from "@fluentui/react-icons";

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

Ticket Horizontal icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/ticket_horizontal_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/ticket_horizontal_24_regular.svg" width="24" height="24" alt="Ticket Horizontal">

Ticket Horizontal icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.TicketHorizontal())" />

Ticket Horizontal icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.ticket_horizontal_24_regular)

Ticket Horizontal icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xED80;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xED80;" FontSize="24" />

Ticket Horizontal icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_ticket_horizontal_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\ed80";
  font-size: 24px;
}

Ticket Horizontal icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_ticket_horizontal_24_regular" />

// Kotlin
R.drawable.ic_fluent_ticket_horizontal_24_regular

Ticket Horizontal icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .ticketHorizontal24Regular)

Ticket Horizontal icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameTicket Horizontal
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_ticket_horizontal_24_regular.svg
Filled fileic_fluent_ticket_horizontal_24_filled.svg
React (Regular)TicketHorizontal20Regular, TicketHorizontal24Regular
React (Filled)TicketHorizontal20Filled, TicketHorizontal24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

event

Related icons

Ticket DiagonalAlign Center HorizontalAlign End HorizontalAlign Space Around HorizontalAlign Space Between HorizontalAlign Space Evenly HorizontalAlign Start HorizontalAlign Stretch HorizontalCenter HorizontalData Bar HorizontalData Bar Horizontal DescendingEdit Line Horizontal 3