Keyboard Layout Resize icon

Use the Keyboard Layout Resize 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 { KeyboardLayoutResize24Regular, KeyboardLayoutResize24Filled } from "@fluentui/react-icons";

export function Example() {
  return <KeyboardLayoutResize24Regular aria-label="Keyboard Layout Resize" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_keyboard_layout_resize_24_regular.svg" width="24" height="24" alt="Keyboard Layout Resize">

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="M13.25 10.5C14.4409 10.5 15.4156 11.4252 15.4948 12.596L15.5 12.75V19.75C15.5 20.9409 14.5748 21.9156 13.404 21.9948L13.25 22H4.25C3.05914 22 2.08436 21.0748 2.00519 19.904L2 19.75V12.75C2 11.5591 2.92516 10.5844 4.09595 10.5052L4.25 10.5H13.25ZM21.25 10.5C21.6297 10.5 21.9435 10.7822 21.9932 11.1482L22 11.25V19.75C22 20.9409 21.0748 21.9156 19.904 21.9948L19.75 22H17.75C17.3358 22 17 21.6642 17 21.25C17 20.8703 17.2822 20.5565 17.6482 20.5068L17.75 20.5H19.75C20.1297 20.5 20.4435 20.2178 20.4932 19.8518L20.5 19.75V11.25C20.5 10.8358 20.8358 10.5 21.25 10.5ZM13.25 12H4.25C3.8703 12 3.55651 12.2822 3.50685 12.6482L3.5 12.75V19.75C3.5 20.1297 3.78215 20.4435 4.14823 20.4932L4.25 20.5H13.25C13.6297 20.5 13.9435 20.2178 13.9932 19.8518L14 19.75V12.75C14 12.3358 13.6642 12 13.25 12ZM10.75 17.5C11.1642 17.5 11.5 17.8358 11.5 18.25C11.5 18.6297 11.16 19 10.75 19H6.75C6.33579 19 6 18.6642 6 18.25C6 17.8703 6.34 17.5 6.75 17.5H10.75ZM6 13.5C6.55228 13.5 7 13.9477 7 14.5C7 15.0523 6.55228 15.5 6 15.5C5.44772 15.5 5 15.0523 5 14.5C5 13.9477 5.44772 13.5 6 13.5ZM11.5 13.5C12.0523 13.5 12.5 13.9477 12.5 14.5C12.5 15.0523 12.0523 15.5 11.5 15.5C10.9477 15.5 10.5 15.0523 10.5 14.5C10.5 13.9477 10.9477 13.5 11.5 13.5ZM8.75 13.5C9.30228 13.5 9.75 13.9477 9.75 14.5C9.75 15.0523 9.30228 15.5 8.75 15.5C8.19772 15.5 7.75 15.0523 7.75 14.5C7.75 13.9477 8.19772 13.5 8.75 13.5ZM21.25 2C21.2968 2 21.3427 2.00429 21.3872 2.01251C21.398 2.01458 21.4097 2.01701 21.4214 2.01973C21.4448 2.02517 21.4673 2.03158 21.4893 2.03898C21.4991 2.0423 21.5095 2.04603 21.5198 2.04999C21.5391 2.05745 21.5575 2.06544 21.5755 2.07414L21.619 2.09686C21.6365 2.10681 21.6537 2.11746 21.6703 2.12876C21.6807 2.13569 21.6911 2.14318 21.7014 2.15097L21.7803 2.21967L21.7816 2.22092L21.8324 2.27734L21.842 2.291L21.8774 2.33883C21.8906 2.35899 21.903 2.37997 21.9143 2.40158C21.9192 2.4107 21.9235 2.41943 21.9277 2.42823C21.9392 2.45248 21.9498 2.47824 21.959 2.50466C21.9622 2.51421 21.965 2.52301 21.9677 2.53184C21.9791 2.56893 21.9877 2.60808 21.9932 2.64823L22 2.75V7.75C22 8.16421 21.6642 8.5 21.25 8.5C20.8703 8.5 20.5565 8.21785 20.5068 7.85177L20.5 7.75V4.56L16.0303 9.03033C15.7374 9.32322 15.2626 9.32322 14.9697 9.03033C14.7034 8.76406 14.6792 8.3474 14.8971 8.05379L14.9697 7.96967L19.438 3.5H16.25C15.8703 3.5 15.5565 3.21785 15.5068 2.85177L15.5 2.75C15.5 2.3703 15.7822 2.05651 16.1482 2.00685L16.25 2H21.25ZM12.75 2C13.1642 2 13.5 2.33579 13.5 2.75C13.5 3.1297 13.2178 3.44349 12.8518 3.49315L12.75 3.5H4.25C3.8703 3.5 3.55651 3.78215 3.50685 4.14823L3.5 4.25V8.25C3.5 8.66421 3.16421 9 2.75 9C2.3703 9 2.05651 8.71785 2.00685 8.35177L2 8.25V4.25C2 3.05914 2.92516 2.08436 4.09595 2.00519L4.25 2H12.75Z" 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/keyboard_layout_resize_24_regular.svg";

Details

Keywords

keyboardtypekeydevicedigitalresizescale