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


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