Document Fit icon
Used to scale content to fit a portrait page. Similar to Arrow Fit, Auto Fit, Scale Fit, Full Screen. The Document Fit 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 Fit 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 { DocumentFit24Regular, DocumentFit24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentFit24Regular aria-label="Document Fit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_fit_24_regular.svg" width="24" height="24" alt="Document Fit"> 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.25 2C5.00736 2 4 3.00736 4 4.25V19.75C4 20.9926 5.00736 22 6.25 22H17.75C18.9926 22 20 20.9926 20 19.75V4.25C20 3.00736 18.9926 2 17.75 2H6.25ZM5.5 4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H17.75C18.1642 3.5 18.5 3.83579 18.5 4.25V19.75C18.5 20.1642 18.1642 20.5 17.75 20.5H6.25C5.83579 20.5 5.5 20.1642 5.5 19.75V4.25ZM9 6.5C8.72386 6.5 8.5 6.72386 8.5 7V8.25C8.5 8.66421 8.16421 9 7.75 9C7.33579 9 7 8.66421 7 8.25V7C7 5.89543 7.89543 5 9 5H10.25C10.6642 5 11 5.33579 11 5.75C11 6.16421 10.6642 6.5 10.25 6.5H9ZM9 17.5C8.72386 17.5 8.5 17.2761 8.5 17V15.75C8.5 15.3358 8.16421 15 7.75 15C7.33579 15 7 15.3358 7 15.75V17C7 18.1046 7.89543 19 9 19H10.25C10.6642 19 11 18.6642 11 18.25C11 17.8358 10.6642 17.5 10.25 17.5H9ZM15.5 7C15.5 6.72386 15.2761 6.5 15 6.5H13.75C13.3358 6.5 13 6.16421 13 5.75C13 5.33579 13.3358 5 13.75 5H15C16.1046 5 17 5.89543 17 7V8.25C17 8.66421 16.6642 9 16.25 9C15.8358 9 15.5 8.66421 15.5 8.25V7ZM15 17.5C15.2761 17.5 15.5 17.2761 15.5 17V15.75C15.5 15.3358 15.8358 15 16.25 15C16.6642 15 17 15.3358 17 15.75V17C17 18.1046 16.1046 19 15 19H13.75C13.3358 19 13 18.6642 13 18.25C13 17.8358 13.3358 17.5 13.75 17.5H15Z" 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_fit_24_regular.svg";Details
| Name | Document Fit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_fit_24_regular.svg |
| Filled file | ic_fluent_document_fit_24_filled.svg |
| React components | DocumentFit24Regular, DocumentFit24Filled |
| License | MIT (© Microsoft Corporation) |