# Your own HUD icons

## Summary

**Published:** July 15. 2023 by [MxOrcBoi](https://app.gitbook.com/u/YRvTJDa38nMHXIZUnmSdbzZv4lw2 "mention")\
**Last documented edit:** Mar 24 2024 by [mana vortex](https://app.gitbook.com/u/NfZBoxGegfUqB33J9HXuCs6PVaC3 "mention")

This guide tells you how to add a custom HUD icon for a weapon. It is a subsection of the [weapons](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/items-equipment/adding-new-items/weapons "mention") guide, but since the same principle applies for all parts of the UI, it can be used standalone.

## The final result

<figure><img src="https://1427525421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gzcGtLrr90pVjAWVdTc%2Fuploads%2Fgit-blob-bf26424bf486cb553fcabcd536708b0ca98831dd%2FScreenshot%202023-07-09%20231525.jpg?alt=media" alt=""><figcaption><p>Custom HUD created for the rebar club.</p></figcaption></figure>

## Step 1: Setting up the files

We need an [.inkatlas](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators-theory/files-and-what-they-do/file-formats/game-icons-the-inkatlas-file) file and a [texture](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators-theory/files-and-what-they-do/file-formats/materials/textures-.xbm-files).

1. Download the correct template from the wiki's [github repository](https://github.com/CDPR-Modding-Documentation/Cyberpunk-Modding-Docs/tree/main/_resources_and_assets/icons). For a hudicon, that's [weapons\_hudicon.zip](https://github.com/CDPR-Modding-Documentation/Cyberpunk-Modding-Docs/blob/main/_resources_and_assets/icons/weapon_hudicon.zip)
2. Extract both files to a fitting subfolder in your Wolvenkit project.

Now we need to [custompath](https://wiki.redmodding.org/cyberpunk-2077-modding/items-equipment/custompathing-assets#inkatlas) those files:

1. Open your `.inkatlas` file
2. Open the `slots` array
3. Click on each slot and set the value to your texture's relative path

<figure><img src="https://1427525421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gzcGtLrr90pVjAWVdTc%2Fuploads%2Fgit-blob-ba34fd033fd33b2a2e5e247b9e45532740094e5e%2Fcustompathing_inkatlas.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Optional: re-name your slot**

If you're cool with your slot's name being `your_custom_hudicon`, you can change its name:

1. Expand the first slot (the one with the number 0)
2. Expand its list of parts
3. Select the first entry `your_custom_hudicon` and change its name to whatever you want to use in the yaml

## **Editing the texture**

[Export](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/textures-and-luts/images-importing-editing-exporting) your .xbm (texture) via Wolvenkit, then edit the resulting .png in chosen your image editor of choice.

* For more info on texture editing (and transparency!), check [images-importing-editing-exporting](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/textures-and-luts/images-importing-editing-exporting "mention")
* For a (far) more detailed guide, check [creating custom inventory icons](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/adding-items-preview-images)

**Once you are done,** [Import](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators-theory/3d-modelling/exporting-and-importing-meshes) your PNG over the xbm with those settings:

<figure><img src="https://1427525421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gzcGtLrr90pVjAWVdTc%2Fuploads%2Fgit-blob-af9a0a38a62379563e300bf7bad45d2ff790f029%2FScreenshot%202023-07-09%20232152.jpg?alt=media" alt=""><figcaption><p>HUD Icon import settings.</p></figcaption></figure>

4. Edit the inkatlas file as in the [icon creation guide](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/adding-items-preview-images#hooking-up-the-inkatlas).

## Editing the .yaml file

Now that you have a custom preview icon, it's time to hook it up. You do this by editing the .yaml file.

You'll find written instructions below the screenshot.

<figure><img src="https://1427525421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4gzcGtLrr90pVjAWVdTc%2Fuploads%2Fgit-blob-fb300dcfeda1ff603fd35fc57a04d8cd12bf54ad%2Fyamlhudiconweapon.png?alt=media" alt=""><figcaption></figcaption></figure>

#### The base record

Add a `HUDWeaponIcons` entry at the root level of your .yaml (no indent). Give it a name, such as `HUDWeaponIcons.TheFallout` in the screenshot above.

It has the following properties (indent level 1):

<table><thead><tr><th width="222">Key</th><th width="248">Value</th><th>Explanation</th></tr></thead><tbody><tr><td><code>$type</code></td><td><code>gamedataUIIcon_Record</code></td><td>This tells the game that it's a UI icon</td></tr><tr><td><code>atlasResourcePath</code></td><td>path/to/your/file.inkatlas</td><td>relative path to your inkatlas file (right-click it in Wolvenkit and select "Copy relative path")</td></tr><tr><td><code>atlasPartName</code></td><td>slot_02</td><td>name of the icon's slot in the inkatlas. If you don't know it, see <a href="../adding-items-preview-images#hooking-up-the-inkatlas">here</a>.</td></tr></tbody></table>

#### Making the weapon use it

Add a new property to the weapon that refers to the record you have created above:

| `hudIcon` | `HUDWeaponIcons.TheFallout` |
| --------- | --------------------------- |

That's it! After starting the game,