Lucide Keyboard Icons

An icon font purpose-built for keyboard keys (such as HTML <kbd> elements), based on the Lucide icon library. Every icon is mapped to its real Unicode character — nothing is placed in the Private Use Area. The font files are generated with IcoMoon.

License

This project is licensed under the SIL Open Font License 1.1 (OFL-1.1). It is also compatible with the ISC and MIT licenses inherited from the upstream Lucide icon repository.

Usage

1. Standard Icon-Font Usage

Apply the icon class to any element and insert the corresponding Unicode character:

<i class="icon">⌘</i>

2. kbd Shortcut Declaration

For keys that have an associated keyboard shortcut, you can declare the key name in plain text via the aria-keyshortcuts attribute — no need to copy, paste, or memorise any Unicode code points. The CSS ::before/::after pseudo-elements render the matching icon automatically:

<kbd aria-keyshortcuts="ctrl">Ctrl</kbd>

This renders visually as ⌃ Ctrl — the icon and label together. You can change the label to any text you like (e.g. Control, Strg, ⌃) without affecting the icon, because the icon is injected by CSS based on the attribute value.

The aria-keyshortcuts attribute is case-insensitive and accepts multiple aliases for several keys. For example, all of these produce the Option icon:

<kbd aria-keyshortcuts="enter">Enter</kbd>
<kbd aria-keyshortcuts="numpadenter">Numpad Enter</kbd>
<kbd aria-keyshortcuts="return">Return</kbd>
<kbd aria-keyshortcuts="Ret">Ret</kbd>

Important: Not every icon supports the kbd declaration. Icons for typographic symbols (e.g. +, −, (, [) would cause visual duplication if rendered via kbd — you would see the icon glyph and the text label side by side, giving you two plus signs or two brackets. Those icons must be used with the standard .icon class (see the Icon-Only table below).

Icons

Icons Supporting kbd Declaration

These icons can be rendered via <kbd aria-keyshortcuts="…">. The CSS ::before or ::after pseudo-element will inject the icon glyph automatically.

#	Icon	Character	CSS/SCSS/Dart Class Name	Keyboard Key	aria-keyshortcuts Aliases (Case-Insensitive)	Code Point	Notes
1		⌘	key-cmd	Command	cmd, command	U+2318	Mac only, introduced since 1980
2		⊞	key-win	Windows	win, windows	U+229E	Windows only, introduced since 1994 Equivalent to Ctrl + Esc
3		◆	key-meta	Meta	meta	U+25C6	SAIL keyboard, introduced since 1970
4		❖	key-super	Super	super	U+2756	Linux and BSD only, introduced since 1978
5		✦	key-hyper	Hyper	hyper	U+2726	Lisp machine, introduced since 1978
6		⌃	key-ctrl	Control	ctrl, control	U+2303	Ctrl for Windows and Control for Mac The icon is from Mac
7		⎈	key-helm	Control	helm	U+2388	The icon is the standardized symbol but very rarely used
8		⌥	key-option	Option	opt, option	U+2325	Mac only Equivalent to Alt
9		⎇	key-alt	Alt	alt, alt gr, altGr	U+2387	All except Mac Equivalent to Option
10		⇧	key-shift	Shift	shift	U+21E7
11		⇪	key-capslock	Caps Lock	capsLock	U+21EA
12		⇥	key-tab	Tab	tab	U+21E5
13		↑	key-up	Arrow Up	up	U+2191
14		↓	key-down	Arrow Down	down	U+2193
15		←	key-left	Arrow Left	left	U+2190
16		→	key-right	Arrow Right	right	U+2192
17		⇞	key-pageup	Page Up	pageUp, pgUp	U+21DE
18		⇟	key-pagedown	Page Down	pageDown, pgDn	U+21DF
19		⇱	key-home	Home	home	U+21F1
20		⇲	key-end	End	end	U+21F2
21		⤓	key-scrolllock	Scroll Lock	scrollLock	U+2913
22		␣	key-space	Space	space	U+2423
23		⏎	key-enter	Enter / Return	enter, numpadEnter, return, ret	U+23CE
24		⎋	key-esc	Escape	esc, escape	U+238B
25		⌫	key-backspace	Backspace	backSpace	U+232B
26		⌦	key-delete	Delete	delete, del	U+2326
27		⎀	key-insert	Insert	insert, ins	U+2380
28		≣	key-menu	Context Menu / Application	menu, contextMenu, app, application, apps	U+2263	Windows only, introduced since 1994 Equivalent to Shift + F10
29		⎉	key-pause	Pause	pause, pauseBreak	U+2389
30		⎊	key-break	Break	break	U+238A
31		⎙	key-printscreen	Print Screen / System Request	printScreen, systemRequest, sysReq, sysRq	U+2399
32		⇭	key-numlock	Numpad Lock	numLock, numpadLock	U+21ED
33		🌐	key-fn	Fn	fn, globe	U+1F310	Fn key has no icon, but Mac also uses Fn key as Globe key
34		☺	key-expressive	Expressive	expressive, emoji, emoticon	U+263A	Windows only, introduced since 2019 Equivalent to Win + .
35		📎	key-office	Office	office	U+1F4CE	Windows only, introduced since 2019 The character uses the classic Clippy in Office Equivalent to Ctrl + Shift + Alt + Win
36		🤖	key-copilot	Copilot	copilot	U+1F916	Windows only, introduced since 2024 Equivalent to Win + Shift + F23

Icons Requiring .icon Class

These icons represent typographic or mathematical symbols. Because a kbd declaration renders both the icon and the text label, using it for these characters would produce visual duplication (e.g. <kbd aria-keyshortcuts="plus">+</kbd> would display the plus icon and the text + side by side). Use the standard .icon class instead.

#	Icon	Character	CSS/SCSS/Dart Class Name	Description	Code Point
37		+	key-plus	Plus	U+002B
38		−	key-minus	Minus	U+2212
39		-	key-hyphen	Hyphen-Minus	U+002D
40		*	key-asterisk	Asterisk	U+002A
41		/	key-slash	Slash / Forward Slash	U+002F
42		\	key-backslash	Backslash	U+005C
43		~	key-tilde	Tilde	U+007E
44		×	key-multiply	Multiply	U+00D7
45		÷	key-divide	Divide	U+00F7
46		=	key-equal	Equal	U+003D
47		≠	key-notequal	Not Equal	U+2260
48		≈	key-approxequal	Approximately Equal	U+2248
49		%	key-percent	Percent	U+0025
50		√	key-radical	Radical / Square Root	U+221A
51		∅	key-null	Null / Empty Set	U+2205
52		Σ	key-sigma	Sigma	U+03A3
53		Ω	key-omega	Omega	U+03A9
54		Φ	key-phi	Phi	U+03A6
55		π	key-pi	Pi	U+03C0
56		#	key-hash	Hash / Number Sign	U+0023
57		@	key-at	At Sign	U+0040
58		☆	key-star	Star	U+2606
59		!	key-exclamation	Exclamation Mark	U+0021
60		?	key-question	Question Mark	U+003F
61		$	key-dollar	Dollar Sign	U+0024
62		^	key-caret	Caret / Circumflex	U+005E
63		&	key-ampersand	Ampersand	U+0026
64		_	key-underscore	Underscore	U+005F
65		|	key-verticalline	Vertical Line / Pipe	U+007C
66		¦	key-brokenbar	Broken Bar	U+00A6
67		(	key-leftparenthesis	Left Parenthesis	U+0028
68		)	key-rightparenthesis	Right Parenthesis	U+0029
69		[	key-leftbracket	Left Bracket	U+005B
70		]	key-rightbracket	Right Bracket	U+005D
71		{	key-leftbrace	Left Brace	U+007B
72		}	key-rightbrace	Right Brace	U+007D
73		±	key-diff	Plus-Minus / Difference	U+00B1
74		·	key-dot	Middle Dot	U+002E
75		<	key-lessthan	Less Than	U+003C
76		>	key-greaterthan	Greater Than	U+003E
77		"	key-quote	Double Quote	U+0022
78		'	key-apostrophe	Apostrophe / Single Quote	U+0027

Note on minus vs hyphen: key-minus (U+2212) is the typographic minus sign (−), which matches the width and vertical position of the plus sign. key-hyphen (U+002D) is the ASCII hyphen-minus (-) found on standard keyboards. Both are provided so you can choose the correct character for your context.

Usage Example — Icon-Only

<!-- Standard icon-font approach for symbols without kbd support -->
<i class="icon">+</i>
<i class="icon">≈</i>
<i class="icon">√</i>

Files

File	Purpose
imports/style.css	Font-face declaration, .icon class, and kbd shortcut CSS rules
imports/variables.scss	SCSS variables mapping icon names to Unicode code points
imports/lucide_keyboard_icons.dart	Dart class for use in Flutter projects
imports/symbol-defs.svg	SVG symbol definitions for <use href="…"> usage
fonts/	Font files (.otf, .ttf, .woff, .woff2)
icons/	Individual SVG files for each icon, derived from Lucide

See Also

• Lucide — the open-source icon library this font is based on.
• IcoMoon — the font-generation tool used to produce the font files.