Change the colors of the toolbar selector icons - On Premises R2020


Toolbar with annotation

The three icons are embedded svg files. An embedded svg is basic xml so it can be referred to from the css.

  • To change the colors of the toolbar selector icons:
  1. Open the mainstyles.css file.
  2. Locate the definition:

    For desktop viewing:

    For mobile viewing:

    /* color embedded SVG icons */

    header#desktop .top_icons .top_icons_menu {

    fill: var(--primary-color);

    /* height: 25px; */

    width: 25px;


    /* re-colouring and re-szing the icons themselves */

    header#ipad .m_top_icons > li > a > svg {

    height: 20px !important;

    width: 20px !important;

    fill: #fff !important;


  3. Copy the complete definition to the themestyles.css in your theme folder.
  4. Update the fill: property.

    You can enter the color name, a hex code, a variable defined at the beginning of the css, or any other form of defining an html color. For example:

    fill: lightblue;

    fill: #FF0909;

Using the inspector to identify the icon css class

If you are using the inspector:

  • Hovering over one of the icons identifies the image class as top_icons_menu which you can find in the css file.
  • It is located in an unordered list with class top_icons.
  • Your selector code becomes top_icons .top_icons_menu.

    Select the icons