> For the complete documentation index, see [llms.txt](https://wiki.redmodding.org/cyberpunk-2077-modding/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/custom-in-game-icons.md).

# Custom in-game icons

## Tools needed:

[Wolvenkit ⇗](https://wiki.redmodding.org/wolvenkit/getting-started/download)\
[Paint.net ⇗](https://www.getpaint.net/download.html)

## Preview images

Okay, now you've added something! But it doesn't have a preview icon yet - you'll have to add this manually. For this purpose, you'll have to edit an image.

{% hint style="warning" %}
For a guide how to ensure image transparency, see [here](/cyberpunk-2077-modding/modding-guides/textures-and-luts/images-importing-editing-exporting.md) ⇗.
{% endhint %}

Cyberpunk uses **xbm** as format for its textures. These textures are then **mapped** (divided into slices) by **inkatlas** files. The individual slots can then use these individual slices for various purposes, such as UI elements like phone call icons and image previews.

{% hint style="info" %}
If you want to use the in-game previews, you can find them under `base\gameplay\gui\common\icons\items`
{% endhint %}

### Setting up the files

Download the template archive:\
\
[**Template Download ⇗**<br>](https://mega.nz/folder/cxREnZoa#oCM70gDEgE0UbNTLsr71_A)\
This includes the following files:

| Template                      | Size of slot image |
| ----------------------------- | ------------------ |
| 5\_outfits                    | 160x320 (x5)       |
| 5\_weapons                    | 360x120 (x5)       |
| 40\_items\_inkatlas\_template | 160x160 (x40)      |

<figure><img src="/files/DjvqPWXoQao7rG0Apmyb" alt=""><figcaption><p>The template provided contains these folders</p></figcaption></figure>

**Template Credits: Apart**

{% hint style="info" %}
This guide assumes you already have a collection of pre-made icons. If you don't and are unsure where to begin, you can refer to [The item addition guide ⇗](https://drive.google.com/file/d/1aQjb8MpimB9LDNl7y1iTXH13MUvMrKsH/view), specifically the "Making the icon" section for guidance.
{% endhint %}

From the template file, choose "<mark style="background-color:blue;">40\_items\_inkatlas\_template</mark>" and paste both the **.inkatlas** and **.xbm** files into a folder of your preference within your Wolvenkit project.

In this guide, we'll use the `tutorial\ops` folder as an example.\
\
We are renaming both files to `preview_icons` to avoid confusion in the future:

<pre><code><strong>YourWolvenkitProject
</strong><strong>  source
</strong><strong>    archive
</strong><strong>      tutorial  
</strong>	ops		   
      	  - preview_icons.inkatlas  
      	  - preview_icons.xbm      
</code></pre>

1. Export `preview_icons.xbm` via the **Export tool.**
2. Open `40_item_template.pdn` (Provided on the template archive) in [**paint.net**](https://www.getpaint.net/download.html) and put all your icons in.
3. Once you're done, hide the background layer and overwrite the file you've created in Step 1:

```
<yourModDirectory>\raw\tutorial\ops\preview_icons.png
```

4. Import the file using the **Import Tool.** Make sure that "IsGamma" under the Import tool options is turned **off**, everything else should already be OK.\
   You can now open `preview_images.xbm` in Wolvenkit and see your new, edited items.
5. Link the **xbm** file to the **inkatlas:** copy the relative path (right click on the file -> "copy relative path") and paste it on the texture slot on the **inkatlas** (image A)
6.

```
<div align="left" data-full-width="true"><figure><img src="../../.gitbook/assets/image (209).png" alt=""><figcaption><p>Image A</p></figcaption></figure></div>
```

7. *<mark style="color:red;">(Optional)</mark>* If you want to connect the **inkatlas** with your item, refer to the [ArchiveXL **⇗** ](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators/modding-guides/custom-icons-and-ui/adding-items-preview-images)guide for detailed instructions.\
   \
   In the YAML file created for your item, include the path in the "icon" section (Image B).\\

```
  icon:
    atlasResourcePath: base\40_item_template.inkatlas
    atlasPartName: slot_01
```

<figure><img src="/files/eqfxMCobsFS7aus0V7bm" alt=""><figcaption><p>Image B (Optional)</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/custom-in-game-icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.