Document Target icon
Used to represent general file types and actions. The Document 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 Document 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 { DocumentTarget24Regular, DocumentTarget24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentTarget24Regular aria-label="Document Target" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_target_24_regular.svg" width="24" height="24" alt="Document 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="M6 2C4.89543 2 4 2.89543 4 4V13.1689C4.23827 13.0311 4.48897 12.9123 4.75 12.8148V12.75C4.75 12.1553 5.04663 11.6299 5.5 11.3137V4C5.5 3.72386 5.72386 3.5 6 3.5H12V8C12 9.10457 12.8954 10 14 10H18.5V20C18.5 20.2761 18.2761 20.5 18 20.5H10.5004C10.0244 21.1336 9.40143 21.6505 8.68206 22H18C19.1046 22 20 21.1046 20 20V9.82777C20 9.29733 19.7893 8.78863 19.4142 8.41355L13.5864 2.58579C13.2114 2.21071 12.7027 2 12.1722 2H6ZM17.3793 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V4.62066L17.3793 8.5ZM7.25 12.75C7.25 12.3358 6.91421 12 6.5 12C6.08579 12 5.75 12.3358 5.75 12.75V13.316C4.00395 13.6269 2.62685 15.0039 2.31597 16.75H1.75C1.33579 16.75 1 17.0858 1 17.5C1 17.9142 1.33579 18.25 1.75 18.25H2.31597C2.62685 19.9961 4.00395 21.3731 5.75 21.684V22.25C5.75 22.6642 6.08579 23 6.5 23C6.91421 23 7.25 22.6642 7.25 22.25V21.684C8.99605 21.3731 10.3731 19.9961 10.684 18.25H11.25C11.6642 18.25 12 17.9142 12 17.5C12 17.0858 11.6642 16.75 11.25 16.75H10.684C10.3731 15.0039 8.99605 13.6269 7.25 13.316V12.75ZM3.75 17.5C3.75 15.9812 4.98122 14.75 6.5 14.75C8.01878 14.75 9.25 15.9812 9.25 17.5C9.25 19.0188 8.01878 20.25 6.5 20.25C4.98122 20.25 3.75 19.0188 3.75 17.5ZM7.75 17.5C7.75 18.1904 7.19036 18.75 6.5 18.75C5.80964 18.75 5.25 18.1904 5.25 17.5C5.25 16.8096 5.80964 16.25 6.5 16.25C7.19036 16.25 7.75 16.8096 7.75 17.5Z" 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/document_target_24_regular.svg";Details
| Name | Document Target |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_target_24_regular.svg |
| Filled file | ic_fluent_document_target_24_filled.svg |
| React components | DocumentTarget24Regular, DocumentTarget24Filled |
| License | MIT (© Microsoft Corporation) |