Keyboard Off icon

Use the Keyboard Off 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 { KeyboardOff24Regular, KeyboardOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L17.9443 19.0049H4.25C3.00748 19.0049 2.00019 17.9974 2 16.7549V7.25001C2 6.10573 2.85444 5.16292 3.95996 5.02051L2.21973 3.28028C1.92685 2.98739 1.92687 2.51262 2.21973 2.21973ZM19.7451 5C20.9878 5 21.9951 6.00736 21.9951 7.25001V16.7549C21.995 17.3274 21.779 17.848 21.4268 18.2451L20.3613 17.1797C20.4449 17.0588 20.495 16.913 20.4951 16.7549V7.25001C20.4951 6.83579 20.1593 6.50001 19.7451 6.50001H9.68164L8.18164 5H19.7451ZM4.25 6.50001C3.83579 6.50001 3.5 6.83579 3.5 7.25001V16.7549C3.50019 17.1689 3.8359 17.5049 4.25 17.5049H16.4443L14.9395 16H6.75C6.33581 16 6.00003 15.6642 6 15.25C6 14.8703 6.28237 14.5565 6.64844 14.5068L6.75 14.5H13.4395L11.3936 12.4541C11.2279 12.7776 10.8932 13 10.5049 13C9.95262 13 9.50491 12.5523 9.50488 12C9.50488 11.6118 9.72655 11.2761 10.0498 11.1104L5.43945 6.50001H4.25ZM7.50488 11C8.05716 11 8.50488 11.4477 8.50488 12C8.50485 12.5523 8.05714 13 7.50488 13C6.95262 13 6.50491 12.5523 6.50488 12C6.50488 11.4477 6.9526 11 7.50488 11ZM16.5 11C17.0523 11 17.5 11.4477 17.5 12C17.5 12.5523 17.0523 13 16.5 13C15.9477 13 15.5 12.5523 15.5 12C15.5 11.4477 15.9477 11 16.5 11ZM6 8.00001C6.55228 8.00001 7 8.44772 7 9.00001C6.99997 9.55226 6.55227 10 6 10C5.44774 10 5.00003 9.55226 5 9.00001C5 8.44772 5.44772 8.00001 6 8.00001ZM14.9951 8.00001C15.5474 8.00001 15.9951 8.44772 15.9951 9.00001C15.9951 9.55226 15.5474 10 14.9951 10C14.4429 10 13.9951 9.55226 13.9951 9.00001C13.9951 8.44772 14.4428 8.00001 14.9951 8.00001ZM17.9951 8.00001C18.5474 8.00001 18.9951 8.44772 18.9951 9.00001C18.9951 9.55226 18.5474 10 17.9951 10C17.4429 10 16.9951 9.55226 16.9951 9.00001C16.9951 8.44772 17.4428 8.00001 17.9951 8.00001ZM11.9951 8.00001C12.5474 8.00001 12.9951 8.44772 12.9951 9.00001C12.9951 9.22849 12.9171 9.43807 12.7881 9.60645L11.3877 8.20606C11.5561 8.07701 11.7665 8.00001 11.9951 8.00001Z" 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_off_24_regular.svg";

Details