Resize Image icon

Use the Resize Image 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 { ResizeImage24Regular, ResizeImage24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ResizeImage24Regular aria-label="Resize Image" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_resize_image_24_regular.svg" width="24" height="24" alt="Resize Image">

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 2.75C11 2.33579 10.6642 2 10.25 2H5.25C3.45507 2 2 3.45507 2 5.25V10.25C2 10.6642 2.33579 11 2.75 11C3.16421 11 3.5 10.6642 3.5 10.25V5.25C3.5 4.2835 4.2835 3.5 5.25 3.5H10.25C10.6642 3.5 11 3.16421 11 2.75ZM13.75 2C13.3358 2 13 2.33579 13 2.75C13 3.16421 13.3358 3.5 13.75 3.5H18.75C19.7165 3.5 20.5 4.2835 20.5 5.25V10.25C20.5 10.6642 20.8358 11 21.25 11C21.6642 11 22 10.6642 22 10.25V5.25C22 3.45507 20.5449 2 18.75 2H13.75ZM13.75 22C13.3358 22 13 21.6642 13 21.25C13 20.8358 13.3358 20.5 13.75 20.5H18.75C19.7165 20.5 20.5 19.7165 20.5 18.75V13.75C20.5 13.3358 20.8358 13 21.25 13C21.6642 13 22 13.3358 22 13.75V18.75C22 20.5449 20.5449 22 18.75 22H13.75ZM4 12C2.34315 12 1 13.3431 1 15V20C1 20.5564 1.15145 21.0773 1.41536 21.524L4.90901 18.0303C5.78769 17.1516 7.21231 17.1517 8.09099 18.0303L11.5846 21.524C11.8486 21.0773 12 20.5564 12 20V15C12 13.3431 10.6569 12 9 12H4ZM4 23C3.44364 23 2.92266 22.8486 2.47602 22.5846L5.96967 19.091C6.26256 18.7981 6.73744 18.7981 7.03033 19.091L10.524 22.5846C10.0773 22.8486 9.55636 23 9 23H4ZM9 16C8.44772 16 8 15.5523 8 15C8 14.4477 8.44772 14 9 14C9.55229 14 10 14.4477 10 15C10 15.5523 9.55229 16 9 16Z" 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/resize_image_24_regular.svg";

Details

Keywords

scalefiteditcontentmanipulate