Chapter 4: Inventory Icons & Rarity Tiers

Created by Sarah Choi (prompt writer using ChatGPT)

Inventory Icons & Rarity Tiers for Prop Concept Artists: Readable States for On/Off, Open/Closed, Damaged, and Crafted

Inventory visuals are a second stage for your props: a condensed language that must carry class, state, value, and intent at postage‑stamp sizes. Done well, icons and rarity tiers become a quiet UX engine—speeding decisions, rewarding mastery, and reinforcing the world’s materials and brands. This article lays out a system for concept and production artists to design inventory iconography and rarity tiers that read cleanly across platforms and tie back to the physical prop’s states (on/off, open/closed, damaged, crafted).

Begin by defining the smallest truth. Decide your hard floors: the minimum render sizes (e.g., 24 px, 32 px, 64 px), the display modes (light/dark backgrounds, HDR, handheld), and the icon grammar (silhouette, interior detail, outline, frame, badge). Everything you author must survive those floors. Work at 400% and check a 1:1 preview constantly; if a cue doesn’t read at the floor, promote it to frame/badge, or cut it.

Silhouette first, always. Class icons (pistol, medkit, wrench, cell, case, vial) should be recognizable in a single color at 24–32 px. Use asymmetric forms and clear negative spaces to avoid mirror confusion. Keep perspective consistent across the set (orthographic side, three‑quarter, top) so shape logic is comparable. Reserve interior lines for category‑defining features only (revolver cylinder, E‑ink screen, cross plunger on medkit). If the world has brand families, echo their geometry (bevel angles, notch language) in the silhouette.

State overlays are your second layer. Do not redraw the whole prop to show state; add compact, consistent overlays that carry across the set. On/off states: a small ring or bar overlay in a fixed corner breathes (animated) or locks solid (static) in UI contexts that allow motion; in static sheets, use a filled vs. hollow ring. Open/closed states: a micro hinge chevron or “lid ajar” pictogram over the silhouette corner. Damaged: a fracture badge or diagonal crack overlay that avoids skull/violence clichés; keep it to one corner to prevent occluding shape. Crafted: a rivet/plate badge or tiny wrench/gear paired with a color‑band that signals aftermarket. Overlays must share stroke weight and live within a reserved safe zone so they never collide with rarity frames.

Frames and backplates carry rarity and slot logic. Separate informational channels: shape of the frame conveys slot/class (circle = consumable, hex = mod, square = equipment), color/value of the frame conveys rarity, and pattern/foil conveys faction or season. For readability and accessibility, pair color with geometry: Common = thin neutral keyline; Uncommon = thicker keyline with one notch; Rare = double line; Epic = chamfered corners; Legendary = crowned notch; Exotic/Artifact = unique silhouette with internal cutout. Keep rarity color ladders value‑spaced so they remain legible when desaturated; reinforce with micro‑patterns (hatch, dot, micro‑chevron) at 8–12 px pitch for colorblind users.

Backgrounds should stabilize, not compete. Use a neutral, low‑noise tile that harmonizes with the game’s UI chroma. In dark UIs, backplates can be 8–12% above black; in light UIs, they can be 8–12% below white. Add soft inner‑shadow to cradle the silhouette and a subtle radial to center attention. Avoid heavy textures that shimmer under scaling and TAA. If materials matter (wood, polymer, ceramic, alloy, crystal), reserve a small 10–15% area below the silhouette for a material chip—an oblong swatch with characteristic specular—that acts as a quick mnemonic without stealing the read.

Typography inside icons is risky. If you must include numbers (ammo count, size, tier), use tabular figures and a slashed zero, rendered at a separate overlay layer with stroke + shadow for contrast. Keep numerals out of the silhouette; place them in a corner token with a fixed baseline. Unit codes (mAh, PSI) belong in tooltips, not icons, unless your game is deliberately diegetic at inventory scale.

Color is a multiplier—use it for meaning, not decoration. Reserve saturated hue for state (on/armed = bright, off/safe = muted), rarity (frame/backplate), and damage (amber/red crack overlay). Use material‑aware palettes for silhouettes: a steel wrench reads with cool, tight highlights; a rubber grip reads with darker values and softer terminators. For crafted variants, introduce a mismatched accent stripe or tape color that harmonizes with the base class color to avoid “clowning.”

Animation can carry state without clutter. Where your UI supports motion, restrict it to the overlay channels: a slow 0.3 Hz breathing ring for online, a 1–2 Hz pulse on fault, a quick two‑frame flip for e‑ink status, a three‑tick sweep for progress. Keep duty cycles low to avoid fatigue and reduce GPU churn. Never animate the silhouette; it increases cognitive load and hurts recognition.

Rarity tier design is game economy as graphic system. Define tiers with both identity and statistical expectation. If your world uses Common/Uncommon/Rare/Epic/Legendary/Exotic, make each step feel like a material upgrade: Common frames are painted steel; Uncommon gains precise machining; Rare adds anodize and a subtle foil; Epic introduces gem‑cut bevels; Legendary adds a unique cutout or crown; Exotic breaks the frame silhouette. Tie audio/UI to tiers (e.g., a soft chime for Rare hover, a double‑tone for Legendary drop) but keep icons independent—readable without sound.

Do not rely on color alone for rarity. Provide shape and pattern redundancy. Offer a grayscale mode in your spec where tiers can still be distinguished: increasing frame thickness, notch counts, internal motifs. Publish a 1‑bit preview (black/white only) to pressure‑test.

Link inventory to world state through micro‑variants. An “on” battery cell icon uses the same silhouette but swaps a dim ring for a bright ring; an “open” case icon adds an ajar lid overlay; a “damaged” medkit uses the same silhouette with a crack badge and a missing corner chip; a “crafted” rifle magazine keeps silhouette but adds a riveted plate overlay and a taped stripe chip. Keep the base silhouette constant so the user’s learned recognition survives variant churn.

Category‑specific icon grammar keeps sets coherent:

— Power & Cells: tall canister/pouch silhouettes with polarity nub or contact plate. State: ring brightness, charge bars. Damage: bulge notch or thermal bloom chevron. Crafted: heat‑sink fin overlay.

— Tools & Kits: wrench, driver, scanner, welder silhouettes with dominant handle geometry. State: active glow at tip or screen token. Damage: bent‑shaft chip. Crafted: taped grip token.

— Containers & Cases: rectangle with latch nub and carry handle. State: open‑corner chevron. Damage: corner chip or strap fray notch. Crafted: plate/strap overlay.

— Med & Chems: vial, syringe, spray silhouettes with liquid fill chip. State: active = meniscus line + tiny bubble token. Damage: leak droplet overlay. Crafted: label‑tape micro strip.

— Ammo & Components: cartridge, fuse, gear silhouettes. State: armed = primer ring glow. Damage: dent notch. Crafted: stenciled code plate.

Stat and mod badges live on a third channel. Keep 12–16 px circular tokens that dock to frame corners: +DMG, +CAP, +ACC, +RES, with strict two‑letter codes or micro‑icons. Limit concurrent badges to two; beyond that, collapse into a “stack” dot and move detail to tooltip. Mod colors should be desaturated so they do not fight rarity.

Pixel discipline is production’s best friend. Snap strokes to the pixel grid; avoid sub‑pixel diagonals at floor sizes; choose stroke weights that map to whole pixels at 1:1. Use inner‑stroke construction for outlines so scaling preserves proportions. Prepare two optical sizes per icon (24–32 px small, 48–64 px large); simplify interior detail for the small cut. Export as vector‑backed sprites only if the engine renders vector crisp at target sizes; otherwise bake to PNG/ASTC with pre‑multiplied alpha and gamma‑correct downscales.

Atlases and materials keep things fast. Pack silhouettes, frames, and overlays in separate atlases so recolors and state swaps do not balloon memory. Share rarity frames across categories. Keep emissive masks in a dedicated atlas. Document pivot and token anchor points per frame shape so UI layout can place badges consistently without per‑icon offsets.

Localization touches inventory more than you think. Numbers, unit suffixes, and text badges expand in some languages. Keep text tokens external to icon textures; render them with the UI font so glyph coverage is stable. Avoid text in silhouettes entirely. Where numerals must appear (ammo counts), use locale‑aware formatting in the HUD, not embedded in the icon.

Testing is not optional. Build a “smallest truth” board: all classes, all rarities, all states at 24/32/64 px on light and dark, with and without motion. Desaturate to grayscale, blur by 0.5–1.0 px to simulate TAA/motion, and check recognition. Put the set in simulated store and loot screens; verify that rarities differentiate without eye‑burn and that state overlays are legible against busy backgrounds. Print a sheet for physical review; check from two meters—if you can’t tell Rare from Epic at a glance, increase geometry differentiation.

Ethics and restraint matter. Rarity frames should feel valuable without weaponizing attention; avoid constant motion, aggressive chroma, or casino‑like glitter. Make drop sounds and flashes polite by default; let “mythic” moments be rare by design. Do not mimic real‑world restricted marks. Respect cultural numerology and colors if your game localizes heavily.

Deliverables downstream teams love: 1) an icon grid spec (angles, stroke weights, padding, anchor points), 2) a rarity frame kit with grayscale and color ladders, 3) overlay tokens for states and mods with naming conventions, 4) two optical sizes per icon, 5) atlases (silhouette/frame/overlay/emissive) plus JSON keys, 6) a test board PSD/figma with auto‑desaturate/blur toggles, 7) usage examples (loot, inventory grid, tooltip, crafting), 8) accessibility notes (grayscale mode, colorblind safe pairs).

When inventory icons and rarity tiers are treated as a true system—silhouette for class, overlay for state, frame for value, badge for mods—you create a UI that feels inevitable. Players read faster, artists author variants with confidence, and props stay themselves from the workbench to the grid slot.