Game UI Icon Workflow: From Figma to Unity and Unreal

A reliable HUD icon workflow keeps one source for each icon (a Figma component with variants for its states), exports named PNGs at the exact pixel size the engine imports, and brings those files into the engine from disk: as Sprite (2D and UI) textures packed into a Sprite Atlas in Unity, or through the Content Browser in Unreal. Pasted screenshots are fine for review in chat, but the engine and source control need files with stable names.

Step 1: Build each icon as a component with variants

In Figma, turn each icon into a component (select it and press Ctrl+Alt+K), then add variants for its states. Variants live together in one component set, and each has properties and values, for example state with default, hover, pressed and disabled, or team with friendly and enemy.

This gives you one place to change an icon. Mockups use instances, so they update when the component changes, and every export comes from the same source. When Figma components replace copied assets explains why that matters once a project grows.

Step 2: Export named PNGs at the engine's size

1. Decide the import size per icon with whoever owns the UI in the engine, for example 64, 128 or 256 pixels square.
2. Set each icon frame to that size in Figma, with the artwork centered and consistent padding.
3. Name layers so the export lands in the right folders. A slash in the layer name becomes a folder, so ui/icons/icon_health_default exports to ui\icons\icon_health_default.png.
4. Add a 1x PNG export setting to each frame and export them together. Figma's PNG exports always include an alpha channel.

Figma's Copy as PNG produces a 2x image, so a 128-pixel frame pastes as 256 pixels. That's fine for a review message and wrong for an import; export instead.

A naming scheme that sorts well and survives renames:

ui/icons/icon_health_default.png
ui/icons/icon_health_low.png
ui/icons/icon_ping_friendly.png
ui/icons/icon_ping_enemy.png

Keep the same file names when you iterate, so the engine re-imports over the existing asset and references don't break.

Step 3: Import into Unity

1. Copy the PNGs into your project's Assets folder (for example Assets/UI/Icons).
2. In the Inspector, set Texture Type to Sprite (2D and UI).
3. Turn on Alpha is Transparency for icons with transparent edges. It dilates the color channels to reduce artifacts around edges.
4. Decide whether to Generate Mipmap. Mipmaps help textures seen at a distance; screen-space UI drawn at a fixed size usually doesn't need them.
5. Pack the icons into a Sprite Atlas. If the atlas holds Canvas UI sprites, turn off Allow Rotation so packed icons don't appear rotated in the UI. Padding (default 4) keeps pixels from one sprite bleeding into its neighbours.

Step 4: Import into Unreal Engine

1. In the Content Browser, click Import, or drag the PNGs from File Explorer straight into the Content Browser.
2. Keep the imported textures in a dedicated folder such as Content/UI/Icons.
3. Open a texture in the Texture Asset Editor to adjust compression and other settings for UI use.

Unreal's documentation recommends power-of-two sizes (32, 64, 128 and so on) where possible: power-of-two textures can be mipmapped and streamed, while other sizes aren't streamed and don't generate mipmaps. Unreal imports PNG, TGA, PSD and several other formats, but not SVG, so export raster icons for both engines.

Review copies vs delivery files

Don't import images saved from chat: they may not be the size you exported, and transparency can be lost on the way. How to keep transparent PNGs transparent explains where alpha usually gets dropped.

Where the clipboard fits

Windows clipboard history (Win+V) stores bitmaps without names and doesn't store files, so it can't hold an icon set or stand in for source control. It's handy for the text side of the job: a color token, a frame name, a path.

During an iteration session, Edge Drop can keep the icons you just exported on a shelf at the screen edge, so you can drag them into Unreal's Content Browser or a review channel without going back to Explorer. How to stage sprites beside Unity or Unreal covers that setup in detail, and how to build a sticker and icon kit covers keeping personal icon collections separate from project assets.

FAQ

What size should HUD icons be?

The size they're drawn at on the target resolution, agreed with the engine side. For Unreal, power-of-two sizes such as 64 or 128 keep mipmapping and streaming available.

Why do my icons have a white or dark fringe in the engine?

Usually an alpha problem at the edges. In Unity, turn on Alpha is Transparency on the texture, and make sure you imported the exported PNG, not a pasted or flattened copy.

Can I import SVG icons directly?

Not into Unreal as a texture: SVG isn't in its supported texture formats. Export PNGs from Figma at the size you need.

Related reading

• How to Drag Sprites and Images Into Unity or Unreal
• When to Turn Copied Elements Into Figma Components
• How to Export @1x and @2x Images in Figma and Photoshop
• How to Hand Off Design Assets to Developers (Checklist)

Sources

• Create and use variants (Figma Help) — component sets, variant properties and values, Ctrl+Alt+K.
• Export static designs from Figma (Figma Help) — export settings and slash names as folders.
• Export formats and settings for static designs (Figma Help) — PNG always includes alpha.
• Copy and paste objects (Figma Help) — Copy as PNG at 2x.
• Sprite (2D and UI) texture type (Unity Manual) — texture type, Alpha is Transparency, Generate Mipmap.
• Sprite Atlas properties reference (Unity Manual) — Allow Rotation for Canvas UI, Padding default.
• Textures in Unreal Engine (Epic Developer Community) — importing via the Content Browser, supported formats, power-of-two guidance.

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