Creating Icons and UI Elements for Mobile Games

Creating Icons and UI Elements for Mobile Games

Game UI is not web icons or corporate UI. It must work on screens from 4.7" to 6.7", remain readable during active gameplay (while the player watches the action, not the interface), and convey the game's style without text. Our team has 5 years of experience in game UI: over 30 projects, from hyper-casual to RPG. The key pain points are texture packing without performance loss and a consistent style across all screens. Errors in 9-slice or atlases lead to memory overuse and FPS drops. Let's dive into how to avoid this.

Minimum tap target — 44×44pt — Apple HIG.

Technical Requirements for Game UI

Sizes and Density

Minimum tap target per Apple HIG is 44×44pt. For action game buttons, 60×60pt or larger is better—players tap without looking. Small inventory icons: from 64×64px to 128×128px depending on screen density.

Why 9-Slice Is Critical for Buttons?

Buttons and frames aren't simply stretched—they scale via 9-slice: corners are fixed, edges stretch. In Unity, Sprite Editor → Sprite Border defines the borders. One 40×40px button with 9-slice works for an 80×200px button without distortion.

Sprite Atlas: Packing UI

All UI elements of one screen go into one atlas. Unity UI → Canvas → Render Mode: Screen Space Overlay draws everything in one pass if using one Material/Atlas. Separate atlases for HUD (always on screen) and inventory (rarely opened).

Pixel Density Settings

For pixel art UI: Filter Mode: Point, Compression: None. For vector-drawn UI: ASTC 6x6 works fine. Icons with thin lines (1–2px) handle ASTC poorly—use ASTC 4x4 or no compression.

Typical Game UI Elements

HUD: Persistent Interface

Health bar, mana, experience, score, timer—always on screen during gameplay. They should be minimally invasive: occupy screen edges, not cover the game area. Safe area on iPhone with notch is always considered.

Item Icons: Frame System

Consistent frame + unique item. System: frame by rarity (gray—common, blue—rare, gold—legendary) + item icon on top. Frames—one atlas, item icons—separate (added via content patches without reworking the frame atlas).

Buttons: States and Animation

Normal, Pressed (scale 0.95 + tint), Disabled (opacity 50%). In Unity Button: ColorTintTransition or AnimationTransition with animation via Animator. For critical buttons (buy with real money) — Highlighted state with glow effect.

From Practice: RPG Collector, Unity

Item icons were made as separate PNGs without an atlas—200 icons × 2 draw calls each = 400 extra draw calls in the inventory screen. FPS in inventory dropped to 40. After packing into 2 atlases 2048×2048 — inventory draw calls became 8, FPS reached 60.

How Atlas Packing Affects Performance?

Using atlases directly reduces draw calls. Here's a comparison for a typical inventory screen:

The savings are obvious—correct packing frees resources for gameplay. The cost of a single item icon with frame ranges from $10 to $30 depending on complexity.

Animated UI Elements

Particle Effects in Canvas

Canvas Particle System in Unity—particle system working in Canvas space. For coin collection, level up effects, rewards. Sort Layer should be above game objects but below the main HUD.

Tween Animations: DOTween

DOTween (Unity) or LeanTween is the 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 gain: DOTween.Sequence() with Move + Fade.

Fonts in Game UI

Game font is part of the art style. TMP (TextMeshPro) in Unity is the standard—SDF rendering is readable at any scale. Cyrillic fonts require separate TMP Font Asset generation with a Cyrillic Character Set (Window → TextMeshPro → Font Asset Creator). Fallback fonts for emoji or special characters.

Process and Scope

What's Included in the Project

• Item/character/ability icons in a 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 icons for iOS and Android (including adaptive)
• Export at correct sizes + configured atlases for Unity/Godot
• If needed: animated elements (reward icons, effects)

Estimated Timeline

Basic UI kit for one screen (10–20 elements): 3–7 working days, starting from $500. Full UI kit for a game (HUD, inventory, menus, shop, item icons): 1–3 weeks. Cost is calculated individually, roughly from $1,500 to $4,000 depending on complexity. Contact us—we'll evaluate your project in 1 day.

Step-by-Step UI Creation Process

1. Define stylistic direction and gather references.
2. Create basic shapes in vector or raster.
3. Test on a real device considering safe area and density.
4. Pack into atlases with correct 9-slice.
5. Export with settings: ASTC for textures, Point for pixel art.

What Export Formats Are Optimal for Different Icon Types?

Order an evaluation of your project — get a consultation on atlas packing and style.