Creating Icons and UI Elements for Mobile Games
Game icons and UI elements aren't web icons or corporate UI. Game interface must work on 4.7" to 6.7" screens, be readable during active gameplay (while player watches action, not UI), and convey game style without text.
Technical Requirements for Game UI
Sizes and density. Minimum tap target per Apple HIG—44×44pt. For action-game buttons—better 60×60pt or larger, player taps without looking. Small inventory icons—from 64×64px to 128×128px depending on quantity on screen.
9-slice (9-patch). Buttons and frames don't simply stretch—they scale via 9-slice: corners fixed, edges stretch. In Unity Sprite Editor → Sprite Border sets boundaries. One 40×40px button with 9-slice works for 80×200px button without distortion.
Sprite Atlas for UI. All UI elements on one screen—in one atlas. Unity UI → Canvas → Render Mode: Screen Space Overlay renders everything in one pass with single Material / Atlas. Different atlases for HUD (always on screen) and inventory (rarely open).
Pixel density. For pixel art UI—Filter Mode: Point, Compression: None. For vector-drawn UI—ASTC 6x6 is fine. Icons with thin lines (1–2px) poorly handle ASTC—need ASTC 4x4 or no compression.
Types of Game UI Elements
HUD (Heads-Up Display). Health bar, mana, experience, score, timer—always on screen during gameplay. Should be minimally invasive: occupy screen edges, not overlap game area. Safe Area on notch iPhones—always account for.
Item Icons. Identical frame + unique item. System: frame by rarity (gray—common, blue—rare, gold—legendary) + item icon on it. Frames—one atlas, item icons—separate (added with content patches without reworking frame atlas).
Buttons. Normal, Pressed (scale 0.95 + tint), Disabled (opacity 50%). In Unity Button: ColorTintTransition or AnimationTransition with animation via Animator. For critical buttons (buy for real money)—Highlighted state with glow effect.
App Icon. Separate task. iOS requires set: 1024×1024 (App Store), plus automatically generated sizes via Xcode AppIcon asset. Android: mipmap-xxxhdpi (192×192), xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi. Adaptive icon Android 8.0+: foreground layer + background layer, foreground must have 33% padding from edges—system shell can crop to different shapes (circle, rounded square).
From practice: RPG collector, Unity. Item icons were separate PNGs without atlas—200 icons × 2 draw calls each = 400 extra draw calls on inventory screen. FPS in inventory dropped to 40. After packing into 2 atlases 2048×2048—inventory draw calls became 8, FPS—60.
Animated UI Elements
Particle effects in UI. Canvas Particle System in Unity—particle system working in Canvas space. For coin collection, level up effects, rewards. Sort Layer above game objects but below main HUD.
Tween animations. DOTween (Unity) or LeanTween—standard for game UI. Bounce on reward: transform.DOPunchScale(Vector3.one * 0.3f, 0.3f). Shake on error: transform.DOShakePosition(0.3f, 5f). Floating text on XP: DOTween.Sequence() with Move + Fade.
Fonts in Game UI
Game font is part of art style. TMP (TextMeshPro) in Unity—standard, SDF rendering readable at any scale. Cyrillic fonts require separate TMP Font Asset generation with Cyrillic Character Set (Window → TextMeshPro → Font Asset Creator). Fallback fonts—for emoji or special symbols.
What's Included
- Item / character / ability icons in unified style
- Frames by rarity / type
- HUD elements: bars, counters, timers
- Buttons in multiple states (normal, pressed, disabled)
- Panels, frames, dialog backgrounds with 9-slice
- App icon for iOS and Android (including adaptive)
- Export in correct sizes + configured atlases for Unity / Godot
- If needed: animated elements (reward icons, effects)
Timeline
Basic UI kit for one screen (10–20 elements)—3–7 working days. Complete UI kit for game (HUD, inventory, menu, shop, item icons)—1–3 weeks. Cost calculated individually.