Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I change the toolbar icons?

  • 5 replies
  • 1 has this problem
  • 5414 views
  • Last reply by fnordbric

more options

Hi!

I find the flat, low-contrast, grey toolbar icons boring and a bit difficult to recognize. Most applications offer some form of relieve,for example with gimp it is just one click in the preferences to change to a colourful icon theme, intellij IDEA has a plugin to get rid of those bland, boring, dull grey things. Is there a way to install a different icon set in firefox quantum? As I understand it, complete themes have been abolished and there i not a word about how to replace them on the customization page.

Chosen solution

Update 2: Now it works.... (see picture)

the icon ids are from the toolbarbutton-icons.inc.css file.

The !important flags seem to be important...

Read this answer in context 👍 0

All Replies (5)

more options

Hi, I do not have my notes tonight so no long list of sites for you.

About 230 million ways to customize Firefox with userChrome

Place to ask questions and get code for usserChrome : https://www.reddit.com/r/firefox/ A extension :

At this time those sort of Extensions that modified Firefox Controls are not allowed due to security and stop those things from crashing Firefox. Maybe in the near future as there is a new standard people are writing code for it to make new extensions that are compatible.

more options

Update: It looks like the icons and their animations are svg vector graphics files defining the shapes , located in the source repository at browser/themes/shared/icons, with the css for icons and fill colours probably defined in browser/themes/shared/toolbarbutton-icons.inc.css. It does not seem to work to change them from a userChrome.css file (tried replacing forward.svg with back.svg in #forward-button) . I guess I leave it there. It is not that important, just a minor nuisance.

more options

Chosen Solution

Update 2: Now it works.... (see picture)

the icon ids are from the toolbarbutton-icons.inc.css file.

The !important flags seem to be important...

Modified by fnordbric

more options

Note that fill-opacity is not a color value, but a number between 0 and 1.

You should always use the important flag when you want to override a defined property, but I think that using only the fill property to set the (text) color would be sufficient (why override the forward button with the icon of the back button??)


#back-button {
 fill: #ff3010 ! important;
/*  list-style-image: url("chrome://browser/skin/back.svg"); */
}

#forward-button {
 fill: #ff3010 ! important;
/* list-style-image: url("chrome://browser/skin/forward.svg"); */
}
more options

I did not know exactly what fill-opacity was for, so I just tried to set a different color there to see if there was any effect. Overriding the forward button with the back button was just to find out if I could override the icon there. At the end, I just changed the forward/back buttons to blue, reload to green and stop to red for now, without changing the shapes.