Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: shake. Pick another to preview it and update the animated code:

Radix Icons · RxKeyboard

Keyboard icon

A free keyboard icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known astype icontyping iconinput iconkeys icon
License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/keyboard.json
components/icons/radix-keyboard.tsx
import * as React from "react";

/**
 * Keyboard from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/keyboard. Sized in em, colored by currentColor.
 */
export function RxKeyboardIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M13.6533 3.00781C14.4097 3.08461 15 3.72334 15 4.5V10.5L14.9922 10.6533C14.9205 11.3593 14.3593 11.9205 13.6533 11.9922L13.5 12H1.5L1.34668 11.9922C0.64069 11.9205 0.0794913 11.3593 0.0078125 10.6533L0 10.5V4.5C9.06007e-08 3.72334 0.590277 3.08461 1.34668 3.00781L1.5 3H13.5L13.6533 3.00781ZM1.5 4C1.22386 4 1 4.22386 1 4.5V10.5C1 10.7761 1.22386 11 1.5 11H13.5C13.7761 11 14 10.7761 14 10.5V4.5C14 4.22386 13.7761 4 13.5 4H1.5ZM3 10H2V9H3V10ZM11 10H4V9H11V10ZM13 10H12V9H13V10ZM4 8H3V7H4V8ZM6 8H5V7H6V8ZM8 8H7V7H8V8ZM10 8H9V7H10V8ZM12 8H11V7H12V8ZM3 6H2V5H3V6ZM5 6H4V5H5V6ZM7 6H6V5H7V6ZM9 6H8V5H9V6ZM11 6H10V5H11V6ZM13 6H12V5H13V6Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxKeyboard } from "react-icons/rx";

export function Example() {
  return <RxKeyboard className="size-5" />;
}
keyboard.svg
<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M13.6533 3.00781C14.4097 3.08461 15 3.72334 15 4.5V10.5L14.9922 10.6533C14.9205 11.3593 14.3593 11.9205 13.6533 11.9922L13.5 12H1.5L1.34668 11.9922C0.64069 11.9205 0.0794913 11.3593 0.0078125 10.6533L0 10.5V4.5C9.06007e-08 3.72334 0.590277 3.08461 1.34668 3.00781L1.5 3H13.5L13.6533 3.00781ZM1.5 4C1.22386 4 1 4.22386 1 4.5V10.5C1 10.7761 1.22386 11 1.5 11H13.5C13.7761 11 14 10.7761 14 10.5V4.5C14 4.22386 13.7761 4 13.5 4H1.5ZM3 10H2V9H3V10ZM11 10H4V9H11V10ZM13 10H12V9H13V10ZM4 8H3V7H4V8ZM6 8H5V7H6V8ZM8 8H7V7H8V8ZM10 8H9V7H10V8ZM12 8H11V7H12V8ZM3 6H2V5H3V6ZM5 6H4V5H5V6ZM7 6H6V5H7V6ZM9 6H8V5H9V6ZM11 6H10V5H11V6ZM13 6H12V5H13V6Z"
    fill="currentColor"
  />
</svg>
Attribution
"Keyboard" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: type, typing, input, keys

Keyboard icon in other sets