MOBA skill icons live at the bottom of the screen, under a countdown timer, in the corner of the eye, during a team fight. Players have about two seconds to understand what an ability does and whether it is ready — often while dodging four enemy spells. No genre demands more from an icon, and no genre punishes unclear icons harder. Here is how MOBA skill icons are actually designed.
The 2-second test
Every MOBA icon must pass the 2-second test: a player who has seen the ability before should recognize it in two seconds at small size, with a countdown overlay on top, during combat. That is a brutal bar, and it changes the design priorities:
- Shape first: the ability's motion or effect must be readable as a silhouette
- One element: fire, ice, lightning, shield, dash — never a collage
- Motion language: projectiles fly, aoes burst, buffs glow, dashes streak
- Color coding: damage type and alignment as a background tint
If an icon needs reading, it fails. Recognition is the only goal.
Choose the concept, then the icon language
Before drawing anything, define the ability's concept in one noun and one verb: "fire that explodes," "ice that slows," "shield that absorbs." The icon then has a clear subject (fire) and a clear motion cue (burst). MOBA icons almost always communicate motion — abilities are verbs, and the icon shows the moment of the verb: the burst, the strike, the wave.
Common concept-to-icon translations:
- Projectile: an object in flight with a motion trail (arrow, bolt, fireball)
- Area burst: a central core with radiating lines or particles
- Dash/teleport: a streak or afterimages (two ghost copies)
- Buff/aura: a radiant core with orbiting sparks
- Shield/barrier: a shell shape around a core
- Summon: a portal, claw or shadow shape
Each of these reads as a distinct silhouette family, which is exactly what players need at a glance.
Damage-type color coding
MOBAs encode damage and resource types in color. The conventions are stable enough to rely on:
- Physical/attack: orange or steel gray
- Magic: blue or violet
- Fire: red-orange
- Ice: cyan-white
- Nature/poison: green
- Lightning: yellow
- Shadow/void: purple-black with a highlight
- True/pure damage: white or gold
Keep the damage color as the dominant hue of the icon, and keep the value high enough to read on the dark HUD background. A dark-purple shadow icon needs a bright violet core or a glowing edge, or it disappears behind the cooldown overlay.
Designing under the cooldown overlay
MOBA icons are seen through a cooldown sweep — a dark curtain that sweeps over the icon as the timer counts down. This overlay covers the icon from top to bottom in rotation, which means:
- No critical details in the top or bottom thirds — the overlay will hide them half the time
- Center-weighted composition: the core of the icon should sit in the middle band
- High contrast: the overlay darkens the icon, so icons need strong value separation
- Ready state must be obvious: when the sweep clears, the icon should feel visually brighter
A common professional trick: design the icon's key information in the center band, and put secondary decoration top and bottom where the overlay sweep lives.
Size and the mini-map of icons
Skill icons on the HUD are usually 32–48 px at 100% UI scale — small enough that every detail is a risk. The practical sizes:
- HUD skill slot: 32–48 px (author at 64–96 px)
- Cooldown-ready indicator: the icon brightening or a ring effect
- Kill-feed / combat log: 16–24 px — silhouette only
- Ability detail panel: 128–256 px — where details finally show
Design for the HUD size first. The detail panel is a bonus, not the design target.
Icon sets for a champion or hero
Each character usually has 3–5 abilities, and their icons must read as one set while staying distinct:
- Shared color language per character (a fire mage's icons are all warm-toned)
- Distinct silhouettes per ability (one projectile, one burst, one shield — never two bursts)
- Consistent frame and lighting across the character's set
- Signature accent: a recurring motif (flame, frost, rune) that identifies the character
The recurring motif is the hidden branding: even in a 16-pixel kill feed, a familiar motif tells players who cast the ability.
Common failures and fixes
- Too detailed: the icon reads as noise at 32 px → simplify to one shape and one motion cue
- Low contrast: disappears under the cooldown overlay → raise value separation, add an outline
- Ambiguous: could be fire or lightning → push the color coding to the conventional hues
- Mixed motion: static object with a burst background → choose one motion cue
- Too similar to a teammate's icon → differentiate silhouette family or hue
MOBA skill icons are speed-reading: a shape, a color, a motion cue — nothing more. Design for the 2-second test, keep the center band clean for the cooldown sweep, and let the conventional color coding do the talking. Players will thank you with faster reactions and fewer misplays.