Target Edit icon
Used in targeting & hitting goal scenarios. The Target Edit 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 Edit 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 { TargetEdit24Regular, TargetEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <TargetEdit24Regular aria-label="Target Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_target_edit_24_regular.svg" width="24" height="24" alt="Target Edit"> 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.9994 13.9999C13.1036 13.9999 13.9988 13.1046 13.9988 12.0003C13.9988 10.8959 13.1036 10.0006 11.9994 10.0006C10.8951 10.0006 9.99992 10.8959 9.99992 12.0003C9.99992 13.1046 10.8951 13.9999 11.9994 13.9999ZM6.001 12.0003C6.001 8.68717 8.68656 6.00137 11.9994 6.00137C15.3122 6.00137 17.9978 8.68717 17.9978 12.0003C17.9978 12.1238 17.994 12.2465 17.9867 12.3682L15.3276 15.0275C16.0548 14.2283 16.4982 13.166 16.4982 12.0003C16.4982 9.51544 14.484 7.50109 11.9994 7.50109C9.51477 7.50109 7.50059 9.51544 7.50059 12.0003C7.50059 14.4851 9.51477 16.4994 11.9994 16.4994C13.165 16.4994 14.2272 16.0561 15.0263 15.3287L12.4913 17.864C12.451 17.9043 12.4116 17.9456 12.3732 17.9877C12.2496 17.9953 12.1249 17.9992 11.9994 17.9992C8.68656 17.9992 6.001 15.3134 6.001 12.0003ZM11.9994 3.49972C16.3594 3.49972 19.9526 6.78272 20.4423 11.0117C20.9593 10.9689 21.4844 11.0481 21.971 11.2492C21.587 6.07702 17.2693 2 11.9994 2C6.47688 2 2 6.47727 2 12.0003C2 17.1862 5.9471 21.4501 11.0007 21.9513C10.9981 21.7736 11.0185 21.5909 11.0647 21.4061L11.2981 20.4723C6.93187 20.1157 3.4996 16.4588 3.4996 12.0003C3.4996 7.30554 7.30509 3.49972 11.9994 3.49972ZM19.0991 12.6696L13.1983 18.5709C12.8543 18.915 12.6102 19.3461 12.4922 19.8182L12.0346 21.6486C11.8357 22.4445 12.5566 23.1656 13.3525 22.9666L15.1827 22.509C15.6548 22.391 16.0858 22.1469 16.4299 21.8028L22.3307 15.9014C23.2231 15.009 23.2231 13.5621 22.3307 12.6696C21.4383 11.7772 19.9915 11.7772 19.0991 12.6696Z" 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_edit_24_regular.svg";Details
| Name | Target Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_target_edit_24_regular.svg |
| Filled file | ic_fluent_target_edit_24_filled.svg |
| React components | TargetEdit24Regular, TargetEdit24Filled |
| License | MIT (© Microsoft Corporation) |