How to set a custom icon for your custom visual element in UI Toolkit?

I am creating a set of my own custom visual elements in C# to be used in ui-toolkit.
I want to show them with a custom icon when I drag them and use them in my ui-toolkit builder.
Each unity visual element has its own icon so that you get a better view in the visual tree.
So I know for sure it is possible, but I do not know how and could not find anything online.
Would appreciate if you could help me with that.

Hi, @ehsanershadi
This is a common practice when developers only make icons for built-in components. And unfortunately, this is the case.

// Decompiled with JetBrains decompiler. Class: BuilderLibraryProjectScanner
CreateItem(..., iconName: "CustomCSharpElement" ...

The decompiled code shows that the icon value for custom elements is hardcoded.


The only thing you can do is redefine this default icon for all custom elements.
To do that, you should create in your assets folder the following folder structure (“Dark” folder for dark theme, “Light” for light):

Editor Default Resources/UIBuilderPackageResources/Icons/Dark/Library/

Then, put your .png texture in the Library folder and name it CustomCSharpElement@2x or TemplateContainer@2x for the default uxml file icon.

Result