At MDG, we’ve worked on/are working on a number of Firefox themes for clients. Each time I’m asked what icons are needed, I scratch my head and scour around the UI making notes. I haven’t found any documentation on this. So this post is an attempt to document it for reference. If I am missing anything, please do let me know.

NOTES:
1) This document is coming from an implementation viewpoint, and not a design one, i.e. not concerned with what the icons look like.

2) Unless where specified, all images can be in PNG or GIF format, but PNG is preferred.

3) All chrome:// urls used as examples here are from the default Winstripe theme on Windows, but should also apply to other themes. They are listed to enable lookup for examples. If they appear as hyperlinks in this post, they may not work. You will need to copy and paste them into the Firefox location bar.

4) Items marked with an asterix (*) are viewed as being compulsory to change for a new theme. All other are optional.

5) This applies to Firefox 1.5 themes.

Toolbar*
——–
2 sets of composite icons, 1 for regular size and 1 for small.

Regular – 24x24px
chrome://browser/skin/Toolbar.png

Small – 16x16px
chrome://browser/skin/Toolbar-small.png

Go Button*
———-
16×16 in 3 different states (normal, hover, disabled)
chrome://browser/skin/Go.png

Search
——-
16×16 Search Icon for Seach Box/plugin (default hourglass)

Close Icon
———-
16×16 icons (3 states) used to close sidebar and a tab.
chrome://global/skin/icons/close.png

Scrollbars
———–

TBD

Throbber *
——–
Static : 16x16px
chrome://browser/skin/Throbber-small.png

Busy : 16x16px animated gif
chrome://browser/skin/Throbber-small.gif

Bookmark Icons
————–
These icons appear in multiple places, including in bookmarks, history, and on tabs when no favicon is available for a site.

Default:
chrome://browser/skin/Bookmarks-folder.png

Open/Closed folder
chrome://global/skin/icons/folder-item.png

Bookmark Manager Toolbar*
————————
Composite with various 24×24 icons
chrome://browser/skin/bookmarks/Bookmarks-toolbar.png

Options *
——-
These are the icons for the different panels in Options.
Size : 32x32px each, grouped in composite
e.g.
chrome://browser/skin/pref/Options.png
or
chrome://browser/skin/pref/Options.png

Livemarks
———
For when feeds are detected in a page
chrome://browser/skin/livemark-item.png
This should probably left as is, because it a universally recognised icon for feeds.

Fullscreen Window Controls
————————–
chrome://global/skin/icons/Minimize.gif
chrome://global/skin/icons/Restore.gif
chrome://global/skin/icons/Close.gif

Security
——–
chrome://browser/skin/Secure.png
chrome://browser/skin/Security-broken.png

Background Images
—————–
Background images can be put in various places, inclduing the sidebar, the
navigational toolbox (menubar, toolbars) and Options.

Firefox Theme Icon Specifications

One thought on “Firefox Theme Icon Specifications

  • 21-Jan-2006 at 10:58
    Permalink

    Icons in help contents, Icons in manage bookmarks, icons in extension and theme managers, clear all icon in download manager, and the popup blocked icon…

    Reply

Leave a Reply

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