Fluent Icons

Target icon

Used in targeting & hitting goal scenarios. The Target icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 32 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_target_24_regular.svg

Target icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <Target24Regular aria-label="Target" />;
}

Target icon in SVG

npm install @fluentui/svg-icons

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

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

Target icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Target icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.target_24_regular)

Target 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="&#xF782;" FontSize="24" />

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

Target 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_target_24_regular"></i>

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

Target icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_target_24_regular

Target icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .target24Regular)

Target 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 Target 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 { Target24Regular, Target24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Target24Regular aria-label="Target" />;
}

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_target_24_regular.svg" width="24" height="24" alt="Target">

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="M11.9982 14.0002C13.1027 14.0002 13.9982 13.1047 13.9982 12.0002C13.9982 10.8956 13.1027 10.0002 11.9982 10.0002C10.8936 10.0002 9.99817 10.8956 9.99817 12.0002C9.99817 13.1047 10.8936 14.0002 11.9982 14.0002ZM5.99817 12.0002C5.99817 8.68644 8.68446 6.00015 11.9982 6.00015C15.3119 6.00015 17.9982 8.68644 17.9982 12.0002C17.9982 15.3139 15.3119 18.0002 11.9982 18.0002C8.68446 18.0002 5.99817 15.3139 5.99817 12.0002ZM11.9982 7.50015C9.51289 7.50015 7.49817 9.51487 7.49817 12.0002C7.49817 14.4854 9.51289 16.5002 11.9982 16.5002C14.4834 16.5002 16.4982 14.4854 16.4982 12.0002C16.4982 9.51487 14.4834 7.50015 11.9982 7.50015ZM1.99609 12.0001C1.99609 6.47614 6.47419 1.99805 11.9982 1.99805C17.5222 1.99805 22.0003 6.47614 22.0003 12.0001C22.0003 17.5242 17.5222 22.0022 11.9982 22.0022C6.47419 22.0022 1.99609 17.5242 1.99609 12.0001ZM11.9982 3.49805C7.30261 3.49805 3.49609 7.30457 3.49609 12.0001C3.49609 16.6957 7.30261 20.5022 11.9982 20.5022C16.6938 20.5022 20.5003 16.6957 20.5003 12.0001C20.5003 7.30457 16.6938 3.49805 11.9982 3.49805Z" fill="currentColor"/></svg>

Details

NameTarget
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_target_24_regular.svg
Filled fileic_fluent_target_24_filled.svg
React (Regular)Target16Regular, Target20Regular, Target24Regular, Target32Regular
React (Filled)Target16Filled, Target20Filled, Target24Filled, Target32Filled
LicenseMIT (© Microsoft Corporation)

Keywords

physical

Related icons

Target AddTarget ArrowTarget DismissTarget EditDocument TargetLocation Target SquareNavigation Location TargetRectangle Portrait Location TargetTarget SparkleWindow Location TargetDeskHard Drive