Game
Style
Icons
100 items. 50 worlds. Works in any code.
The same 100 icons, drawn in 50 styles inspired by video games. Use them as a web component in any framework, as React components, as SVG strings, or as plain SVG files.
npm install github:horlesq/game-style-icons
Getting started
-
Insert the Game Pak
Install the package from GitHub. It is not on npm yet. No build step? Load the web component from a CDN and skip the install.
npm install github:horlesq/game-style-icons -
Pick how you play
The same items under the same names, four ways. React is optional; only the React components need it.
-
Use an item
Every world draws the same 100 items, so changing the look of a whole interface is changing one word: the world.
Controls
Try any item before you install. Use the pad with a mouse or a finger, or focus it and use the arrow keys, A and B.
| Setting | Takes | Default |
|---|---|---|
size | a number (px) or any CSS length | 1em, follows the text |
label · title | the accessible name (label on the element, title in React and strings) | none: hidden from screen readers |
class · className | your class, for colour or alignment | none |
| anything else | passed to the <svg>: style, onClick, aria-*; React forwards the ref |
Worlds
Every world draws the same 100 items. Pick one and the whole manual reprints in it: the items, the code, this booklet's ink. Your world is remembered for next time.
Items
No item by that name. The set has 100 items: try , or .
Warning
Please read before playing
These icons are original artwork. Each style borrows a game's general visual language (line, colour, effects) and contains no logos, characters, fonts or assets from any game.
Game names are trademarks of their owners and are used here only to describe a style. This project is not affiliated with or endorsed by any game, studio or publisher.
Precautions
- Not on npm yet. Install from GitHub, or load the web component from the CDN.
portalandmirrors-edgedraw in your text colour. Every other world keeps its own palette, with a thin dark rim so it reads on light pages too.- Pixel worlds draw on their own grid (16, 13 or 12 cells) and stay sharp at any size.
- A few worlds change colour from item to item, like Tetris pieces or Splatoon ink.
Warranty
MIT licence: use the icons in personal and commercial projects, change them, ship them. The software is provided as is, without warranty of any kind.
Make your own world
Everything is generated by one Python script from one set of glyphs. Add an item to glyphs.py, or a style function to gen.py, run python3 gen.py, and every output is rebuilt: components, strings, the web component, the SVG files and this page's data.