Get an icons only firefox bookmarks toolbar

Every now and then you create a bookmark link by dragging the website shortcut icon to the firefox bookmark toolbar.

Everything is fine, but after a while you cannot find all the frequently visited websites in the toolbar because it gets hidden after you have added lots of bookmarks to the bookmarks panel and you have to click the “>>” link to find and go to that site.

If you have added 500 sites then you will always have to do this but 30 to 40 sites can easily be arranged (icons only) in the toolbar region as the image below.

For this you just have to add some lines to the firefox userChrome.css file.

Those who don’t know what the userChrome.css file is. It is the file in your Firefox profile which can be used to make tweaks and customisations to Firefox. You can find it by going to the following folders as per your operating system:

[WindowsXP] C:\Documents and Settings\{username}\Application Data\Mozilla\Firefox\Profiles\Chrome
[Windows Vista] – C:\Users\{username}\AppData\Roaming\Mozilla\Firefox\Profiles\{some_profile}\chrome 
[UBUNTU] - /home/{username}/.mozilla/firefox/{some_profile}/chrome

Inside there, you will find the userChrome.css file. If it is not there create a copy of the file called userchrome-example.css which is there by default and rename as userChrome.css.

After that open the userChrome.css with your favorite text editor, if you are in windows you may open it with notepad and paste the following line:

toolbar[mode="icons"] .toolbarbutton-text {
display:none !important;

Save the file, close and re-start your Firefox browser.

Now right click the firefox toolbar area select customize.


A new window will open up like below. Select “icons” from the “Show” dropdown list.


You will have your “icons only” Firefox Bookmarks Toolbar!

Note: If some thing terrible happens just delete what you copied and pasted into your userChrome.css file. Then re-start your Firefox browser.

UPDATE MAY 2011: You will not find the “chrome” folder in a new Firefox 4 installation, so you need to create the “chrome” folder inside your profile folder before you place your userChrome.css file there.

Last modified on October 12th, 2015 at 2:12 pm.
Share this post:

Priyanka Naskar Majumder - the Owner, Eyedea LAB. Graphic & Web Design Studio, lives in Kolkata, India. Interested in: Usability research, Graphic Design, Web Design & Development.

One Comment

  • Hi, do you have an idea how to center these icons? It’s nothing important. It’s just that if these icons were centered it would be perfect.

Leave a Reply

Your email address will not be published. Required fields are marked *


Allowed HTML tags: <strong> <em> <pre> <code> <a href="" title="">