Editor icons

When a new class is created and exposed to scripting, the editor’s interface will display it with a default icon representing the base class it inherits from. In most cases, it’s still recommended to create icons for new classes to improve the user experience.

Creating icons

Inkscape editor. godot repository containing all the editor icons:

  1. git clone https://github.com/godotengine/godot.git

The icons must be created in a vector graphics editor in SVG format. There are two main requirements to follow:

  • File > Document Properties.
  • Lines should be snapped to pixels whenever possible to remain crisp at lower DPI. You can create a 16×16 grid in Inkscape to make this easier. editor/icons folder. The icon name should match the intended name in a case-sensitive manner. For example, to create an icon for CPUParticles2D, name the file CPUParticles2D.svg.

    Color conversion for light editor themes

    set of predefined color mappings. This is to ensure the icon always displays with a sufficient contrast rate. Try to restrict your icon’s color palette to colors found in the list above. Otherwise, your icon may become difficult to read on a light background.

    Icon optimization

    Because the editor renders SVGs once at load time, they need to be small in size so they can be efficiently parsed. Editor icons must be first optimized before being added to the engine, to do so:
  1. svgcleaner by downloading a binary from its Releases tab and placing it into a location in your PATH environment variable.
  2. svg_source.svg with the path to your SVG file (which can be a relative or absolute path):
  1. svgcleaner --multipass svg_source.svg svg_optimized.svg

--multipass switch improves compression, so make sure to include it. The optimized icon will be saved to svg_optimized.svg. You can also change the destination parameter to any relative or absolute path you’d like. Note While this optimization step won’t impact the icon’s quality noticeably, it will still remove editor-only information such as guides. Therefore, it’s recommended to keep the source SVG around if you need to make further changes.

Integrating and sharing the icons

editor/icons in the main repository. Recompile the engine to make it pick up new icons for classes. It’s also possible to create custom icons within a module. If you’re creating your own module and don’t plan to integrate it with Godot, you don’t need to make a separate pull request for your icons to be available within the editor as they can be self-contained. Creating custom module icons.

Troubleshooting

If icons don’t appear in the editor, make sure that:

  1. Each icon’s filename matches the naming requirement as described previously.
  2. modules/svg is enabled (it should be enabled by default). Without it, icons won’t appear in the editor at all.

    References

  • editor/icons