find-sprites
Agents left to their own devices tend to ship raw text UI, emoji salad, or inconsistent asset mixtures. This skill exists because the ui-quality gate consistently fails when asset sourcing is treated as an afterthought. Source assets deliberately, in preference order, and commit to one visual direction.
Preference order
Work down this list. Only drop to the next tier if the current tier cannot cover your need.
Tier 1 — Installable icon and sprite packages
Lightweight, well-typed, import cleanly. Best for UI iconography, status effects, resource icons, and action buttons.
| Package | Use for |
|---|---|
lucide-react / lucide |
UI icons, buttons, controls, status (~1500 icons) |
@iconify/react / @iconify-json/* |
Broadest set — game-icons pack, emojione, twemoji, etc. |
@tabler/icons |
Clean outline style, good for minimalist UI |
heroicons |
Simple outline + solid, Tailwind-friendly |
For game iconography specifically, @iconify-json/game-icons (Delapouite/Lorc) is the single highest-leverage install:
npm install @iconify/react @iconify-json/game-icons
import { Icon } from "@iconify/react";
<Icon icon="game-icons:crossed-swords" width={32} />
<Icon icon="game-icons:fire-spell-cast" width={32} />
<Icon icon="game-icons:health-potion" width={32} />
~4000 game-themed icons covering weapons, spells, monsters, resources, status effects. Use this before anything else for room icons, spell icons, enemy representations, and resource bars.
Tier 2 — Web-searched free/open-license art
When you need actual sprites (not icons) — tilesets, character portraits, monster sprites, environment art.
Preferred sources (all free, all permissively licensed — always confirm the specific asset's license before shipping):
- OpenGameArt.org — CC0 / CC-BY tilesets, sprites, UI packs. Search "dungeon tileset CC0", "roguelike monsters CC0".
- Kenney.nl — huge, consistent, CC0 asset packs. "1-Bit Pack", "Roguelike/RPG Pack", "UI Pack". Single-author → visual coherence is free.
- itch.io free assets — filter by "free" and check each asset's license. Often CC0 or CC-BY.
- Game-icons.net — the web source behind the Iconify pack above. SVG download if you need edits.
Process:
- Pick ONE source pack for your core visual direction. Do not mix Kenney's 1-bit with Kenney's top-down pixel — pick one.
- Download the pack (or the specific sprites you need) into
game/public/assets/sprites/. - Record the source and license in
game/public/assets/LICENSES.md:- dungeon-tileset/ — Kenney.nl "Roguelike/RPG Pack" — CC0 - monsters/ — OpenGameArt "Pixel Monster Pack" by <author> — CC-BY - Reference assets via static paths:
<img src="/assets/sprites/monsters/slime.png" />.
Tier 3 — Generated placeholder art
When you cannot find a matching asset and time is short. Quality ranking:
- SVG drawn by hand (inline or file) — scales, sharp, themeable via CSS.
- Canvas-drawn shapes — works for simple top-down tiles, procedural dungeon cells.
- CSS-styled divs with gradients + borders — good enough for room-type differentiation.
- Emoji fallback — acceptable for status indicators and small UI accents only. Do NOT build your entire UI out of emoji — it reads as lazy even when consistent.
Tier 4 — Geometric primitives
Solid-colored rectangles, circles, borders. Counts against your UI-quality score even if used intentionally. Only acceptable for background panels or temporary placeholders you will replace before shipping.
Tier 5 — Raw ASCII / text-only
This is a gate failure. Do not ship text-only UI. If you are tempted to, go back to Tier 1 and install the game-icons pack — it takes 30 seconds.
Coherence over polish
One consistent visual direction beats a mix of high-quality assets from different styles. A game built entirely from Kenney's 1-bit pack looks intentional. A game mixing hand-drawn portraits, pixel monsters, and flat-vector UI icons looks broken — even if each individual asset is beautiful.
Before sourcing anything, decide:
- Perspective — top-down, side-view, or UI-only?
- Fidelity — pixel, vector, or illustrated?
- Palette — dark fantasy, bright cartoon, monochrome?
Then source only assets matching those three answers. If a must-have asset doesn't match, either adapt it (recolor, resize) or redraw the rest of your direction to match it.
Licensing
Always check the license. CC0 is the simplest — no attribution required, no restrictions. CC-BY requires attribution (include the author in LICENSES.md). Avoid CC-BY-NC (non-commercial) and CC-BY-SA (share-alike viral) unless you've confirmed your project's distribution model is compatible. Never ship assets of unknown provenance.
Failure modes
- Mixing styles. Pixel + vector + illustrated = incoherent. Pick one.
- Installing an icon pack and never using it. The install is the easy part. Actually replace placeholder text with
<Icon />in every UI surface. - Downloading a tileset without a license check. Ship-blocker if the license forbids the use.
- Deferring art to "after mechanics work." The UI-quality gate is scored on what actually ships. An unpolished build with working mechanics still fails the gate.
- Using emoji as the entire UI. Reads as a debugger, not a game.