Target Add icon

Used in targeting & hitting goal scenarios. The Target Add 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

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_add_24_regular.svg

Target Add icon in React

npm install @fluentui/react-icons

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

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

Target Add icon in SVG

npm install @fluentui/svg-icons

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

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

Target Add icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Target Add icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.target_add_24_regular)

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

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

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

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

Target Add 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_add_24_regular" />

// Kotlin
R.drawable.ic_fluent_target_add_24_regular

Target Add icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .targetAdd24Regular)

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

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

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

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="M3.49609 11.9999C3.49609 16.6061 7.15912 20.3568 11.7311 20.4979C12.0124 21.0381 12.3673 21.5338 12.7826 21.9717C12.5238 21.9918 12.2622 22.002 11.9982 22.002C6.47419 22.002 1.99609 17.5239 1.99609 11.9999C1.99609 6.4759 6.47419 1.9978 11.9982 1.9978C17.5222 1.9978 22.0003 6.4759 22.0003 11.9999C22.0003 12.2628 21.9902 12.5234 21.9702 12.7812C21.5322 12.3661 21.0364 12.0113 20.4961 11.7302C20.3537 7.15942 16.6035 3.4978 11.9982 3.4978C7.30261 3.4978 3.49609 7.30432 3.49609 11.9999ZM11.0913 16.4085C9.04068 15.9889 7.49817 14.1745 7.49817 11.9999C7.49817 9.51463 9.51289 7.49991 11.9982 7.49991C14.1723 7.49991 15.9863 9.04172 16.4065 11.0916C16.762 11.0314 17.1273 11 17.5 11C17.6402 11 17.7794 11.0044 17.9174 11.0132C17.4468 8.16894 14.9758 5.99991 11.9982 5.99991C8.68446 5.99991 5.99817 8.6862 5.99817 11.9999C5.99817 14.9782 8.16816 17.4496 11.0133 17.9195C11.0045 17.7808 11 17.6409 11 17.5C11 17.128 11.0312 16.7634 11.0913 16.4085ZM12.022 13.9998L11.9982 13.9999C10.8936 13.9999 9.99817 13.1045 9.99817 11.9999C9.99817 10.8953 10.8936 9.99991 11.9982 9.99991C13.1027 9.99991 13.9982 10.8953 13.9982 11.9999L13.998 12.0231C13.2051 12.5311 12.5298 13.2067 12.022 13.9998ZM17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM18.0011 20.5035L18.0006 18H20.503C20.7792 18 21.003 17.7762 21.003 17.5C21.003 17.2239 20.7792 17 20.503 17H18.0005L18 14.4993C18 14.2231 17.7761 13.9993 17.5 13.9993C17.2239 13.9993 17 14.2231 17 14.4993L17.0005 17H14.4961C14.22 17 13.9961 17.2239 13.9961 17.5C13.9961 17.7762 14.22 18 14.4961 18H17.0006L17.0011 20.5035C17.0011 20.7797 17.225 21.0035 17.5011 21.0035C17.7773 21.0035 18.0011 20.7797 18.0011 20.5035Z" fill="currentColor"/></svg>

Details

NameTarget Add
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_target_add_24_regular.svg
Filled fileic_fluent_target_add_24_filled.svg
React (Regular)TargetAdd20Regular, TargetAdd24Regular
React (Filled)TargetAdd20Filled, TargetAdd24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

physical

Related icons