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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>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/target_add_24_regular.svg";Details
| Name | Target Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_target_add_24_regular.svg |
| Filled file | ic_fluent_target_add_24_filled.svg |
| React components | TargetAdd24Regular, TargetAdd24Filled |
| License | MIT (© Microsoft Corporation) |