How to Add Custom Images and Overlays to Your HUD

Beyond rearranging vanilla elements, SpiffyHUD can display your own images and overlays on screen, which is useful for stream branding, custom crosshairs, or decorative frames.

Adding an Image Element

In the SpiffyHUD editor, add a new element and choose the image or overlay type. You will be asked to point the mod at an image file. Place your PNG in the appropriate folder the mod expects, then select it. Transparent PNGs work best so the image blends with the game instead of showing a hard rectangle.

Positioning and Scaling the Overlay

Once added, treat the image like any other HUD element: drag it, resize it, and set its anchor. For a custom crosshair, anchor it to screen center so it stays put regardless of GUI scale. For a corner logo, anchor it to the relevant corner. Adjust opacity if the mod exposes it, so the overlay does not obscure gameplay.

Layering and Animation

If your overlay overlaps other HUD elements, use the layer or order setting to push it behind or in front. SpiffyHUD also supports simple animations, so an image can fade, slide, or pulse. Keep animations subtle for gameplay overlays and reserve stronger motion for menus or intros. Test in a safe area before relying on it in combat.