Improve Editor icons documentation

- Document Scale with Editor Scale import option.
- Clarify the import options are only relevant for icons present
  in a project, not icons created for core Godot.
- Mention Godot editor icons website.
This commit is contained in:
Hugo Locurcio
2026-01-31 01:03:41 +01:00
parent f659b7d485
commit 601a03e468

View File

@@ -21,32 +21,56 @@ Clone the ``godot`` repository containing all the editor icons:
git clone https://github.com/godotengine/godot.git git clone https://github.com/godotengine/godot.git
The icons must be created in a vector graphics editor in SVG format. There are The icons must be created in a vector graphics editor in SVG format. There are
two main requirements to follow: three main requirements to follow:
- Icons must be 16×16. In Inkscape, you can configure the document size in - Icons must be 16×16. In Inkscape, you can configure the document size in
**File > Document Properties**. **File > Document Properties**.
- Lines should be snapped to pixels whenever possible to remain crisp at lower DPI. - 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. You can create a 16×16 grid in Inkscape to make this easier.
- If the user has configured their editor to use a light theme, Godot will
Once you're satisfied with the icon's design, save the icon in the cloned
repository's ``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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If the user has configured their editor to use a light theme, Godot will
convert the icon's colors based on a convert the icon's colors based on a
`set of predefined color mappings <https://github.com/godotengine/godot/blob/master/editor/themes/editor_color_map.cpp>`__. `set of predefined color mappings <https://github.com/godotengine/godot/blob/master/editor/themes/editor_color_map.cpp>`__.
This is to ensure the icon always displays with a sufficient contrast rate. 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. 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. Otherwise, your icon may become difficult to read on a light background.
.. note:: Once you're satisfied with the icon's design, save the icon in the cloned
To enable color conversion for light editor themes: repository's ``editor/icons`` folder. The icon name should match the intended
1. :ui:`Import > Import As > Texture2D` name in a case-sensitive manner. For example, to create an icon for
2. Set ``editor/convert_colors_with_editor_theme`` to ``true`` CPUParticles2D, name the file ``CPUParticles2D.svg``.
.. tip::
You can also browse all existing icons on the
`Godot editor icons <https://godotengine.github.io/editor-icons/>`__
website.
Import options for custom icons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
For custom icons that are present in projects (as opposed to the engine source code),
there are two import options you should enable:
Scaling for hiDPI displays
^^^^^^^^^^^^^^^^^^^^^^^^^^
Icons need to be scaled properly on hiDPI displays to ensure they remain
crisp and large enough to be readable.
To ensure the icon is rendered at a correct scale on hiDPI displays, select the
SVG file in the FileSystem dock, enable the **Editor > Scale with Editor Scale**
option in the Import dock and click :button:`Reimport`. Note that this option is
only available for icons in SVG format, as it requires the use of a vector
format to work.
Color conversion for light editor themes
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To ensure the icon has its colors converted when the user is using a light
theme, select the SVG file in the FileSystem dock, enable the **Editor > Convert
Colors with Editor Theme** option in the Import dock and click
:button:`Reimport`. Note that this option is only available for icons in SVG
format, as it requires the use of a vector format to work.
Icon optimization Icon optimization
~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~
@@ -84,9 +108,8 @@ Troubleshooting
If icons don't appear in the editor, make sure that: If icons don't appear in the editor, make sure that:
1. Each icon's filename matches the naming requirement as described previously. 1. Each icon's filename matches the naming requirement as described previously.
2. The ``svg`` module is enabled at compile-time (it is enabled by default).
2. ``modules/svg`` is enabled (it should be enabled by default). Without it, Without this module, icons won't appear in the editor at all.
icons won't appear in the editor at all.
References References
~~~~~~~~~~ ~~~~~~~~~~