Target Dismiss icon
Used in targeting & hitting goal scenarios. The Target Dismiss 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 Dismiss 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 { TargetDismiss24Regular, TargetDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <TargetDismiss24Regular aria-label="Target Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_target_dismiss_24_regular.svg" width="24" height="24" alt="Target Dismiss"> 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.9998ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM15.0238 15.0241L15.093 14.9663L15.1693 14.9229C15.3274 14.8506 15.5155 14.865 15.6617 14.9663L15.7309 15.0241L17.5004 16.7937L19.2722 15.0242L19.3414 14.9663C19.5119 14.8482 19.7395 14.8482 19.91 14.9663L19.9793 15.0242L20.0371 15.0934C20.1552 15.2639 20.1552 15.4915 20.0371 15.662L19.9793 15.7313L18.2074 17.5007L19.9765 19.2697L20.0344 19.339C20.1525 19.5095 20.1525 19.7371 20.0344 19.9076L19.9765 19.9768L19.9073 20.0347C19.7367 20.1528 19.5092 20.1528 19.3386 20.0347L19.2694 19.9768L17.5004 18.2077L15.7335 19.9746L15.6642 20.0325C15.4937 20.1506 15.2661 20.1506 15.0956 20.0325L15.0264 19.9746L14.9685 19.9053C14.8504 19.7348 14.8504 19.5072 14.9685 19.3367L15.0264 19.2675L16.7934 17.5007L15.0238 15.7312L14.9659 15.662C14.8478 15.4915 14.8478 15.2639 14.9659 15.0934L15.0238 15.0241Z" 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_dismiss_24_regular.svg";Details
| Name | Target Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_target_dismiss_24_regular.svg |
| Filled file | ic_fluent_target_dismiss_24_filled.svg |
| React components | TargetDismiss24Regular, TargetDismiss24Filled |
| License | MIT (© Microsoft Corporation) |