mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-27 16:57:49 +08:00
111 lines
6.8 KiB
Markdown
111 lines
6.8 KiB
Markdown
<!-- Copyright 2000-2025 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
|
|
|
# Plugin Logo
|
|
|
|
<link-summary>Plugin logo requirements and best practices.</link-summary>
|
|
|
|
The IntelliJ Platform supports representing a plugin with a logo.
|
|
A _Plugin Logo_ is intended to be a unique representation of a plugin's functionality, technology, or company.
|
|
|
|
When opening <path>plugin.xml</path> in editor, inspection
|
|
<control>Plugin DevKit | Plugin descriptor | Plugin Logo check</control> (2024.3+,
|
|
for earlier versions <control>Plugin DevKit | Plugin descriptor | Plugin.xml validity</control>)
|
|
will highlight a missing plugin icon.
|
|
|
|
**Note:** icons and images used within a plugin have different requirements.
|
|
See [](icons.md) for more information.
|
|
|
|
## Plugin Logo Usages
|
|
Plugin Logos are shown in the [JetBrains Marketplace](https://plugins.jetbrains.com).
|
|
They also appear in the Settings [Plugin Manager](https://www.jetbrains.com/help/idea/managing-plugins.html) UI in IntelliJ Platform-based IDEs.
|
|
Whether online or in the product UI, a Plugin Logo helps users to identify a plugin more quickly in a list, as shown below:
|
|
|
|
{width="800"}
|
|
|
|
> When browsing [custom plugin repositories](custom_plugin_repository.md), there is no support for showing logos for plugins hosted there but not yet installed.
|
|
>
|
|
{style="note"}
|
|
|
|
## Plugin Logo Requirements
|
|
|
|
> Please see also these [important requirements](https://plugins.jetbrains.com/docs/marketplace/best-practices-for-listing.html#plugin-logo) for JetBrains Marketplace.
|
|
>
|
|
{style="note"}
|
|
|
|
For a Plugin Logo to be displayed correctly within an IntelliJ Platform-based IDE, it must:
|
|
* Follow the best practices design guidelines,
|
|
* Be in the correct file format,
|
|
* Conform to file name conventions,
|
|
* Have the correct size,
|
|
* Be in the <path>META-INF</path> folder of the plugin distribution file.
|
|
|
|
### Plugin Logo Size
|
|
The Plugin Logo should be provided in one size: 40px by 40px.
|
|
|
|
A Plugin Logo is displayed in two sizes, and scales automatically in each context:
|
|
* 40px by 40px in the plugins list in the Plugin Manager UI.
|
|
* 80px by 80px in the plugin details screen in the Plugin Manager UI and on the plugin's page in JetBrains Marketplace.
|
|
|
|
Verify that Plugin Logo designs are effective in both sizes and all display contexts.
|
|
|
|
### Plugin Logo Shape
|
|
Plugin Logo designs should leave at least 2px transparent padding around the perimeter, as shown below:
|
|
|
|
{width="225"}
|
|
|
|
Make sure Plugin Logos have the same visual weight as the logos in the examples below.
|
|
The more filled a Plugin Logo design is, the less actual space it needs.
|
|
See more examples of [visual weight compensation](icons_style.md#basic-shapes) in the UI Guidelines for Icons.
|
|
|
|
For basic shapes, use the following sizes.
|
|
Note the different areas of transparent padding used for each shape:
|
|
|
|
| {width="225"} | {width="225"} |
|
|
|:---------------------------------------------------------------------------:|:-----------------------------------------------------------------------:|
|
|
| _Square logo 32px by 32px_ | _Circular logo 36px in diameter_ |
|
|
| {width="225"} | {width="225"} |
|
|
| _Horizontal rectangular logo 36px by 26px_ | _Vertical rectangular logo 26px by 36px_ |
|
|
{style="none"}
|
|
|
|
### Plugin Logo Colors
|
|
If the plugin's technology already has a logo, use its colors.
|
|
Check the license terms before using the logo.
|
|
If there is no existing logo, or its use is prohibited, create a custom logo based on the [Action Colors Palette](icons_style.md#action-icons) in the UI Guidelines for Icons.
|
|
|
|
| {height="200" width="200"} | {:height="200" width="200"} |
|
|
|:--------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------:|
|
|
| _The YouTrack Plugin Logo uses<br/>the YouTrack product logo_ | _The Keymap Plugin Logo uses a color<br/>from the Action Colors Palette_ |
|
|
{style="none"}
|
|
|
|
Ensure a Plugin Logo is visible on both light and dark backgrounds.
|
|
If one Plugin Logo design does not work on both light and dark backgrounds, create separate light and dark versions of the Plugin Logo.
|
|
The examples below illustrate how a Plugin Logo design may work well for a light background but not for a dark background.
|
|
Consequently, a separate Plugin Logo for dark backgrounds is needed.
|
|
|
|
| {width="225"} | {width="225"} | {width="225"} |
|
|
|:-------------------------------------------------------------:|:---------------------------------------------------------------------:|:------------------------------------------------------------------:|
|
|
| _The light Plugin Logo design<br/>works well on light theme_ | _The light Plugin Logo design does<br/>not work well on a dark theme_ | _A separate, dark Plugin Logo design<br/>works well on dark theme_ |
|
|
{style="none"}
|
|
|
|
### Plugin Logo File Format
|
|
All Plugin Logo images must be in SVG format.
|
|
This vector image format is required because the Plugin Logo file must be small (ideally less than 2-3kB), and the image must scale without any loss of quality.
|
|
|
|
> Using automatic conversion of bitmap graphics to SVG is highly discouraged, as the resulting files have excessive size (100kB or more).
|
|
>
|
|
{style="warning"}
|
|
|
|
### Plugin Logo File Naming Convention
|
|
Name the Plugin Logo files according to the following conventions:
|
|
* <path>pluginIcon.svg</path> is the default Plugin Logo.
|
|
If a separate Logo file for dark themes exists in the plugin, then this file is used solely for light themes,
|
|
* <path>pluginIcon_dark.svg</path> is an optional, alternative Plugin Logo for use solely with dark IDE themes.
|
|
|
|
## Adding Plugin Logo Files to a Plugin Project
|
|
The Plugin Logo files must be packaged in the <path>META-INF</path> folder of the [plugin main JAR file](plugin_content.md).
|
|
|
|
To include Plugin Logo files, place them into the plugin project's <path>resources/META-INF</path> folder.
|
|
For example:
|
|
|
|
{width="450"}
|