Keyboard 123 icon

Use the Keyboard 123 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 { Keyboard12324Regular, Keyboard12324Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.16475 4.17082C5.53062 4.35376 5.97454 4.20958 6.16394 3.84915L6.16567 3.84626C6.17072 3.83795 6.18251 3.81937 6.20173 3.79375C6.2404 3.74218 6.30688 3.6651 6.40619 3.58565C6.59529 3.43437 6.93235 3.25 7.50016 3.25C7.99222 3.25 8.28017 3.48707 8.39184 3.71041C8.49512 3.91697 8.4953 4.1942 8.21983 4.46967C8.02539 4.66411 7.77396 4.83256 7.45359 5.01849C7.36625 5.06918 7.26836 5.12399 7.1648 5.18197C6.92373 5.31695 6.65195 5.46912 6.41096 5.62657C5.65396 6.12117 4.91692 6.83805 4.75569 8.15914C4.72967 8.3723 4.79628 8.58639 4.93863 8.74717C5.08098 8.90795 5.28542 9 5.50016 9H9.25016C9.66438 9 10.0002 8.66421 10.0002 8.25C10.0002 7.83579 9.66438 7.5 9.25016 7.5H6.548C6.71814 7.25676 6.94999 7.06617 7.23141 6.8823C7.42979 6.75269 7.62295 6.64475 7.83849 6.52432C7.95335 6.46013 8.07475 6.3923 8.20651 6.31584C8.55588 6.11308 8.9446 5.86622 9.28049 5.53033C10.005 4.8058 10.1302 3.83303 9.73348 3.03959C9.34516 2.26294 8.5081 1.75 7.50016 1.75C6.56798 1.75 5.90504 2.06563 5.46914 2.41435C5.25595 2.5849 5.10368 2.75782 5.00173 2.89375C4.95063 2.96188 4.91164 3.02142 4.88349 3.0678C4.86939 3.09102 4.85794 3.11105 4.84898 3.12733L4.83738 3.14893L4.83292 3.15752L4.83102 3.16125L4.83016 3.16297L4.82934 3.16459C4.6441 3.53507 4.79427 3.98558 5.16475 4.17082ZM14.3749 4.48382C14.24 4.6101 13.9744 4.75 13.5001 4.75C13.0859 4.75 12.7501 5.08579 12.7501 5.5C12.7501 5.91421 13.0859 6.25 13.5001 6.25C13.9744 6.25 14.24 6.3899 14.3749 6.51618C14.5097 6.64241 14.5647 6.79928 14.5555 6.95561C14.5399 7.21879 14.2728 7.75 13.2501 7.75C12.7853 7.75 12.4909 7.61335 12.3224 7.50096C12.235 7.4427 12.176 7.3872 12.143 7.35222C12.1271 7.33534 12.1175 7.32361 12.114 7.31925C11.881 6.98671 11.4237 6.89951 11.0841 7.12596C10.5 7.50096 10.876 8.16603 10.876 8.16603L10.877 8.16747L10.878 8.16898L10.8802 8.17223L10.8853 8.17958L10.898 8.19754C10.9077 8.21092 10.9197 8.22708 10.9343 8.24559C10.9633 8.28259 11.0025 8.32925 11.0525 8.38216C11.1523 8.4878 11.2964 8.6198 11.4903 8.74904C11.8842 9.01165 12.4648 9.25 13.2501 9.25C14.8716 9.25 15.9795 8.28121 16.0528 7.04439C16.086 6.48568 15.8913 5.92746 15.48 5.5C15.8913 5.07254 16.086 4.51432 16.0528 3.95561C15.9795 2.71879 14.8716 1.75 13.2501 1.75C12.4648 1.75 11.8842 1.98835 11.4903 2.25096C11.2964 2.3802 11.1523 2.5122 11.0525 2.61784C11.0025 2.67075 10.9633 2.71741 10.9343 2.75441C10.9197 2.77292 10.9077 2.78908 10.898 2.80246L10.8853 2.82042L10.8802 2.82777L10.878 2.83102L10.877 2.83253L10.876 2.83397C10.6463 3.17862 10.7394 3.64427 11.0841 3.87404C11.4237 4.10049 11.881 4.01329 12.114 3.68075C12.1175 3.67639 12.1271 3.66466 12.143 3.64778C12.176 3.6128 12.235 3.5573 12.3224 3.49904C12.4909 3.38665 12.7853 3.25 13.2501 3.25C14.2728 3.25 14.5399 3.78121 14.5555 4.04439C14.5647 4.20072 14.5097 4.35759 14.3749 4.48382ZM12.1237 7.33328L12.1166 7.32296L12.1178 7.32473L12.1207 7.32886L12.1223 7.33129L12.1237 7.33328ZM12.1237 3.66672L12.1166 3.67705L12.1178 3.67527L12.1207 3.67114L12.1223 3.66871L12.1237 3.66672ZM3.49507 2.64921L3.50162 2.7496V8.24623C3.50162 8.66044 3.16583 8.99623 2.75162 8.99623C2.37192 8.99623 2.05813 8.71408 2.00847 8.348L2.00162 8.24623L2.00114 3.7916L1.48887 3.96459C1.12891 4.08542 0.741639 3.91779 0.578067 3.58654L0.53919 3.49224C0.418365 3.13228 0.585996 2.74501 0.917239 2.58144L1.01154 2.54257L2.51296 2.03859C2.9665 1.88635 3.43466 2.19115 3.49507 2.64921ZM17.0272 6.5H19.7454C20.1596 6.5 20.4954 6.83579 20.4954 7.25V16.7546C20.4954 17.1688 20.1596 17.5046 19.7454 17.5046H4.25C3.83579 17.5046 3.5 17.1688 3.5 16.7546V9.80403C3.26071 9.92686 2.98942 9.99618 2.70195 9.99618C2.45221 9.99618 2.2148 9.94394 2 9.84978V16.7546C2 17.9972 3.00736 19.0046 4.25 19.0046H19.7454C20.988 19.0046 21.9954 17.9972 21.9954 16.7546V7.25C21.9954 6.00736 20.988 5 19.7454 5H16.9135C16.8589 5.17156 16.7888 5.33891 16.7035 5.5C16.8701 5.81455 16.9786 6.15294 17.0272 6.5ZM17.25 14.5H6.75L6.64823 14.5068C6.28215 14.5565 6 14.8703 6 15.25C6 15.6642 6.33579 16 6.75 16H17.25L17.3518 15.9932C17.7178 15.9435 18 15.6297 18 15.25C18 14.8358 17.6642 14.5 17.25 14.5ZM17.5 12C17.5 11.4477 17.0523 11 16.5 11C15.9477 11 15.5 11.4477 15.5 12C15.5 12.5523 15.9477 13 16.5 13C17.0523 13 17.5 12.5523 17.5 12ZM11.5049 12C11.5049 11.4477 11.0572 11 10.5049 11C9.95259 11 9.50488 11.4477 9.50488 12C9.50488 12.5523 9.95259 13 10.5049 13C11.0572 13 11.5049 12.5523 11.5049 12ZM8.50488 12C8.50488 11.4477 8.05716 11 7.50488 11C6.95259 11 6.50488 11.4477 6.50488 12C6.50488 12.5523 6.95259 13 7.50488 13C8.05716 13 8.50488 12.5523 8.50488 12ZM14.5049 12C14.5049 11.4477 14.0572 11 13.5049 11C12.9526 11 12.5049 11.4477 12.5049 12C12.5049 12.5523 12.9526 13 13.5049 13C14.0572 13 14.5049 12.5523 14.5049 12ZM18.9951 9C18.9951 8.44772 18.5474 8 17.9951 8C17.4428 8 16.9951 8.44772 16.9951 9C16.9951 9.55228 17.4428 10 17.9951 10C18.5474 10 18.9951 9.55228 18.9951 9Z" 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_123_24_regular.svg";

Details

Keywords

keyboardtypekeydeviceanalognumpadnumber