document mention icon
document-mention-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.
- Name
- document-mention-20-filled
- Set
- Fluent UI System Icons
- Style
- 20 Filled
- Viewbox
- 20×20
- License
- MIT
9 other variants in Fluent UI System Icons
Related icons in Fluent UI System Icons
document-100-16-filleddocument-add-16-filleddocument-arrow-down-16-filleddocument-arrow-down-off-20-filleddocument-arrow-left-16-filleddocument-arrow-right-16-filleddocument-arrow-up-16-filleddocument-autosave-24-regulardocument-border-20-filleddocument-border-print-20-filleddocument-briefcase-16-filleddocument-broken-20-filleddocument-bullet-list-16-filleddocument-bullet-list-arrow-left-16-filleddocument-bullet-list-clock-20-filleddocument-bullet-list-cube-16-filleddocument-bullet-list-multiple-20-filleddocument-bullet-list-off-20-filleddocument-catch-up-16-filleddocument-checkmark-16-filleddocument-chevron-double-20-filleddocument-code-16-filleddocument-contract-16-filleddocument-copy-16-filled
Use the document mention icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-4.303A6 6 0 0 0 4 9.083V3.5A1.5 1.5 0 0 1 5.5 2zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25zM5 11a4 4 0 1 0 1.333 7.773a.5.5 0 0 1 .334.942A5 5 0 1 1 10 15c0 1.455-.901 2.437-1.973 2.494a1.75 1.75 0 0 1-1.438-.627a2 2 0 0 1-.156-.207c-.402.508-.993.84-1.683.84c-1.303 0-2.25-1.184-2.25-2.5s.947-2.5 2.25-2.5c.476 0 .904.158 1.256.422A.5.5 0 0 1 7 13v2c0 .62.164 1.001.348 1.215a.75.75 0 0 0 .625.28C8.401 16.474 9 16.046 9 15a4 4 0 0 0-4-4m-.25 5.5C5.38 16.5 6 15.893 6 15s-.62-1.5-1.25-1.5s-1.25.607-1.25 1.5s.62 1.5 1.25 1.5"/></svg>
React
import type { SVGProps } from "react";
export function FluentDocumentMention20Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-4.303A6 6 0 0 0 4 9.083V3.5A1.5 1.5 0 0 1 5.5 2zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25zM5 11a4 4 0 1 0 1.333 7.773a.5.5 0 0 1 .334.942A5 5 0 1 1 10 15c0 1.455-.901 2.437-1.973 2.494a1.75 1.75 0 0 1-1.438-.627a2 2 0 0 1-.156-.207c-.402.508-.993.84-1.683.84c-1.303 0-2.25-1.184-2.25-2.5s.947-2.5 2.25-2.5c.476 0 .904.158 1.256.422A.5.5 0 0 1 7 13v2c0 .62.164 1.001.348 1.215a.75.75 0 0 0 .625.28C8.401 16.474 9 16.046 9 15a4 4 0 0 0-4-4m-.25 5.5C5.38 16.5 6 15.893 6 15s-.62-1.5-1.25-1.5s-1.25.607-1.25 1.5s.62 1.5 1.25 1.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-4.303A6 6 0 0 0 4 9.083V3.5A1.5 1.5 0 0 1 5.5 2zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25zM5 11a4 4 0 1 0 1.333 7.773a.5.5 0 0 1 .334.942A5 5 0 1 1 10 15c0 1.455-.901 2.437-1.973 2.494a1.75 1.75 0 0 1-1.438-.627a2 2 0 0 1-.156-.207c-.402.508-.993.84-1.683.84c-1.303 0-2.25-1.184-2.25-2.5s.947-2.5 2.25-2.5c.476 0 .904.158 1.256.422A.5.5 0 0 1 7 13v2c0 .62.164 1.001.348 1.215a.75.75 0 0 0 .625.28C8.401 16.474 9 16.046 9 15a4 4 0 0 0-4-4m-.25 5.5C5.38 16.5 6 15.893 6 15s-.62-1.5-1.25-1.5s-1.25.607-1.25 1.5s.62 1.5 1.25 1.5"/></svg> </template>
CSS
.icon-document-mention-20-filled {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%202v4.5A1.5%201.5%200%200%200%2011.5%208H16v8.5a1.5%201.5%200%200%201-1.5%201.5h-4.303A6%206%200%200%200%204%209.083V3.5A1.5%201.5%200%200%201%205.5%202zm1%20.25V6.5a.5.5%200%200%200%20.5.5h4.25zM5%2011a4%204%200%201%200%201.333%207.773a.5.5%200%200%201%20.334.942A5%205%200%201%201%2010%2015c0%201.455-.901%202.437-1.973%202.494a1.75%201.75%200%200%201-1.438-.627a2%202%200%200%201-.156-.207c-.402.508-.993.84-1.683.84c-1.303%200-2.25-1.184-2.25-2.5s.947-2.5%202.25-2.5c.476%200%20.904.158%201.256.422A.5.5%200%200%201%207%2013v2c0%20.62.164%201.001.348%201.215a.75.75%200%200%200%20.625.28C8.401%2016.474%209%2016.046%209%2015a4%204%200%200%200-4-4m-.25%205.5C5.38%2016.5%206%2015.893%206%2015s-.62-1.5-1.25-1.5s-1.25.607-1.25%201.5s.62%201.5%201.25%201.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%202v4.5A1.5%201.5%200%200%200%2011.5%208H16v8.5a1.5%201.5%200%200%201-1.5%201.5h-4.303A6%206%200%200%200%204%209.083V3.5A1.5%201.5%200%200%201%205.5%202zm1%20.25V6.5a.5.5%200%200%200%20.5.5h4.25zM5%2011a4%204%200%201%200%201.333%207.773a.5.5%200%200%201%20.334.942A5%205%200%201%201%2010%2015c0%201.455-.901%202.437-1.973%202.494a1.75%201.75%200%200%201-1.438-.627a2%202%200%200%201-.156-.207c-.402.508-.993.84-1.683.84c-1.303%200-2.25-1.184-2.25-2.5s.947-2.5%202.25-2.5c.476%200%20.904.158%201.256.422A.5.5%200%200%201%207%2013v2c0%20.62.164%201.001.348%201.215a.75.75%200%200%200%20.625.28C8.401%2016.474%209%2016.046%209%2015a4%204%200%200%200-4-4m-.25%205.5C5.38%2016.5%206%2015.893%206%2015s-.62-1.5-1.25-1.5s-1.25.607-1.25%201.5s.62%201.5%201.25%201.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/document-mention-20-filled.svg?color=%231a73e8&size=48
