← Back to Blog

Design & Creative | Jul 24, 2026 | 6 min read

Where Should Game UI Artists Keep HUD Icons?

By Khushi Yadav

Where Should Game UI Artists Keep HUD Icons? — Edge Drop Guide

HUD work is a small vocabulary used constantly: health, ammo, ping, interact, downed, objective. During a sprint the same ten tiles move between Figma, Photoshop, the engine, and a Discord channel with the technical artist. The temptation is to pin them all in Win+V. Microsoft's list is 25 items, 4 MB, text / HTML / bitmap, unpinned gone at restart. An atlas is a file. A Figma component set is a library. The clipboard is only the pull-tab for the icons in play this week.

Source of truth

Pick one:

  1. Figma component set with variants (default / hover / disabled / enemy-tinted). Official Figma: create component (Ctrl+Alt+K on Windows), add variants, publish if other files need them. Instances update. Screenshots do not. When Figma Components Replace Copied Assets
  2. Named files in the game repo (Content/UI/Icons/icon_health.png) that the engine imports
  3. A texture atlas the engine or UMG/Unity uGUI actually samples

Photoshop PSDs and Affinity files are working files. They are not what the GPU draws. Best Clipboard Setup for Photoshop Users. Affinity Photo and Designer on Windows: Paste Notes.

The sprint pull-tab

The "pull-tab" is a short, named set sitting next to the DCC:

sprint-34-hud/
  icon_health.png
  icon_armor.png
  icon_ping.png
  icon_interact.png
  hex.txt

Rules:

Win+V may pin two bitmaps and the hex list if they are under 4 MB. That is the tab. When the sprint ends, unpin. The repo keeps the files.

A hover shelf that drags files into Unreal's Content Browser or Unity's Project window matches HUD work better than a modal history popup. Edge-Drop is optional for that drop. The engine still needs an import on disk.

Figma and engine hops

Figma Copy as PNG is 2× by official docs. That can be correct for a 64-pt icon (128 px). Confirm. Copy as SVG is useful if the engine or a mid-tool accepts SVG; many runtime HUDs do not. Export PNG for the importer.

Desktop versus browser paste is a known Figma split. Do not debug the engine because a web tab would not accept a Photoshop DIB. Export, then import. Figma Desktop vs Figma Web: Paste Behavior Differs. Figma resizes pastes over 4096 px — irrelevant for 128-px icons, relevant for a full HUD screenshot used as layout ref.

Layout refs for the HUD mock belong in ref\ or PureRef, not mixed with the icon files. Blender and 3D Apps: Reference Images on the Side if a 3D viewport is the other monitor. Mood Boards in PureRef vs a Clipboard Shelf.

Atlases versus loose icons

Some pipelines pack an atlas each cook. The source of truth is still the individual icons (or the Figma set). Do not edit pixels only on the atlas unless the pipeline says so. Do not keep the atlas as the only copy in Win+V — it will exceed 4 MB or flatten badly.

When handing a new icon to engineering, attach the named file and the Figma component link. How to Hand Assets to a Developer Without Slack Soup. Discord paste is review. Avoiding Compressed Chat Images in Final Decks.

Motion and states

A "ping" that pulses is a motion deliverable plus a still. After Effects: Save Frame As for the rest pose; render the loop as a file. Copy Frame to Clipboard is for the #temp channel. Motion Designers: Still Frames and Loop GIFs.

Do not ship a GIF as a HUD icon unless the runtime is a web overlay that asked for one.

Personal kits versus game IP

Emotes for the studio stream are a personal kit. Game HUD is project IP. Keep them in different folders so a Twitch badge does not land in the Content Browser. Building a Personal Sticker and Icon Kit.

Client / publisher concept art of the HUD is review material with an end date. Client Feedback: Collect Marked-Up Shots in One Place.

Engine-side note (without inventing editor features)

Unreal and Unity import files from disk. They do not read Microsoft clipboard history as a texture library. If an editor happens to accept a paste, treat it as a scratch import and immediately resave to the correct content path so source control sees it. A pasted texture that exists only in an unsaved editor buffer is the game-art version of a desktop PNG.

Sprint-end checklist

  1. All icons used in the build exist as files under the content path
  2. Figma variants match those files
  3. Atlas rebuilt if the pipeline requires it
  4. Win+V unpinned and cleared
  5. Discord review images not copied back into the repo

Eagle, Billfish, and Asset Managers vs Clip History if the team has years of unused icon experiments — tag them in a DAM, do not pin 25 of them.

Worked example: replacing the health cross

  1. Design icon_health as a Figma component with Default / Low / Empty variants
  2. Export 128 PNG (and 256 if the project uses 2×) into Content/UI/Icons/
  3. Import / refresh in the engine so source control sees the file
  4. Technical artist updates the atlas cook if required
  5. Discord post includes the path, plus a preview for humans
  6. Pin nothing. The pull-tab folder sprint-34-hud/ can keep a copy of the three states for the week, then delete

If design iterates twice a day, overwrite the same filenames so the engine path is stable. Do not create icon_health_FINAL2.png in history.

Troubleshooting

SymptomFix
White fringePremul vs straight alpha mismatch; fix export, not a clipboard format
Icon crisp in Figma, soft in gameWrong size or the chat preview was imported
Variant missing in buildInstance not swapped; PNG of the old state was leftover
Win+V has last week's pingUnpin; it is not source control

HUD icons are a vocabulary. Vocabularies live in libraries and repos. A pull-tab is allowed to be Win+V or a hover shelf for the ten words in this sprint. At the milestone, put the words back on the shelf labeled Content/.

Windows limits on the HUD desk

A 128-pixel icon usually fits in history. That is how the pull-tab idea starts. Then the set grows to thirty states, someone pins them, and the panel is a junk drawer with no names. Microsoft still only offers 25 slots and no folders.

Keep the sprint folder and the Figma component set. Use Win+V for hex and for one or two tiles that are being compared this hour. Import into the engine from disk so Perforce or Git sees a path. A pasted texture that never hit the content tree is not in the build.

Color-key icons (friendly blue versus enemy red) are variants, not two clipboard bitmaps with no names. If the shader tints a white source, export the white source once and document the tint in the design doc. If each faction is a separate PNG, name icon_ping_friendly.png and icon_ping_enemy.png and keep them in the same pull-tab folder for the week. Do not let Discord compress them back into the Content Browser.

Resolution notes belong in the same design doc: source size, import compression, and whether the atlas padding is 2 or 4 pixels. Those facts will not survive in Win+V. They will survive in the repo next to the icons. Write them down once per sprint.

Related reading

Sources

Khushi Yadav
Written by Khushi Yadav · Author & Content Writer

Khushi Yadav is a B.Tech Computer Science Engineering student interested in technology, software, and exploring practical applications of computer science. She enjoys learning new concepts and contributing to technology-focused projects.

GitHub · LinkedIn

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge-Drop vs Win+V · Support

Free · Lightweight · Privacy First
Find us on CodeHype