# 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,


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/your-own-hud-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.