Target icon
Used in targeting & hitting goal scenarios. The Target 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 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" />;
}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>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_24_regular.svg";Details
| Name | Target |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_target_24_regular.svg |
| Filled file | ic_fluent_target_24_filled.svg |
| React components | Target24Regular, Target24Filled |
| License | MIT (© Microsoft Corporation) |