UI Packs

Amberterm Inventory Slots — 84px grid

84×84 amber CRT inventory slots: empty, hover, selected and locked states plus three rarity frames. SVG and transparent PNG.

  • ui
  • svg
  • transparent png
  • inventory
  • slot
  • item frame
  • rarity
  • grid
  • terminal
  • amber
  • crt
  • retro
A row of square game inventory slots on a checkerboard background showing empty, hover, selected with corner ticks, and diagonally hatched locked states, followed by coloured rarity frames and a tiled eight-slot grid
1600×667 previewtransparency shown as checkerboard

About this pack

Slots at 84px, large and few. A terminal inventory was a list with a highlight bar, so the slots here are wide rows rather than a dense grid.

An inventory grid does not need a panel, it needs a square that tiles: 7 files at 84×84, all with the same outer bounds, so a row of them lines up with no gap arithmetic. Put them 88 px apart and the borders read as a single grid rather than a row of separate boxes.

The states are drawn as structure, not colour. The selected slot gets corner ticks, the locked slot gets diagonal hatching, the hover slot lifts its border a step. This is deliberate: the inventory screen is the noisiest surface in most games, sitting under item art in every hue at once, and a state that is only a border colour is invisible the moment a red sword is sitting in the slot.

The three rarity frames reuse the health, mana and stamina colours from the rest of the family, each with a corner marker as well as a coloured border — so a player sorting by rarity is reading two signals, and neither of them is competing with the item art in the middle of the slot.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x. The slot interiors are transparent, so whatever you render behind the grid shows through instead of a baked background colour.

Download

Direct link · no sign-up · no wait page
Download ZIP46 kB

Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readme

Files included in this pack
FileFormatSizeDownload
Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP46 kBGet →
Empty slot, editable SVGSVG1.6 kBGet →
Selected slot with corner ticks, editable SVGSVG2.1 kBGet →

How to use it

  1. Lay the slots out on a 88 px pitch — the 84 px sprite plus a 4 px gutter — and the borders stay one pixel apart instead of doubling up.
  2. Draw the item icon centred in the slot at roughly 59 px; the inner recess is 78 px, so anything larger will touch the border and lose the frame.
  3. Swap the whole slot sprite for the selected and locked states rather than overlaying a tint, because the corner ticks and hatching are part of the sprite.
  4. The rarity frames are drop-in replacements for the empty slot — same bounds, same recess — so a rarity change is a single texture swap with no layout change.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Amberterm Inventory Slots — 84px grid" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/amberterm-inventory-slots