Keyboard Keys
Key Preview
![]()
- Also supports FontAwesome Icons by prefixing the Label with
far:/fas:/fab:(e.g.far:smile) - License for selected font available here
Mouse Buttons
Mouse Preview
![]()
- Also supports FontAwesome Icons by prefixing the Label with
far:/fas:/fab:(e.g.far:smile) - License for selected font available here
Usage
Key.pics provides a simple way to create Keyboard and Mouse icons,
originally intended for visualizing inputs of games and other software to their users.For example:
+
to copy the selected text
+
to paste the copied text
to open the file
Script Tag
<script src="https://unpkg.com/key.pics/dist/key.pics.js"></script>
NPM
npm install --save key.pics
HTML
<i class="keypics" data-mode="link" data-color="blue">K</i><!-- mode=link replaces the element with an <img> tag -->
<i class="keypics" data-mode="fetch" data-color="green">E</i><!-- mode=fetch downloads the SVG data and inserts it directly in the page -->
<i class="keypics" data-mode="link">Y</i>
<i class="keypics" data-type="mouse" data-label="x2">right</i>