minecraft-items-css

Minecraft items and blocks as css

Using Minecraft Wikis sprite and data returned here we can parse the sprite to get any item or block on the spritesheet. See demo below for output

Demo, (ctrl+f to search)

Installation

Import the stylesheet provided

@import "./minecraft-items-spritesheet.css";

Copy the spritesheet in the repository to the same place as the index.html or you can override where the location is with

.icon-32 {
    background-image: url('./InvSprite.webp');
}

Base usage

<div class="icon-32 netherite-sword"></div>

Scaling

Thanks to Temani Afif for providing a way to scale spritesheets effectively.

Currently support 32x, 64x, 128x, 256x and 512x

<div class="icon-32 icon-size-64 netherite-sword"></div>

<div class="icon-32 icon-size-128 netherite-sword"></div>

<div class="icon-32 icon-size-256 netherite-sword"></div>

<div class="icon-32 icon-size-512 netherite-sword"></div>

Should you need to change scaling, by using CSS variables you can pass in with your own custom scaling such as:

<div class="icon-32 netherite-sword" style="--n:0.5"></div>