Document Pill icon
Used to represent prescription and other medical file types and actions. The Document Pill 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 Pill 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 { DocumentPill24Regular, DocumentPill24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPill24Regular aria-label="Document Pill" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_pill_24_regular.svg" width="24" height="24" alt="Document Pill"> 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="M5.5 4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H12V8C12 9.10457 12.8954 10 14 10H18.5V11.4302C18.9786 11.2293 19.4893 11.1289 20 11.1289V9.66421C20 9.20009 19.8156 8.75497 19.4874 8.42678L13.5732 2.51256C13.245 2.18437 12.7999 2 12.3358 2H6.25C5.00736 2 4 3.00736 4 4.25V19.75C4 20.9926 5.00736 22 6.25 22H11.6841C11.403 21.5347 11.2286 21.0229 11.1609 20.5H6.25C5.83579 20.5 5.5 20.1642 5.5 19.75V4.25ZM17.4393 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V4.56066L17.4393 8.5ZM22.0303 12.9699C20.909 11.8486 19.091 11.8486 17.9697 12.9699L12.9697 17.9699C11.8483 19.0912 11.8483 20.9092 12.9697 22.0306C14.091 23.1519 15.909 23.1519 17.0303 22.0306L22.0303 17.0306C23.1516 15.9092 23.1516 14.0912 22.0303 12.9699ZM19.0303 14.0306C19.5658 13.495 20.4341 13.495 20.9697 14.0306C21.5052 14.5661 21.5052 15.4344 20.9697 15.9699L19 17.9396L17.0606 16.0002L19.0303 14.0306ZM17.0303 18.9697C17.3232 19.2626 17.3232 19.7374 17.0303 20.0303L16.0303 21.0303C15.7374 21.3232 15.2626 21.3232 14.9697 21.0303C14.6768 20.7374 14.6768 20.2626 14.9697 19.9697L15.9697 18.9697C16.2626 18.6768 16.7374 18.6768 17.0303 18.9697Z" 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_pill_24_regular.svg";Details
| Name | Document Pill |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_pill_24_regular.svg |
| Filled file | ic_fluent_document_pill_24_filled.svg |
| React components | DocumentPill24Regular, DocumentPill24Filled |
| License | MIT (© Microsoft Corporation) |