Keyboard Shift icon

Use the Keyboard Shift 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 { KeyboardShift24Regular, KeyboardShift24Filled } from "@fluentui/react-icons";

export function Example() {
  return <KeyboardShift24Regular aria-label="Keyboard Shift" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_keyboard_shift_24_regular.svg" width="24" height="24" alt="Keyboard Shift">

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="M10.6774 2.60317C11.3752 1.79894 12.6234 1.79894 13.3211 2.60317L21.5666 12.107C22.5496 13.24 21.7448 15.0038 20.2447 15.0038H16.9999V20.2508C16.9999 21.2173 16.2164 22.0008 15.2499 22.0008H8.74989C7.78339 22.0008 6.99989 21.2173 6.99989 20.2508V15.0038H3.75388C2.25383 15.0038 1.449 13.24 2.43203 12.107L10.6774 2.60317ZM12.1881 3.58617C12.0885 3.47128 11.9101 3.47128 11.8105 3.58617L3.56505 13.09C3.42462 13.2518 3.53959 13.5038 3.75388 13.5038H7.74989C8.1641 13.5038 8.49989 13.8396 8.49989 14.2538V20.2508C8.49989 20.3889 8.61182 20.5008 8.74989 20.5008H15.2499C15.388 20.5008 15.4999 20.3889 15.4999 20.2508V14.2538C15.4999 13.8396 15.8357 13.5038 16.2499 13.5038H20.2447C20.459 13.5038 20.574 13.2518 20.4335 13.09L12.1881 3.58617Z" 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_shift_24_regular.svg";

Details

Keywords

keyboardtypekeydeviceanalogarrow