Document Percent icon
Used to represent general file types and actions. The Document Percent 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 Percent 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 { DocumentPercent24Regular, DocumentPercent24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPercent24Regular aria-label="Document Percent" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_percent_24_regular.svg" width="24" height="24" alt="Document Percent"> 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.1719 2C12.7023 2 13.2118 2.21086 13.5869 2.58594L19.4141 8.41309C19.7891 8.78816 20 9.29769 20 9.82812V20C20 21.1046 19.1046 22 18 22H11.1885C11.6151 21.5556 11.9792 21.0512 12.2666 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V11.0762C4.97679 11.157 4.47417 11.3003 4 11.498V4C4 2.89543 4.89543 2 6 2H12.1719ZM9 17.5C8.17157 17.5 7.5 18.1716 7.5 19C7.5 19.8284 8.17157 20.5 9 20.5C9.82843 20.5 10.5 19.8284 10.5 19C10.5 18.1716 9.82843 17.5 9 17.5ZM9.33008 14.6719C9.13482 14.4766 8.81831 14.4766 8.62305 14.6719L3.67285 19.6221C3.47804 19.8174 3.47774 20.134 3.67285 20.3291C3.86796 20.5242 4.18458 20.5239 4.37988 20.3291L9.33008 15.3789C9.52534 15.1836 9.52534 14.8671 9.33008 14.6719ZM9 18.5C9.27614 18.5 9.5 18.7239 9.5 19C9.5 19.2761 9.27614 19.5 9 19.5C8.72386 19.5 8.5 19.2761 8.5 19C8.5 18.7239 8.72386 18.5 9 18.5ZM4 14.5C3.17157 14.5 2.5 15.1716 2.5 16C2.5 16.8284 3.17157 17.5 4 17.5C4.82843 17.5 5.5 16.8284 5.5 16C5.5 15.1716 4.82843 14.5 4 14.5ZM4 15.5C4.27614 15.5 4.5 15.7239 4.5 16C4.5 16.2761 4.27614 16.5 4 16.5C3.72386 16.5 3.5 16.2761 3.5 16C3.5 15.7239 3.72386 15.5 4 15.5ZM13.5 8C13.5 8.27614 13.7239 8.5 14 8.5H17.3789L13.5 4.62109V8Z" 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_percent_24_regular.svg";Details
| Name | Document Percent |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_percent_24_regular.svg |
| Filled file | ic_fluent_document_percent_24_filled.svg |
| React components | DocumentPercent24Regular, DocumentPercent24Filled |
| License | MIT (© Microsoft Corporation) |