Keyboard Key Icons

A simple, lightweight CSS icon library for displaying keyboard keys.

Live Demo & Documentation

Check out the complete documentation and a live demo of all icons on our GitHub Pages site:

https://thtmorais.github.io/keyboard-key-icons/

Getting Started

To use Keyboard Key Icons in your project, install the package via npm:

npm install keyboard-key-icons

Basic Usage

To use an icon, add an <i> element with the class corresponding to the key you want to display. For example, to display the "A" key, you would use the following code:

<i class="key-a"></i>

Sizing

You can change the size of the icons by adding the appropriate class to the <i> element.

Relative size guide:

Example:

<i class="key-a key-lg"></i>

Available classes: .key-xxs, .key-xs, .key-sm, .key-lg, .key-xl, .key-xxl

Literal size guide:

Example:

<i class="key-a key-lg"></i>

Available classes: .key-1x, .key-2x, .key-3x, .key-4x, .key-5x, .key-6x, .key-7x, .key-8x, .key-9x, .key-10x, .key-11x, .key-12x

Coloring

You can change the color of the icons by applying a text-* (Boostrap classes) class to the <i> element.

<i class="key-c key-3x text-danger"></i>
<i class="key-c key-3x text-warning"></i>
<i class="key-c key-3x text-primary"></i>

Available classes: .text-danger, .text-warning, .text-primary, etc. (any Bootstrap text color class).

Available Icons

Alphabetic Keys (A-Z)

Number Keys (0-9)

Command Keys

Special Keys

Function Keys

License

This project is licensed under the MIT License. See the LICENSE.md file for details.

Copyright (c) 2024 Matheus Evangelista Morais.

Font License

Please note that the font "212 Keyboard" by "212 Fonts" is used in this project and is subject to its own license terms. It is free for personal and small commercial use, but cannot be resold. For more details, please see the LICENSE.md file.

Keywords

keyboard, keys, icons, icon-library, css-icons, icon-font, css, html, frontend, keyboard-shortcuts, hotkeys, ui, lightweight, bootstrap, key-bindings, shortcut-icons, hotkey-icons