Scale Fit 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 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 Scale 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 { ScaleFit24Regular, ScaleFit24Filled } from "@fluentui/react-icons";
export function Example() {
return <ScaleFit24Regular aria-label="Scale Fit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_scale_fit_24_regular.svg" width="24" height="24" alt="Scale 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="M7.99388 9.43558C8.30561 9.70834 8.33719 10.1822 8.06443 10.4939L7.40284 11.25H10.2646C10.6788 11.25 11.0146 11.5858 11.0146 12C11.0146 12.4142 10.6788 12.75 10.2646 12.75H7.40281L8.06444 13.5061C8.33719 13.8179 8.3056 14.2917 7.99388 14.5644C7.68215 14.8372 7.20832 14.8056 6.93556 14.4939L5.18556 12.4939C4.93814 12.2111 4.93815 11.7889 5.18557 11.5061L6.93557 9.50613C7.20833 9.1944 7.68216 9.16282 7.99388 9.43558ZM15.9502 10.4939C15.6775 10.1822 15.709 9.70834 16.0208 9.43558C16.3325 9.16282 16.8063 9.1944 17.0791 9.50613L18.8291 11.5061C19.0765 11.7889 19.0765 12.2111 18.8291 12.4939L17.0791 14.4939C16.8063 14.8056 16.3325 14.8372 16.0208 14.5644C15.709 14.2917 15.6775 13.8179 15.9502 13.5061L16.6118 12.75H13.7501C13.3359 12.75 13.0001 12.4142 13.0001 12C13.0001 11.5858 13.3359 11.25 13.7501 11.25H16.6118L15.9502 10.4939ZM2 6.25C2 5.00736 3.00736 4 4.25 4H19.75C20.9926 4 22 5.00736 22 6.25V17.75C22 18.9926 20.9926 20 19.75 20H4.25C3.00736 20 2 18.9926 2 17.75V6.25ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V17.75C3.5 18.1642 3.83579 18.5 4.25 18.5H19.75C20.1642 18.5 20.5 18.1642 20.5 17.75V6.25C20.5 5.83579 20.1642 5.5 19.75 5.5H4.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_fit_24_regular.svg";Details
| Name | Scale Fit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_scale_fit_24_regular.svg |
| Filled file | ic_fluent_scale_fit_24_filled.svg |
| React components | ScaleFit24Regular, ScaleFit24Filled |
| License | MIT (© Microsoft Corporation) |