Scale Fill icon
Used to scale content to fit UI space. Similar to Arrow Fit, Auto Fit, Scale Fit, Full Screen, Arrow Minimize, Arrow Maximize, Page Fit. The Scale Fill 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 Scale Fill 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 { ScaleFill24Regular, ScaleFill24Filled } from "@fluentui/react-icons";
export function Example() {
return <ScaleFill24Regular aria-label="Scale Fill" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_scale_fill_24_regular.svg" width="24" height="24" alt="Scale Fill"> 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 6.75C6 6.33579 6.33579 6 6.75 6H9.25C9.66421 6 10 6.33579 10 6.75C10 7.16421 9.66421 7.5 9.25 7.5H8.56066L10.2803 9.21967C10.5732 9.51256 10.5732 9.98744 10.2803 10.2803C9.98744 10.5732 9.51256 10.5732 9.21967 10.2803L7.5 8.56066V9.25115C7.5 9.66536 7.16421 10.0012 6.75 10.0012C6.33579 10.0012 6 9.66536 6 9.25115V6.75ZM17.2505 18.0011C17.4494 18.0011 17.6402 17.9221 17.7808 17.7814C17.9215 17.6408 18.0005 17.45 18.0005 17.2511V14.7499C18.0005 14.3357 17.6647 13.9999 17.2505 13.9999C16.8363 13.9999 16.5005 14.3357 16.5005 14.7499V15.4402L14.7803 13.7197C14.4874 13.4268 14.0125 13.4268 13.7196 13.7196C13.4267 14.0125 13.4266 14.4874 13.7195 14.7803L15.44 16.5011H14.7505C14.3363 16.5011 14.0005 16.8369 14.0005 17.2511C14.0005 17.6653 14.3363 18.0011 14.7505 18.0011H17.2505ZM17.7808 6.22028C17.9215 6.36093 18.0005 6.5517 18.0005 6.75061V9.25061C18.0005 9.66482 17.6647 10.0006 17.2505 10.0006C16.8363 10.0006 16.5005 9.66482 16.5005 9.25061V8.56075L14.7801 10.2804C14.4871 10.5733 14.0123 10.5732 13.7194 10.2802C13.4266 9.98727 13.4267 9.5124 13.7197 9.21956L15.4393 7.50061H14.7493C14.3351 7.50061 13.9993 7.16482 13.9993 6.75061C13.9993 6.3364 14.3351 6.00061 14.7493 6.00061L17.2505 6.00061C17.4494 6.00061 17.6402 6.07963 17.7808 6.22028ZM6 17.2505C6 17.4494 6.07902 17.6402 6.21967 17.7808C6.36032 17.9215 6.55109 18.0005 6.75 18.0005H9.25115C9.66536 18.0005 10.0012 17.6647 10.0012 17.2505C10.0012 16.8363 9.66536 16.5005 9.25115 16.5005H8.56045L10.2804 14.7803C10.5732 14.4874 10.5732 14.0125 10.2803 13.7196C9.98737 13.4268 9.5125 13.4268 9.21963 13.7197L7.5 15.4396V14.7505C7.5 14.3363 7.16421 14.0005 6.75 14.0005C6.33579 14.0005 6 14.3363 6 14.7505L6 17.2505ZM3 5.25C3 4.00736 4.00736 3 5.25 3H18.75C19.9926 3 21 4.00736 21 5.25V18.75C21 19.9926 19.9926 21 18.75 21H5.25C4.00736 21 3 19.9926 3 18.75V5.25ZM5.25 4.5C4.83579 4.5 4.5 4.83579 4.5 5.25V18.75C4.5 19.1642 4.83579 19.5 5.25 19.5H18.75C19.1642 19.5 19.5 19.1642 19.5 18.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5H5.25Z" 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/scale_fill_24_regular.svg";Details
| Name | Scale Fill |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_scale_fill_24_regular.svg |
| Filled file | ic_fluent_scale_fill_24_filled.svg |
| React components | ScaleFill24Regular, ScaleFill24Filled |
| License | MIT (© Microsoft Corporation) |