Browse games

Browse games

My library

My library

My content

My content
My account
mod.io

Making a Class Icon (with templates)

Report guide
Share

Guide

This guide will explain how to set up an image corresponding to custom character generation options: classes, races (and the corresponding sub- options), and gods.

Formatting Images

Classes

There are two kinds of class icons: standard and hotbar.

The standard image (300x300) has a background, examples of which can be seen in the Templates section. A character's main class is shown on their character sheet and in their party outliner tooltip, and their current class or subclass is shown in the Spellbook tab.
Artistically, the size of the "outline" (which is actually transparency) of an icon upon the background varies in size among official examples. 4.5 pixels (at 300px resolution) seems to be the upper limit of the outline thickness.

The standard image for the wizard class, a grimoire on a blue badge.

The hotbar image (112x112) appears on the hotbar's inventory button and in most character generation screens. It does not have a background, and the expected margins are different.
In most cases, you will want to resize your class icon to 10/17 (~60%) of its original size, then fit it onto a 112x112 image.
If your icon is particularly long and thin, either horizontally or vertically, then you might instead crop your image to your content instead of trying to replicate the margins. I formatted the icon for the Magic Knight this way.

The hotbar icon for the Wizard class, a grimoire with stars.The hotbar icon for the Magic Knight school, a sword glowing with electricity.

Templates

A set of blank subclass badges.

If you want to make a class icon that matches the default style (instead of just feeding the game whatever slop comes out of an AI), BG3 Blank Class Icon Template by Ttano is a fantastic resource to start with.

If you're just looking to make a subclass, then all you need to do is match your colors to the class you're adding it to, then skip ahead to the Folder structure section.


Empty martial class borderEmpty arcane class borderEmpty primal class borderEmpty bard class border


If you want to make a full class, then I have provided a set of templates (see above images) based on the different borders full classes have. These images are credit Larian, Ttano, and me (DPh Kraken).

To add a new colored background from the Class Icon Templates, you will need to scale that background from 300x300 to 264x264 pixels.

You can download my GIMP document (.xcf) with layer masks and separated borders here:

Nexus Mods
Discord: Larian Studios
Discord: BG3 Modding Community

 

Other CC Icons: Races/Backgrounds/Gods

Race, background, and god icons are 300x300 images. They are pure white with transparency, with the brown effect being applied by the engine.

This is a small copy of the Seldarine drow icon from bg3.wiki, showing the pure white coloration and large margins.

Folder Structure

Due to their internal similarities, subclasses and subraces use the same folder paths as the main object.

Class Icons

The images for a given class are stored here, where <class name> represents the internal name of the class or subclass.

  • /Data/Mods/<modname>/GUI/Assets/ClassIcons/<class name>.dds
  • /Data/Mods/<modname>/GUI/Assets/ClassIcons/hotbar/<class name>.dds

As well as low-resolution copies with matching paths:

  • /Data/Mods/<modname>/GUI/AssetsLowRes/ClassIcons/<class name>.dds
  • /Data/Mods/<modname>/GUI/AssetsLowRes/ClassIcons/hotbar/<class name>.dds

CC Icons

Race and god icons only need one image, with standard and low resolution copies. As mentioned earlier, <name> refers to the internal name of your race/subrace, background, or deity.

  • /Data/Mods/<modname>/GUI/Assets/CC/icons_races/<race name>.dds
  • /Data/Mods/<modname>/GUI/Assets/CC/icons_deities/<deity name>.dds

The copies in /AssetsLowRes/ for completeness:

  • /Data/Mods/<modname>/GUI/AssetsLowRes/CC/icons_races/<race name>.dds
  • /Data/Mods/<modname>/GUI/AssetsLowRes/CC/icons_deities/<deity name>.dds

Background Icons

Icons for backgrounds require ImpUI. They do not have a clean internal name, so you must use their <background guid> as the filename. Otherwise, they match other CC icons. (Thanks bib-qwerty-san!)

  • /Data/Mods/<modname>/GUI/Assets/CC/icons_backgrounds/<background guid>.dds

Low resolution background image:

  • /Data/Mods/<modname>/GUI/AssetsLowRes/CC/icons_backgrounds/<background guid>.dds

Importing DDS

If you have properly-encoded .dds images, you can add them to /GUI/Assets/ and /GUI/AssetsLowRes/.

For more information, see the official guide: Adding New Classes#Class Icon.

Importing PNGs

The toolkit provides another option for adding icons. You can easily import .png images with the correct filenames into your mod..

Add the corresponding images to the folder you want in /GUI/Assets/ (you don't need to add low-res assets, the game will render them automatically)

In the Editor, go to Project > Convert UI Assets…

In Add files... select the images you want to import. You will need to do this for each folder.

In Output subfolder, you will want to add the corresponding path, provided here for convenience:

  • ClassIcons
  • ClassIcons/hotbar
  • CC/icons_races
  • CC/icons_deities
  • CC/icons_backgrounds

When you hit OK, the game will render your icons in .dds form and write metadata for it.

The toolkit should automatically update with your character icon! If it does not appear, then save your work and restart the editor.

Here's an example of a class icon I implemented using these steps, using an image from Paizo Publishing.

An example of a custom class icon in the character creator.

Discussion
10 comments

Log in to join the discussion!
I can't get this to work, following all the steps (I'm creating a subclass for wizard and the icon won't load). Used IMP UI as a dependency as listed below. Could use some help if anyone is having the same issue with the above.
Thank you for making this guide, I was able to make a couple of deities and match cool looking icons with them. I'm still trying to figure out how to add custom tags for them on the character screen, but I appreciate you a lot for helping me get this far!
This doesn't work for me. I followed every step to import the PNG files, the folders were made, the .dds shows up in the folders. But nothing shows up in the character creation in game. *Edit: I wanted to add that I am making a subclass. The class and everything else works fine just the icon doesn't show up in game despite following every step of this and the class creation tutorial. **EDIT AGAIN: I solved it! To anyone who came down here looking how to solve the no icon appearing even if you follow every step correctly! In the toolkit go to: Project -> Project Settings -> Dependencies Scroll to locate ImpUI in the list and make sure you set that as a dependency. Before you save anything just make sure you run the test within the toolkit and if your icon loads, you did it right.
In order for the deity to show up, you need to add or create a deity. Before you import any images or start doing anything like that, you need to first create the deity. In order to do that, you need to open UUID object editor in Glasses. Once you open that, you scroll down and look for "gods" and you would click the "gods" category, and a table will pop up enabling you to put in the deity you want. The name box will need to be entered with the name of the deity in lowercase letters so it can match with the PNG file, the UUID will pop up after you enter the name, and then the display name box will have the actual name of the deity that pops up in the deity screen. Then for the description box, you will put in the description of deity. You don't need to put tags, nor any mergedinto stuff. Once you finish that, you save all, export. Now after that, you can create the folders you need to create. Once you create the folders, you can start importing the PNG. The PNG needs to have transparent background, have clear outlines, and needs to be 300x300. Not every image will work, you need to find the "perfect" image for the icon. If it doesn't work, you might need to crop it a little around the edges to make it fit inside the deity screen. Once you find the image, import it, test it in mod toolkit using switch game editor, and the deity should pop up with the image that you have. If you are still confused, I am going to upload a video of these steps soon.
I'm having the same problem with all the mods I've made and not even this method solved it for me :(
Anybody tried to create a new background? My Background shows up, but my Icons won't load. I tried to put them into CC/icons/backgrounds as well as CC/icons_backgrounds but neither of them work 8Since both paths are displayed in the tutorial and I did not know which is the correct one :3). Also which name should be used? The Display Name, as the Backgrounds table doesn't have a "name" column. I'm a bit out of ideas, even tried the TAG name.
Hello, same for me. The only solution I have found is to put your background icon like this: Assets/CC/icons_backgrounds/{background guid}.DDS With this way, they will only appear if you use ImpUI, but's it's a temporary solution.
Legend for making this. Will definitely need to make time to get some more proper icons for my mods.
This is really useful!
Thanks for the guide will use it for my class.
Last updated
88d
Reading time
5 min read
Views
2,439
Comments
10
Summary

How to set up an image for your custom class, subclass, race, god, or background.

Author
DPhKraken
DPhKraken
Follow DPhKraken

mod.io uses essential cookies to make our site work. With your consent, we may also use non-essential cookies to enhance your experience and understand how you interact with our services. The latter will be set only upon approval. or read our Cookies Policy.