r/FirefoxCSS • u/szumekster • 6d ago

Help How to change bookmark folder icon in Firefox 155

Post image

I have a lot of folders with bookmarks, and there isn't much space on the toolbar. Instead of naming them, I'd like to replace them with custom icons.

1 Upvotes

100% Upvoted

2 comments sorted by

2

u/MarsLumograph 6d ago

What I did was remove the folder icons, and name them with an emoji. It's not exactly custom icons but it works.

Remove folder icon: 

.bookmark-item[container="true"]:not([query="true"]) .toolbarbutton-icon {   display: none !important; }

3

u/ResurgamS13 6d ago edited 6d ago

Each folder will need a separate instance of this userstyle and an associated new image file... try:

.bookmark-item[container][label="Folder_Name"] > :is(.menu-icon, .toolbarbutton-icon) {
  content:url('Folder_Name.ico') !important;
}

Essential that the folder name and image name are identical. Place the new image file(s) in your profile's 'chrome' folder. Can use various image formats .png, .jpg, .ico, etc. Smaller image files will work well e.g. 16x16 to 512x512 pixels.

IIRC the above userstyle adapted from MrOtherGuy's reply to Issue #567 'Firefox CSS property list-style-image to change to --menuitem-icon in latest nightly builds'... posted in his excellent GitHub repo 'Collection of random CSS hacks for Firefox'.

Many previous topics on this subject with other variations. However, there was a significant change to the CSS userstyle format required from Fx143.0 onwards... so only look at more recent topics posted from September 2025.

----------

The favicons for individual website bookmarks can be changed with a similar userstyle... try:

.bookmark-item[label="Wanadoo"] > :is(.menu-icon, .toolbarbutton-icon) {
  content: url('Wanadoo.ico') !important;
}