Icons
Icons make it easy to find and explore features in ReSharper and Rider. They can appear in buttons that execute actions, in navigation to differentiate between members, in the gutter to highlight source code, or as various indicators to visualize results (unit testing, solution-wide analysis).
Typically, icons come in different colors and tones to match the user-selected theme (light, dark, etc.). You can change the theme:
Product | Menu Path |
|---|---|
ReSharper | Options | Environment | General | User Interface | Application icons theme |
Rider | Preferences | Appearance & Behavior | Appearance | Theme |
Visual Studio | Options | Environment | General | Color Theme |
The SDK comes with an extensive set of icons that are probably already familiar to you.
You can browse the library in ReSharper's internal mode (devenv.exe /ReSharper.Internal) by navigating to ReSharper | Internal | Windows | Themed Icon Viewer:
tip
Select Browse as List or Browse as Icon Packs to filter and search icons from the text-box.
On the right-hand side, you can see the name of the icon as well as the icon pack it belongs to (here AddMissing and CommonThemedIcons). Those names should be enough to reference them in your code through code-completion. Each icon is contained in its own class under the *ThemedIcons icon pack class. Depending on the way the SDK is asking for an icon, you can pass them as:
typeof(MyPluginThemedIcons.Icon)orMyPluginThemedIcons.Icon.Id
Similar to the icons that come out-of-the-box, you can add your own icons as compiled icons. Although compiled icons can also be generated from PNGs, it is highly recommended to use SVGs, as they'll render without any issues on all resolutions.
SVG is a very rich format, but ReSharper can only create compiled icons from so-called optimized SVGs. Once you have your SVG, you can optimize it using the latest version of Inkscape.
Open the SVG, select File | Save As..., choose Optimized SVG, and enable the following options after hitting Save:
Options
Shorten color values
Convert CSS attributes to XML attributes
SVG Output
Remove the XML declaration
Remove metadata
Remove comments
IDs
Remove unused IDs
note
If you're developing on macOS or Linux, feel free to reach out to us, and we will generate the compiled icons for you.
If your icons should adapt to different themes, you must provide multiple files with a theme-selector next to each other:
<name>[Color].svg– corresponds to light themes<name>[GrayDark].svg– corresponds to dark themes
note
If your icon is suitable for both, light and dark themes, you don't need to add theme-selectors.
Once your SVG icons are prepared and located in a common directory:
Open the Themed Icon Viewer
Choose Add Pane | Directory with Icon Files
Select all icons you want to export
Choose Export | Export C# Code – SVG Body
A file with the compiled icons should open. You can rename any of the icon classes, the icon pack class, or move them to another namespace.
warning
When targeting Rider, you should keep in mind that the pack name is defined through the parent class name of your icon classes with
ThemedIconstrimmed from the end. If the resulting string is empty, the pack name isUnnamed. If you choose to keep your icon classes un-nested, the pack name isUngrouped.
Icons that only surface in Rider (e.g., for run configurations or tool windows) are handled through the IntelliJ SDK. The equivalent of exporting compiled icons is to create a MyPluginThemedIcons.kt as follows:
package icons
import com.intellij.openapi.util.IconLoader
// Feel free to rename
object MyPluginThemedIcons {
@JvmField val Icon = IconLoader.getIcon("/resharper/MyPlugin/Icon.svg", javaClass)
}The MyPluginThemedIcons.kt and your SVG icons should be located as follows:
src/rider/main
├── kotlin/icons
│ └── MyPluginThemedIcons.kt
└── resources
└── resharper
└── MyPlugin # pack name with 'ThemedIcons' trimmed
├── <Icon>.svg
└── <Icon_Dark.svgnote
Please refer to the IntelliJ Platform SDK for more information.
Thanks for your feedback!