Zoom Fit icon
Used to scale content to fit while zooming content. The Zoom 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 Zoom 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 { ZoomFit24Regular, ZoomFit24Filled } from "@fluentui/react-icons";
export function Example() {
return <ZoomFit24Regular aria-label="Zoom Fit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_zoom_fit_24_regular.svg" width="24" height="24" alt="Zoom 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="M11.4891 2.70698C11.7786 2.43432 12.2305 2.435 12.5192 2.70851L14.7264 4.79989C15.027 5.08479 15.5017 5.07201 15.7866 4.77133C16.0715 4.47066 16.0588 3.99596 15.7581 3.71106L13.5509 1.61967C12.6849 0.799127 11.329 0.79711 10.4606 1.61507L8.23699 3.70952C7.93547 3.99353 7.92127 4.46819 8.20527 4.76971C8.48928 5.07123 8.96394 5.08543 9.26546 4.80143L11.4891 2.70698ZM4.80341 9.26348C5.08741 8.96196 5.07321 8.48729 4.77169 8.20329C4.47017 7.91929 3.99551 7.93349 3.71151 8.23501L1.61706 10.4586C0.799093 11.3271 0.801111 12.6829 1.62166 13.5489L3.71304 15.7561C3.99794 16.0568 4.47264 16.0696 4.77332 15.7847C5.07399 15.4998 5.08678 15.0251 4.80188 14.7244L2.71049 12.5172C2.43698 12.2285 2.43631 11.7766 2.70896 11.4871L4.80341 9.26348ZM20.288 8.24292C20.003 7.94236 19.5283 7.92976 19.2277 8.21478C18.9272 8.4998 18.9146 8.97451 19.1996 9.27507L21.2984 11.4884C21.5728 11.7777 21.5728 12.2312 21.2984 12.5205L19.1996 14.7339C18.9146 15.0345 18.9272 15.5092 19.2277 15.7942C19.5283 16.0792 20.003 16.0666 20.288 15.7661L22.3869 13.5526C23.21 12.6846 23.21 11.3242 22.3869 10.4562L20.288 8.24292ZM15.7661 20.288C16.0666 20.003 16.0793 19.5283 15.7943 19.2277C15.5093 18.9271 15.0345 18.9145 14.734 19.1995L12.5219 21.2971C12.2326 21.5713 11.7794 21.5715 11.4901 21.2974L9.27477 19.1992C8.97403 18.9144 8.49933 18.9273 8.2145 19.228C7.92966 19.5288 7.94255 20.0035 8.24329 20.2883L10.4586 22.3864C11.3267 23.2087 12.6863 23.2083 13.554 22.3856L15.7661 20.288ZM9.74999 6.99996C8.23121 6.99996 6.99999 8.23118 6.99999 9.74996V14.25C6.99999 15.7687 8.23121 17 9.74999 17H14.25C15.7688 17 17 15.7687 17 14.25V9.74996C17 8.23118 15.7688 6.99996 14.25 6.99996H9.74999ZM8.49999 9.74996C8.49999 9.05961 9.05964 8.49996 9.74999 8.49996H14.25C14.9403 8.49996 15.5 9.05961 15.5 9.74996V14.25C15.5 14.9403 14.9403 15.5 14.25 15.5H9.74999C9.05964 15.5 8.49999 14.9403 8.49999 14.25V9.74996Z" 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/zoom_fit_24_regular.svg";Details
| Name | Zoom Fit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_zoom_fit_24_regular.svg |
| Filled file | ic_fluent_zoom_fit_24_filled.svg |
| React components | ZoomFit24Regular, ZoomFit24Filled |
| License | MIT (© Microsoft Corporation) |