Document Mention icon
Used to represent files that include callouts. The Document Mention 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 Mention 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 { DocumentMention24Regular, DocumentMention24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentMention24Regular aria-label="Document Mention" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_mention_24_regular.svg" width="24" height="24" alt="Document Mention"> 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="M18.5 20C18.5 20.275 18.276 20.5 18 20.5H12.0292C11.4884 21.0632 10.7817 21.4504 9.95461 21.5406C9.99798 21.6932 10.0209 21.8474 10.0248 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V11.2831C4.47543 11.0917 4.97786 10.9532 5.5 10.875V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM4 14.1497V14.1511C4.44085 13.8214 4.94895 13.5767 5.5 13.4413C5.82041 13.3627 6.15533 13.32 6.5 13.32C8.80855 13.32 10.68 15.1915 10.68 17.5C10.68 18.4028 10.1338 19.04 9.58 19.04C9.16739 19.04 8.92 18.594 8.92 17.5V15.3L8.91398 15.2104C8.87027 14.8883 8.59413 14.64 8.26 14.64C8.01385 14.64 7.79918 14.7747 7.68626 14.9742C7.34849 14.7619 6.94959 14.64 6.5 14.64C5.01256 14.64 4.08 15.9747 4.08 17.5C4.08 18.3667 4.38108 19.1718 4.91395 19.7055C5.09122 19.8833 5.29416 20.0309 5.52023 20.1408C5.81055 20.2818 6.13885 20.36 6.5 20.36C7.16971 20.36 7.72694 20.0894 8.13506 19.6526C8.46091 20.1049 8.93925 20.36 9.58 20.36C10.9119 20.36 12 19.0905 12 17.5C12 14.4624 9.53757 12 6.5 12C3.46243 12 1 14.4624 1 17.5C1 20.5376 3.46243 23 6.5 23C7.07088 23 7.6308 22.9128 8.16499 22.7433L8.39094 22.6661L8.47297 22.6297C8.70586 22.5067 8.8408 22.2572 8.82257 22C8.81825 21.94 8.8063 21.8796 8.78458 21.8202C8.75049 21.7271 8.69763 21.6463 8.63183 21.5805C8.45577 21.404 8.18667 21.3352 7.93712 21.4266L7.76577 21.4851L7.5202 21.5548C7.18981 21.6376 6.84802 21.68 6.5 21.68C4.19145 21.68 2.32 19.8085 2.32 17.5C2.32 16.1289 2.98017 14.9119 4 14.1497ZM5.5 18.1681V18.1665C5.43587 17.967 5.40078 17.7419 5.40078 17.5008C5.40078 17.2596 5.43587 17.0346 5.5 16.8351V16.8319C5.66932 16.3076 6.0394 15.96 6.5 15.96C7.1364 15.96 7.6 16.6235 7.6 17.5C7.6 18.3765 7.1364 19.04 6.5 19.04C6.0394 19.04 5.66932 18.6924 5.5 18.1681Z" 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_mention_24_regular.svg";Details
| Name | Document Mention |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_mention_24_regular.svg |
| Filled file | ic_fluent_document_mention_24_filled.svg |
| React components | DocumentMention24Regular, DocumentMention24Filled |
| License | MIT (© Microsoft Corporation) |