Fluent Icons

Bow Tie icon

The Bow Tie 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_bow_tie_24_regular.svg

Bow Tie icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <BowTie24Regular aria-label="Bow Tie" />;
}

Bow Tie icon in SVG

npm install @fluentui/svg-icons

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

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

Bow Tie icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Bow Tie icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.bow_tie_24_regular)

Bow Tie 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="&#xF00D5;" FontSize="24" />

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

Bow Tie 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_bow_tie_24_regular"></i>

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

Bow Tie icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_bow_tie_24_regular

Bow Tie icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .bowTie24Regular)

Bow Tie 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 Bow Tie 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 { BowTie24Regular, BowTie24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BowTie24Regular aria-label="Bow Tie" />;
}

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_bow_tie_24_regular.svg" width="24" height="24" alt="Bow Tie">

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="M5.73352 13.8907L6.18223 13.6362L4.84634 18.8127C4.56049 19.9204 5.39685 21 6.54083 21H9C9.9665 21 10.75 20.2165 10.75 19.25V11.5L10.7498 11.4845C10.8318 11.4947 10.9153 11.5 11 11.5H13C13.0847 11.5 13.1682 11.4947 13.2502 11.4845C13.2501 11.4897 13.25 11.4948 13.25 11.5V19.25C13.25 20.2165 14.0335 21 15 21H17.4592C18.6031 21 19.4395 19.9204 19.1537 18.8127L17.8178 13.6362L18.2665 13.8907C19.9331 14.8361 22 13.6323 22 11.7162V5.76557C22 3.84601 19.9263 2.64259 18.2597 3.59496L14.7597 5.59496C14.5811 5.69697 14.4183 5.81911 14.2733 5.9576C13.9274 5.67175 13.4838 5.5 13 5.5H11C10.5162 5.5 10.0726 5.67175 9.72672 5.9576C9.58173 5.81911 9.41887 5.69697 9.24035 5.59496L5.74035 3.59496C4.07371 2.64259 2 3.84601 2 5.76557V11.7162C2 13.6323 4.06693 14.8361 5.73352 13.8907ZM3.5 5.76557C3.5 4.99774 4.32948 4.51638 4.99614 4.89732L8.49614 6.89732C8.80771 7.07537 9 7.40671 9 7.76557V8H6.75C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H9V9.73076C9 10.0907 8.80652 10.4229 8.49341 10.6006L4.99341 12.586C4.32677 12.9642 3.5 12.4826 3.5 11.7162V5.76557ZM9.23352 11.9053L9.25 11.8958V19.25C9.25 19.3881 9.13807 19.5 9 19.5H6.54083C6.3774 19.5 6.25792 19.3458 6.29876 19.1875L7.97621 12.6874C7.98291 12.6614 7.98816 12.6355 7.99202 12.6095L9.23352 11.9053ZM16.008 12.6095C16.0118 12.6355 16.0171 12.6614 16.0238 12.6874L17.7012 19.1875C17.7421 19.3458 17.6226 19.5 17.4592 19.5H15C14.8619 19.5 14.75 19.3881 14.75 19.25V11.8958C14.7555 11.899 14.761 11.9021 14.7665 11.9053L16.008 12.6095ZM10.5 9.5V7.5C10.5 7.22386 10.7239 7 11 7H13C13.2761 7 13.5 7.22386 13.5 7.5V9.5C13.5 9.77614 13.2761 10 13 10H11C10.7239 10 10.5 9.77614 10.5 9.5ZM15 9.5H17.2536C17.6678 9.5 18.0036 9.16421 18.0036 8.75C18.0036 8.33579 17.6678 8 17.2536 8H15V7.76557C15 7.40671 15.1923 7.07537 15.5039 6.89732L19.0039 4.89732C19.6705 4.51638 20.5 4.99774 20.5 5.76557V11.7162C20.5 12.4826 19.6732 12.9642 19.0066 12.586L15.5066 10.6006C15.1935 10.4229 15 10.0907 15 9.73076V9.5Z" fill="currentColor"/></svg>

Details

NameBow Tie
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_bow_tie_24_regular.svg
Filled fileic_fluent_bow_tie_24_filled.svg
React (Regular)BowTie20Regular, BowTie24Regular
React (Filled)BowTie20Filled, BowTie24Filled
LicenseMIT (© Microsoft Corporation)

Related icons

Bot SparkleBowl ChopsticksBot AddBowl SaladBotBoxBorder Top Bottom ThickBox Arrow LeftBorder Top Bottom DoubleBox Arrow UpBorder Top BottomBox Checkmark