PokéSprite – Image Sprite Generator
This simple script generates a complete image sprite of all Pokémon in the National Pokédex, along with the icons for every single in-game item. It also generates SCSS and JS files which can then be used to efficiently display the icons from the sprite on a website.
Displaying the sprites is a matter of adding an empty
<div> element with the appropriate
class attribute set, and then running the JS decoration code. The base class is
pkspr. Following the base class, you can add a number of classes that specify which icon is to be displayed.
Here are some examples:
<span class="pkspr pkmn-pikachu"></span> <span class="pkspr pkmn-bulbasaur color-shiny"></span> <span class="pkspr pkmn-deoxys form-defense"></span> <span class="pkspr pkmn-clauncher color-shiny dir-right"></span> <span class="pkspr pkmn-charizard form-mega-y"></span> <span class="pkspr pkmn-unown form-d"></span> <span class="pkspr pkmn-pyroar gender-female"></span>
To clarify, the following classes can be used:
pkmn-name– Pokémon name* or Pokédex number
color-shiny– shiny or regular icon
dir-right– direction the icon faces (some Pokémon, such as Roselia, have a different icon when facing right—by default, those that do not have a separate icon will be flipped using the CSS
gender-female– gender of the icon (in case of gender differences, such as Meowstic)
form-name– form of the Pokémon (e.g.
orangefor Flabébé, etc.)
*Note: for Pokémon names, simplified versions without special characters are used, e.g. "flabebe" rather than "Flabébé". See the icon overview page for a full list of supported names.
The tag name used is also important: if a
<span> is used, the icon is displayed as an
inline-block. If a
<div> is used, it's a
The item icons have been organized in a set of collections. To display an icon, first the collection name must be used, followed by the item itself. For example, an Oran Berry is named
oran and is in the
berry collection, so the full class name would be
pkspr berry-oran. Some more HTML examples follow:
<span class="pkspr berry-oran"></span> <span class="pkspr body-style-bipedal-tailed"></span> <span class="pkspr fossil-helix"></span> <span class="pkspr gem-bug"></span> <span class="pkspr medicine-potion"></span> <span class="pkspr mega-stone-charizardite-y"></span> <span class="pkspr pokeball-dive"></span> <span class="pkspr tm-ice"></span>
There are many different icons that can be displayed. See the icon overview page for a complete overview.
Decorating the icons
The icons will not yet show up until you run the decoration JS code. There are two ways to activate the code: either with a single command that is added before the closing
</body> tag (or, anywhere after the last icon):
Or, you can add the following after each individual icon. This ensures the icons show up as soon as possible, rather than showing them all at once after loading is complete:
Compiling the sprite
Running the script to generate a sprite image with default settings is a simple matter of running the program.
This will generate a full sprite sheet with regular icons, shiny icons, right-facing icons (where a unique icon exists), and all other icon sets. It also generates SCSS and JS files and an overview HTML page for previewing your build. Everything is saved to the
Normally you don't need to do this, since you can just use a pre-compiled version instead.
Compiling SCSS to CSS
PokéSprite does not generate CSS—it only generates SCSS (which can't directly be used in a website). You'll have to compile the CSS yourself using SASS. See the SASS manual for a more complete usage guide.
Once you have SASS installed, the CSS file can be compiled using the following terminal command:
sass --style compressed output/pokesprite.scss output/pokesprite.css
The generated SCSS is currently not SassC compatible. This is planned for a later release.
Compiling the JS using the Closure Compiler
The JS file can be optimized with the Closure Compiler. The easiest way is to use the Closure Compiler Service. Make sure to set the optimization level to advanced.
In case you have a local binary, the following command can be used:
java -jar closure-compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS \ --js output/pokesprite.js --js_output_file output/pokesprite.min.js \ --charset UTF-8
The source icons are © Nintendo/Creatures Inc./GAME FREAK Inc.
Everything else, and usage of the programming code, is governed by the MIT license.