Panel Icons
To use icons in your plugin, please follow these steps:
- Design your @1x scale icon at 23x23 and leave your icon a little border – this will ensure best rendering. You can use larger sizes, but the results may be blurrier.
- Export your icons with @1x and @2x scales. If you want, you can also export for 1.5 and 1.25x sizes as well. So, if your icon is named “pluginIcon”, the files should be:
- panelIcon@1x.png
- panelIcon@1.25x.png
- panelIcon@1.5x.png
- panelIcon@2x.png
- In your manifest, use the following form for each panel entrypoint (note that we’re assuming you exported the icons above into your plugin’s “icons” folder, and also note that you should only include the themes for which the icon is compatible – or use
all
to cover all themes):
Note that the width and height determines the size of the icon in Ps right now, and not the actual resolution of your icon. Using anything other than 23x23 is probably going to render poorly."icons": [ { "width": 23, "height": 23, "path": "icons/panelIcon.png", "scale": [ 1, 1.25, 1.5, 2 ], "theme": [ "darkest", "dark", "medium", "light", "lightest", "all" ] } ]
With this, your plugin’s icon should be visible inside Photoshop (but not in the Plugin Panel).
Supporting Themes
Photoshop supports multiple themes, and you should create an icon that uses these themes.
Using themes is just like supporting a single icon, but now you have two entries inside icons
and another set of icon files.
For example:
"icons": [
{
"width": 23, "height": 23, "path": "icons/dark.png", "scale": [ 1, 2 ],
"theme": [ "darkest", "dark", "medium" ]
}, {
"width": 23, "height": 23, "path": "icons/light.png", "scale": [ 1, 2 ],
"theme": [ "lightest", "light" ]
}
]
Here the “dark*.png” icons will be used when Photoshop is using the dark themes, and “light*.png” will be used when Photoshop uses the light themes.
You should seriously supporting themes with your icons, as not doing so may result in poor contrast when using certain themes.
Supporting multiple panels
Plugins can have more than one panel, and each panel can and should have its own icon. For example:
"entrypoints": [
{
"type": "panel",
"id": "runPanel",
"icons": [
{
"width": 23, "height": 23, "path": "icons/run-dark.png", "scale": [ 1, 2 ],
"theme": [ "darkest", "dark", "medium" ]
}, {
"width": 23, "height": 23, "path": "icons/run-light.png", "scale": [ 1, 2 ],
"theme": [ "lightest", "light" ]
}
]
}
],
"icons": [
{
"width": 23, "height": 23, "path": "icons/plugin-dark.png", "scale": [ 1, 2 ],
"theme": [ "darkest", "dark", "medium" ]
}, {
"width": 23, "height": 23, "path": "icons/plugin-light.png", "scale": [ 1, 2 ],
"theme": [ "lightest", "light" ]
}
]
In the above example, the runPanel
panel will show a separate icon.
You should supply a separate icon for each panel you support. If you don’t, the user may not be able to immediately determine which panel they’re trying to open, and your plugin may be rejected from the Plugin Marketplace.
The Plugin Icon
Plugins also need an icon for the Plugin Panel in Photoshop. This is a plugin-wide icon, and is not panel-specific.
This icon is 24x24 (@1x) and 48x48 (@2x). It should not be transparent. You should give yourself some space around the corners, since a rounded-corner treatment will be automatically applied in the Plugin Panel for you.
Plugin icons should be specified at the top level of the manifest. For example:
"icons": [
{
"width": 48, "height": 48, "path": "icons/plugin.png", "scale": [ 1, 2 ],
"theme": [ "darkest", "dark", "medium", "lightest", "light", "all" ],
"species": [ "pluginList" ]
}
]
Note that the above entry has 48x48 dimensions. This is a bug and will be fixed in the future to use be 24x24, but 48x48 must be used in the manifest to get the plugin panel to see it. In the future the key will be the
species
entry ofpluginList
.
In the above example, you’d have two icons in the icons
folder: plugin@1x.png
(24x24) and plugin@2x.png
. (48x48).
Examples
Check the following samples for examples:
- https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-playground/plugin/manifest.json
- https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-react-starter/plugin/manifest.json
- https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-kitchen-sink/manifest.json