Harness proD API Help
In This Topic
    Icons
    In This Topic

    Icon format

    Plugins can use vector (SVG) or raster (PNG, BMP, …) icon resources.

    Icon size

    According to the specified ButtonSize, the plugin’s icon should have the requested resolution to appear well.

    When using vector icons, we recommend aligning the content (especially vertical and horizontal lines) to a grid of the same size to ensure having clear rasterized results with no blurry lines, semi-transparent “ghosts” etc.

    ButtonSize 

    Raster icon size 

    Vector icon grid size 

    RibbonStyle.Large 

    32 x 32 pixels 

    32 x 32 units grid 

    RibbonStyle.SmallWithText 

    16 x 16 pixels 

    16 x 16 units grid 

    RibbonStyle.SmallWithoutText 

    16 x 16 pixels 

    16 x 16 units grid 

    UI color modes

    Currently, it is not possible to specify different icons for light and dark UI color modes. For raster icons, you must manually choose the resource when developing your plugin according to the preferred color mode.

    For vector icons, you can provide a single icon file and use the internal re-colorization mechanism described below.

    Vector icons re-colorization

    When using vector icon resources, there is a defined set of fixed colors that are being re-colorized according to the selected UI color mode. You can use any other color, but it will not be re-colorized automatically. And, on the other hand, you cannot turn off the re-colorization mechanism for these fixed colors.

     

    Here is the list of all fixed colors with their target colors for light and dark UI color mode:

     

    HEX color value 

    Light UI color mode 

    Dark UI color mode 

    #d04d2f 

     #f60000 

     #f60000 

    #4dae89 

     #36be2c 

     #36be2c 

    #377ab5 

     #009be7 

     #009be7 

    #eeb764 

     #f7cc1b 

     #f7cc1b 

    #000000 

     #000000 

     #ffffff 

    #ffffff 

     #f7821b 

     #f7821b 

    Additional hints for the re-colorization:

    • this fixed set of colors is also used for de-saturating icons in a disabled state (converting fixed colors to grayscale)
    • this fixed set of colors is also used for whitening icons in the Quick access toolbar (converting fixed colors to white)
    • transparency can be used and is not being changed during the re-colorization process