Keyboard Layout Float icon
Used to represent digital keyboard scenarios. The Keyboard Layout Float 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 Float 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 { KeyboardLayoutFloat24Regular, KeyboardLayoutFloat24Filled } from "@fluentui/react-icons";
export function Example() {
return <KeyboardLayoutFloat24Regular aria-label="Keyboard Layout Float" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_keyboard_layout_float_24_regular.svg" width="24" height="24" alt="Keyboard Layout Float"> 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="M21.25 19.5C21.6642 19.5 22 19.8358 22 20.25C22 20.6297 21.7178 20.9435 21.3518 20.9932L21.25 21H2.75C2.33579 21 2 20.6642 2 20.25C2 19.8703 2.28215 19.5565 2.64823 19.5068L2.75 19.5H21.25ZM19.7454 3C20.988 3 21.9954 4.00736 21.9954 5.25V14.7546C21.9954 15.9972 20.988 17.0046 19.7454 17.0046L13.224 17.005C13.1062 17.5731 12.603 18 12 18C11.397 18 10.8938 17.5731 10.776 17.005L4.25 17.0046C3.00736 17.0046 2 15.9972 2 14.7546V5.25C2 4.00736 3.00736 3 4.25 3H19.7454ZM19.7454 4.5H4.25C3.83579 4.5 3.5 4.83579 3.5 5.25V14.7546C3.5 15.1688 3.83579 15.5046 4.25 15.5046H19.7454C20.1596 15.5046 20.4954 15.1688 20.4954 14.7546V5.25C20.4954 4.83579 20.1596 4.5 19.7454 4.5ZM17.25 12.5C17.6642 12.5 18 12.8358 18 13.25C18 13.6297 17.7178 13.9435 17.3518 13.9932L17.25 14H6.75C6.33579 14 6 13.6642 6 13.25C6 12.8703 6.28215 12.5565 6.64823 12.5068L6.75 12.5H17.25ZM16.5 9C17.0523 9 17.5 9.44772 17.5 10C17.5 10.5523 17.0523 11 16.5 11C15.9477 11 15.5 10.5523 15.5 10C15.5 9.44772 15.9477 9 16.5 9ZM10.5049 9C11.0572 9 11.5049 9.44772 11.5049 10C11.5049 10.5523 11.0572 11 10.5049 11C9.95259 11 9.50488 10.5523 9.50488 10C9.50488 9.44772 9.95259 9 10.5049 9ZM7.50488 9C8.05716 9 8.50488 9.44772 8.50488 10C8.50488 10.5523 8.05716 11 7.50488 11C6.95259 11 6.50488 10.5523 6.50488 10C6.50488 9.44772 6.95259 9 7.50488 9ZM13.5049 9C14.0572 9 14.5049 9.44772 14.5049 10C14.5049 10.5523 14.0572 11 13.5049 11C12.9526 11 12.5049 10.5523 12.5049 10C12.5049 9.44772 12.9526 9 13.5049 9ZM6 6C6.55228 6 7 6.44772 7 7C7 7.55228 6.55228 8 6 8C5.44772 8 5 7.55228 5 7C5 6.44772 5.44772 6 6 6ZM8.99512 6C9.54741 6 9.99512 6.44772 9.99512 7C9.99512 7.55228 9.54741 8 8.99512 8C8.44284 8 7.99512 7.55228 7.99512 7C7.99512 6.44772 8.44284 6 8.99512 6ZM11.9951 6C12.5474 6 12.9951 6.44772 12.9951 7C12.9951 7.55228 12.5474 8 11.9951 8C11.4428 8 10.9951 7.55228 10.9951 7C10.9951 6.44772 11.4428 6 11.9951 6ZM14.9951 6C15.5474 6 15.9951 6.44772 15.9951 7C15.9951 7.55228 15.5474 8 14.9951 8C14.4428 8 13.9951 7.55228 13.9951 7C13.9951 6.44772 14.4428 6 14.9951 6ZM17.9951 6C18.5474 6 18.9951 6.44772 18.9951 7C18.9951 7.55228 18.5474 8 17.9951 8C17.4428 8 16.9951 7.55228 16.9951 7C16.9951 6.44772 17.4428 6 17.9951 6Z" 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_float_24_regular.svg";Details
| Name | Keyboard Layout Float |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_keyboard_layout_float_24_regular.svg |
| Filled file | ic_fluent_keyboard_layout_float_24_filled.svg |
| React components | KeyboardLayoutFloat24Regular, KeyboardLayoutFloat24Filled |
| License | MIT (© Microsoft Corporation) |