Skip to content
Tennantite
中文
Documentation

Textures

Nine-slice textures, icons and pixel rendering.

Redraw strategy

GUI nine-slices and progress bars are redrawn for this project. Item, block and HUD status icons come from the official Minecraft Java 26.3 client (pinned version and SHA-1), generated as base64 PNG data URIs by packages/textures/scripts/sync-vanilla-icons.mjs. Block icons are composed as isometric cubes from three visible faces exactly like the vanilla item renderer (rotateX 30° · rotateY 225° · scale 0.625), with per-face brightness from Direction.getShade(): top 1.0 / north 0.8 / east 0.6. See packages/textures/LICENSE-ASSETS.md.

Nine-slice

Buttons and panels use a 12×12 source with slice 3 through border-image. Border widths scale with --mc-gui, so changing GUI scale does not stretch or blur the art. Every texture class sets image-rendering: pixelated.

.mc-tex-panel {
  border: calc(var(--mc-gui) * 3) solid transparent;
  border-image: url("/textures/panel.svg") 3 / calc(var(--mc-gui) * 3) stretch;
}

Texture classes

ClassUsage
mc-tex-btnButton default
mc-tex-btn--hoverButton hover / focus
mc-tex-btn--disabledButton disabled
mc-tex-btn-successPrimary action button
mc-tex-panelWindow panel
mc-tex-panel-darkTranslucent dark panel
mc-tex-slotItem slot
mc-slot-selectedSelected slot
mc-tex-text-fieldText field
mc-tex-slider-trackSlider track
mc-tex-slider-thumbSlider thumb
mc-tex-checkboxCheckbox
mc-tex-tabTab
mc-tex-tooltipTooltip
mc-tex-hotbarHotbar
mc-tex-hotbar-selectionHotbar selection
mc-tex-xp-bgXP bar background
mc-tex-xp-fillXP bar fill
mc-tex-boss-bgBoss bar background
mc-tex-boss-fillBoss bar fill
mc-tex-flameFurnace flame
mc-tex-arrowFurnace arrow
mc-tex-craft-arrowCrafting arrow
mc-tex-brew-arrowBrewing arrow
mc-tex-bubblesBrewing bubbles
mc-tex-dirtDirt tiling

Icons

air
air-empty
apple
armor
armor-empty
armor-half
baked-potato
blaze-powder
blue-dye
bone
bone-meal
bowl
bread
brown-mushroom
charcoal
clay-ball
coal
copper-ingot
crafting-table
diamond
diamond-chestplate
dirt-block
effect-absorption
effect-bad omen
effect-blindness
effect-breath of the nautilus
effect-conduit power
effect-darkness
effect-dolphins grace
effect-fire resistance
effect-freezing
effect-glowing
effect-haste
effect-health boost
effect-hero of the village
effect-hunger
effect-infested
effect-instant damage
effect-instant health
effect-invisibility
effect-jump boost
effect-levitation
effect-luck
effect-mining fatigue
effect-nausea
effect-night vision
effect-oozing
effect-poison
effect-raid omen
effect-regeneration
effect-resistance
effect-saturation
effect-slow falling
effect-slowness
effect-speed
effect-strength
effect-trial omen
effect-unluck
effect-water breathing
effect-weakness
effect-weaving
effect-wind charged
effect-wither
emerald
experience-bottle
filled-map
flint
glass-bottle
gold-ingot
grass-block
gravel
gunpowder
heart
heart-empty
heart-half
honeycomb
hunger
hunger-empty
hunger-half
ice
icon-accessibility
icon-chat_modified
icon-checkmark
icon-draft_report
icon-info
icon-invite
icon-language
icon-link
icon-link_highlighted
icon-music_notes
icon-new_realm
icon-news
icon-ping_1
icon-ping_2
icon-ping_3
icon-ping_4
icon-ping_5
icon-ping_unknown
icon-search
icon-trial_available
icon-unseen_notification
icon-video_link
icon-video_link_highlighted
iron-block
iron-chestplate
iron-horse-armor
iron-ingot
iron-ore
lapis-lazuli
mushroom-stew
nether-wart
netherite-chestplate
netherite-ingot
netherite-upgrade-smithing-template
oak-log
oak-planks
paper
potato
potion
red-mushroom
redstone
saddle
sand
stone-block
stone-bricks
sugar-cane
sword
wheat
wheat-seeds
import { Icon } from "@tennantite/ui";

<Icon name="grass-block" size={16} />

size is in GUI px and defaults to 16. Icons are aria-hidden by default; provide an aria-label or nearby text when they carry meaning.

Import

@import "@tennantite/textures/css/textures.css";

Texture classes work on any element, but depend on the CSS variables from @tennantite/textures. If you copy a single icon, you do not need the full texture stylesheet.