Document Dismiss icon
Used to represent not downloaded, not synced or removing file types and actions. The Document 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 Document 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 { DocumentDismiss24Regular, DocumentDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentDismiss24Regular aria-label="Document Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_dismiss_24_regular.svg" width="24" height="24" alt="Document 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="M6.5 12C9.53757 12 12 14.4624 12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12ZM12.1289 2C12.7254 2.00001 13.2978 2.23654 13.7197 2.6582L16.5312 5.46875L19.3389 8.28125C19.76 8.70309 19.9971 9.27501 19.9971 9.87109V19.75C19.9971 20.9925 18.9896 21.9998 17.7471 22L11.1895 22.001C11.6159 21.5568 11.9803 21.0519 12.2676 20.501L17.7471 20.5C18.1611 20.4998 18.4971 20.1641 18.4971 19.75L18.4961 10.0029L14.25 10.0039C13.0592 10.0039 12.0842 9.07888 12.0049 7.9082L12 7.75391L11.999 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25L5.49902 11.0762C4.97579 11.157 4.4732 11.3012 3.99902 11.499L4 4.25C4 3.00736 5.00736 2 6.25 2H12.1289ZM8.85352 15.1465C8.65825 14.9512 8.34175 14.9512 8.14648 15.1465L6.5 16.793L4.85352 15.1465C4.65825 14.9512 4.34175 14.9512 4.14648 15.1465C3.95122 15.3417 3.95122 15.6583 4.14648 15.8535L5.79297 17.5L4.14648 19.1465C3.95122 19.3417 3.95122 19.6583 4.14648 19.8535C4.34175 20.0488 4.65825 20.0488 4.85352 19.8535L6.5 18.207L8.14648 19.8535C8.34175 20.0488 8.65825 20.0488 8.85352 19.8535C9.04878 19.6583 9.04878 19.3417 8.85352 19.1465L7.20703 17.5L8.85352 15.8535C9.04878 15.6583 9.04878 15.3417 8.85352 15.1465ZM13.5 7.75391C13.5 8.13359 13.7824 8.44741 14.1484 8.49707L14.25 8.50391L17.4414 8.50293L13.499 4.55859L13.5 7.75391Z" 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_dismiss_24_regular.svg";Details
| Name | Document Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_dismiss_24_regular.svg |
| Filled file | ic_fluent_document_dismiss_24_filled.svg |
| React components | DocumentDismiss24Regular, DocumentDismiss24Filled |
| License | MIT (© Microsoft Corporation) |