Keyboard Layout One Handed Left icon
Used to represent one handed keyboard scenarios. The Keyboard Layout One Handed Left 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 Keyboard Layout One Handed Left 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 { KeyboardLayoutOneHandedLeft24Regular, KeyboardLayoutOneHandedLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <KeyboardLayoutOneHandedLeft24Regular aria-label="Keyboard Layout One Handed Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_keyboard_layout_one_handed_left_24_regular.svg" width="24" height="24" alt="Keyboard Layout One Handed Left"> 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="M19.7454 5C20.988 5 21.9954 6.00736 21.9954 7.25V16.7546C21.9954 17.9972 20.988 19.0046 19.7454 19.0046H4.25C3.00736 19.0046 2 17.9972 2 16.7546V7.25C2 6.00736 3.00736 5 4.25 5H19.7454ZM19.7454 6.5H4.25C3.83579 6.5 3.5 6.83579 3.5 7.25V16.7546C3.5 17.1688 3.83579 17.5046 4.25 17.5046H19.7454C20.1596 17.5046 20.4954 17.1688 20.4954 16.7546V7.25C20.4954 6.83579 20.1596 6.5 19.7454 6.5ZM6.5 16H10C10.4142 16 10.75 15.6642 10.75 15.25C10.75 14.8358 10.4142 14.5 10 14.5H6.5C6.08579 14.5 5.75 14.8358 5.75 15.25C5.75 15.6642 6.08579 16 6.5 16ZM9.50488 11C10.0572 11 10.5049 11.4477 10.5049 12C10.5049 12.5523 10.0572 13 9.50488 13C8.95259 13 8.50488 12.5523 8.50488 12C8.50488 11.4477 8.95259 11 9.50488 11ZM6.50488 11C7.05716 11 7.50488 11.4477 7.50488 12C7.50488 12.5523 7.05716 13 6.50488 13C5.95259 13 5.50488 12.5523 5.50488 12C5.50488 11.4477 5.95259 11 6.50488 11ZM6 8C6.55228 8 7 8.44772 7 9C7 9.55228 6.55228 10 6 10C5.44772 10 5 9.55228 5 9C5 8.44772 5.44772 8 6 8ZM8.99512 8C9.54741 8 9.99512 8.44772 9.99512 9C9.99512 9.55228 9.54741 10 8.99512 10C8.44284 10 7.99512 9.55228 7.99512 9C7.99512 8.44772 8.44284 8 8.99512 8Z" 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_one_handed_left_24_regular.svg";Details
| Name | Keyboard Layout One Handed Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_keyboard_layout_one_handed_left_24_regular.svg |
| Filled file | ic_fluent_keyboard_layout_one_handed_left_24_filled.svg |
| React components | KeyboardLayoutOneHandedLeft24Regular, KeyboardLayoutOneHandedLeft24Filled |
| License | MIT (© Microsoft Corporation) |