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

Changing Thunderbirs folder icons

  • 5 replies
  • 2 have this problem
  • 785 views
  • Last reply by jegesq

more options

Considering how un-userfriendly the Thunderbird 78 folder pane is and how all add-ons which could help fix that have been made obsolete by the change of add-on interface, does any one know how to change the icon picture for mail folders in Thunderbird 78? I have started reading the add-on documentation, but I cannot find anywhere a document giving the list of names for the various images used in Thuderbird (i.e. the image names I could use in the manifest.js file of a very basic add-on which would just change the icons). Is one supposed to guess and work by trial and error, or is there a document, somewhere, which lists these names?

Thanks in advance to anyone who:

  • either points me towards a document listing the image names that can be used in the manifest.js file
  • or points me towards a tool or method to change the folder icons in Thunderbird 78 (and, yes, ColoredFolders is not [yet?] compatible with Thunderbird 78)

Mega thanks in advance. Dominique

Considering how un-userfriendly the Thunderbird 78 folder pane is and how all add-ons which could help fix that have been made obsolete by the change of add-on interface, does any one know how to change the '''icon picture''' for mail folders in Thunderbird 78? I have started reading the add-on documentation, but I cannot find anywhere a document giving the list of names for the various images used in Thuderbird (i.e. the image names I could use in the manifest.js file of a very basic add-on which would just change the icons). Is one supposed to guess and work by trial and error, or is there a document, somewhere, which lists these names? Thanks in advance to anyone who: * either points me towards a document listing the image names that can be used in the manifest.js file * or points me towards a tool or method to change the folder icons in Thunderbird 78 (and, yes, ColoredFolders is not [yet?] compatible with Thunderbird 78) Mega thanks in advance. Dominique

Chosen solution

re: Changing the folder icons. There is a way using a 'userChrome.css' file.

You would need to either create or search google for suitable png images that have a transparent background to image.

Here is an example of code.

First make sure this is set as follows:

  • Menu app icon > Options
  • Select 'General'
  • Scroll to the bottom and click on 'Config Editor' button
  • Accept Dragons warning
  • In search type: legacy
  • Look for this line: toolkit.legacyUserProfileCustomizations.stylesheet

If it is set to 'True' then all is OK

If it is set to 'False'

  • Double click on that line to toggle the 'False' to 'True'
  • Restart Thunderbird if you needed to alter the setting.

Now to create the userChrome.css file: In Thunderbird:

  • Help > Troubleshooting Information
  • click on 'Open folder' button

a new window opens showing the contents of your Profile folder.

  • Close Thunderbird now - this is important.
  • Create new folder and call it chrome note the spelling - use a lower case 'c' It should be in the same place as the 'Mail' folder.

If wanting to use your own images:

  • In the chrome folder create another folder called images

Put suitable images in the images folder and give them suitable names eg: for the image that will represent the general folder icon call it eg: folder.png or folder.svg depending upon type. If you choose to continue using some of the default images then you need to include the directory of those images - I've provided that in the code below.

In the example code below, I've changed the default folder icon used for my general folders but continued to use the default icons for others, but I've set a default colour for those icons, so I do not need to anything manually and if I add a folder or mail account, all the icons and their colours are set automatically. Hopefully the code will help you adapt for whatever you require.

For anyone who only wants to only set the colour of the icons and not the icons themseleves, it is not necessary to include the lines that mention the directory (starting with list-style-image) of the icons as Thunderbird will use the default.

  • open Notepad
  • Copy everything - all the text between lines below and paste it into the Notepad document.

note: In the code below, all the colours are represented as html hex code which is the # key followed by 6 numbers/letters eg: #ff0000. You can see just above each code section I've written some text to say what colour I used and in the image below, it shows how this looks using dark theme. Basically red for account; green for good default folders; orange for junk and trash; special search folder turqiouse and all other general folder is set as a new icon. But you can choose whatever colour you want or insert new images following the code example for the general folder icon. The link below will help you choose colours and show hex codes.


/*
* Do not remove the @namespace line -- it's required for correct functioning - it only needs to be entered once at the top of the userChrome.css file
 */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* all other folder - not special folders - used an image I prefer - need to set width and height to 16px */
treechildren::-moz-tree-image(folderNameCol){
list-style-image: url("images/folder.png") !important;
width: 16px !important;
height: 16px !important;
}


/* this changed only mail account folders to red */
treechildren::-moz-tree-image(folderNameCol, isServer-true) {
  list-style-image: url("chrome://messenger/skin/icons/message.svg") !important;
  fill: red !important;
}

/* ..... Inbox -green ..... */
.tabmail-tab[type="folder"][SpecialFolder="Inbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
list-style-image: url("chrome://messenger/skin/icons/inbox.svg") !important;
fill: #33cc33 !important;
 
}

/* ..... Sent - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Sent"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
list-style-image: url("chrome://messenger/skin/icons/sent.svg") !important;
fill: #33cc33 !important;
}


/* ..... Outbox ..... */
.tabmail-tab[type="folder"][SpecialFolder="Outbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
list-style-image: url("chrome://messenger/skin/icons/outbox.svg") !important;
fill: #33cc33 !important;
}

/* ..... Drafts ..... */
.tabmail-tab[type="folder"][SpecialFolder="Drafts"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
  list-style-image: url("chrome://messenger/skin/icons/file-item.svg") !important;
  fill: #33cc33 !important;
}


/* ..... Archives ..... */
.tabmail-tab[type="folder"][SpecialFolder="Archive"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
 list-style-image: url("chrome://messenger/skin/icons/archive.svg") !important;
  fill: #33cc33 !important;
}

/* ..... Templates ..... */
.tabmail-tab[type="folder"][SpecialFolder="Templates"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
  list-style-image: url("chrome://messenger/skin/icons/template.svg") !important;
  fill: #33cc33 !important;
}

/* ..... Junk - orange ..... */
.tabmail-tab[type="folder"][SpecialFolder="Junk"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
  list-style-image: url("chrome://messenger/skin/icons/junk.svg") !important;
  fill: #FF9900 !important;
}

/* ..... Trash ..... */
.tabmail-tab[type="folder"][SpecialFolder="Trash"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
 list-style-image: url("chrome://messenger/skin/icons/delete.svg") !important;
  fill: #FF9900 !important;
}

/* ..... Saved Search Folder ..... */
.tabmail-tab[type="folder"][SpecialFolder="Virtual"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
  list-style-image: url("chrome://messenger/skin/icons/search-folder.svg") !important;
  fill: #33cccc !important;
}



Please note: recently, emails containing code were missing one vital part - !important; was removed from code - the info is all correct in the forum question, but somehow got changed when the comment was posted to recipient in email - so please double check.


  • Save the document as filename userChrome.css in the 'chrome' folder. Note the spelling all lower case except for the 'C'.
  • Start Thunderbird.


This info may be of use and is something you can get up and running quickly.

Read this answer in context 👍 1

All Replies (5)

more options

Chosen Solution

re: Changing the folder icons. There is a way using a 'userChrome.css' file.

You would need to either create or search google for suitable png images that have a transparent background to image.

Here is an example of code.

First make sure this is set as follows:

  • Menu app icon > Options
  • Select 'General'
  • Scroll to the bottom and click on 'Config Editor' button
  • Accept Dragons warning
  • In search type: legacy
  • Look for this line: toolkit.legacyUserProfileCustomizations.stylesheet

If it is set to 'True' then all is OK

If it is set to 'False'

  • Double click on that line to toggle the 'False' to 'True'
  • Restart Thunderbird if you needed to alter the setting.

Now to create the userChrome.css file: In Thunderbird:

  • Help > Troubleshooting Information
  • click on 'Open folder' button

a new window opens showing the contents of your Profile folder.

  • Close Thunderbird now - this is important.
  • Create new folder and call it chrome note the spelling - use a lower case 'c' It should be in the same place as the 'Mail' folder.

If wanting to use your own images:

  • In the chrome folder create another folder called images

Put suitable images in the images folder and give them suitable names eg: for the image that will represent the general folder icon call it eg: folder.png or folder.svg depending upon type. If you choose to continue using some of the default images then you need to include the directory of those images - I've provided that in the code below.

In the example code below, I've changed the default folder icon used for my general folders but continued to use the default icons for others, but I've set a default colour for those icons, so I do not need to anything manually and if I add a folder or mail account, all the icons and their colours are set automatically. Hopefully the code will help you adapt for whatever you require.

For anyone who only wants to only set the colour of the icons and not the icons themseleves, it is not necessary to include the lines that mention the directory (starting with list-style-image) of the icons as Thunderbird will use the default.

  • open Notepad
  • Copy everything - all the text between lines below and paste it into the Notepad document.

note: In the code below, all the colours are represented as html hex code which is the # key followed by 6 numbers/letters eg: #ff0000. You can see just above each code section I've written some text to say what colour I used and in the image below, it shows how this looks using dark theme. Basically red for account; green for good default folders; orange for junk and trash; special search folder turqiouse and all other general folder is set as a new icon. But you can choose whatever colour you want or insert new images following the code example for the general folder icon. The link below will help you choose colours and show hex codes.


/*
* Do not remove the @namespace line -- it's required for correct functioning - it only needs to be entered once at the top of the userChrome.css file
 */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* all other folder - not special folders - used an image I prefer - need to set width and height to 16px */
treechildren::-moz-tree-image(folderNameCol){
list-style-image: url("images/folder.png") !important;
width: 16px !important;
height: 16px !important;
}


/* this changed only mail account folders to red */
treechildren::-moz-tree-image(folderNameCol, isServer-true) {
  list-style-image: url("chrome://messenger/skin/icons/message.svg") !important;
  fill: red !important;
}

/* ..... Inbox -green ..... */
.tabmail-tab[type="folder"][SpecialFolder="Inbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
list-style-image: url("chrome://messenger/skin/icons/inbox.svg") !important;
fill: #33cc33 !important;
 
}

/* ..... Sent - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Sent"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
list-style-image: url("chrome://messenger/skin/icons/sent.svg") !important;
fill: #33cc33 !important;
}


/* ..... Outbox ..... */
.tabmail-tab[type="folder"][SpecialFolder="Outbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
list-style-image: url("chrome://messenger/skin/icons/outbox.svg") !important;
fill: #33cc33 !important;
}

/* ..... Drafts ..... */
.tabmail-tab[type="folder"][SpecialFolder="Drafts"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
  list-style-image: url("chrome://messenger/skin/icons/file-item.svg") !important;
  fill: #33cc33 !important;
}


/* ..... Archives ..... */
.tabmail-tab[type="folder"][SpecialFolder="Archive"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
 list-style-image: url("chrome://messenger/skin/icons/archive.svg") !important;
  fill: #33cc33 !important;
}

/* ..... Templates ..... */
.tabmail-tab[type="folder"][SpecialFolder="Templates"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
  list-style-image: url("chrome://messenger/skin/icons/template.svg") !important;
  fill: #33cc33 !important;
}

/* ..... Junk - orange ..... */
.tabmail-tab[type="folder"][SpecialFolder="Junk"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
  list-style-image: url("chrome://messenger/skin/icons/junk.svg") !important;
  fill: #FF9900 !important;
}

/* ..... Trash ..... */
.tabmail-tab[type="folder"][SpecialFolder="Trash"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
 list-style-image: url("chrome://messenger/skin/icons/delete.svg") !important;
  fill: #FF9900 !important;
}

/* ..... Saved Search Folder ..... */
.tabmail-tab[type="folder"][SpecialFolder="Virtual"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
  list-style-image: url("chrome://messenger/skin/icons/search-folder.svg") !important;
  fill: #33cccc !important;
}



Please note: recently, emails containing code were missing one vital part - !important; was removed from code - the info is all correct in the forum question, but somehow got changed when the comment was posted to recipient in email - so please double check.


  • Save the document as filename userChrome.css in the 'chrome' folder. Note the spelling all lower case except for the 'C'.
  • Start Thunderbird.


This info may be of use and is something you can get up and running quickly.

Modified by Toad-Hall

more options
more options

See also this topic with similar code and refinements:

http://forums.mozillazine.org/viewtopic.php?f=30&t=3064381

more options

Mega-thanks to Toad-hall and sfhowes!

I had generated a userChrome.css file and put it in the right place, but it didn't do anything... So big thangs and kudos to Toad-hall for giving me the information about the toolkit.legacyUserProfileCustomizations.stylesheet key in the configuration file!

Thanks to sfhowes for pointing me to the http://forums.mozillazine.org/viewtopic.php?f=30&t=3064381 topic that I had missed despite my (clearly feeble) seach on Google.

I feel so relieved that I can now properly see my folders!

Could one of you point me towards a page where I could find all the names/codes I can une in the "treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk)" lines? (I mean the second parameter, after folderNameCol), and more generally what the parameters can be/mean?

Anyway, thanks a lot to both of you: I now have something to chew on (like a good dog with his bone) and it should keep me busy for a while. But I'd still love to find an exhaustive list of names/codes for the various icons (and how if there is a way of naming/ selecting a specific folder in the tree, such a s "account xxx" >> folder "customers/direct:JoeBlog" so that I could have different folder images and/or colours for specific folders...

Thanks again. Dominique

more options

Try the Phoenity Icons add-on for TB. Works great with Thunderbird 78.x. I hated what the folder icons looked like when, without warning, my TB updated itself to 78.4. I've used TB for as long as I can recall, and was ready to tear my hair out just thinking about having to manually change the color of all my folders.

I even tried the Chrome.css method described above, but found that unsatisfactory. It only colors the outside border of icons, and the stock yellow in the script above is even harder to see with a white background than the awful stock icons. And the thought of having to experiment with colors was also way more work than I wanted to go through.

So you can imagine how happy I was to discover that Phoneity Icons add-on now works with version 78. It doesn't allow you to change the icon colors (at least I could not find a way to do it), but I'm still extremely happy with the default Phoenity look and feel. It's about as close to the old standard pre 78 version TB icons as one would want.

Here's a link to the Phoenity Icons add-on. https://addons.thunderbird.net/en-US/thunderbird/addon/phoenity-icons/

Give them a try. The add-on just works....and it looks good too. Really, I can't thank the developers enough for creating this add-on.