Custom Icon Set Tutorial for Menu Icons Plus

Menu Icons Plus is an add-on for Firefox which iconifies your menu items.  Along with the built-in icon sets that come with it, it enables you to import your own icon set to use.

Making the icons

To create a menu icon set, you must come up with some 16x16 pixel images to represent common actions or commands in Firefox.  If you are an artist, you can draw each icon yourself.  If not, there are several free icon sets available on the Internet—just do a search and see what you find.  Ideally, you will have icons that correspond to at least the following menu items in Firefox:

  • checkmark
  • browse-back
  • browse-forward
  • browse-reload
  • browse-cancel (stop)
  • browse-home
  • edit
  • edit-cut
  • edit-copy
  • edit-paste
  • edit-undo
  • edit-redo
  • edit-delete
  • find
  • window-new
  • tab-new
  • file-open
  • tab-close
  • save as
  • email-send link
  • page setup
  • print preview
  • print
  • exit
  • zoom in
  • zoom out
  • view source
  • full screen
  • history
  • bookmarks
  • bookmark this page
  • bookmark-new
  • folder-new
  • bookmark this feed
  • web search
  • downloads
  • add-ons
  • page info
  • options
  • help

If you don't have images for a few of the commands, don't worry—your icon set will still work, there just won't be any icon showing for those particular menu items.

Putting the icons together

Now that you've got your menu icon images, there still another step we must take before they're ready to import into Menu Icons Plus.  We need to take all of these separate image files and combine them into one single image file.  Almost any image editing program can help you do this, such as PhotoShop, Gimp, etc.  To begin, open your image editing program and create a new image with a transparent background, 160 pixels wide and 64 pixels tall.  (If you're using Gimp, you can download and use this image as a template, instead of creating a new one.)  Now, copy each of your 16x16 pixel images and place them adjacent to each other according to the following layout:

Leave a blank 16x16 space for any missing icons.  To show you what your image "grid" should look like, here is an example using the Silk icon set by Mark James.  (Menu Icons Plus already comes with a complete Silk icon set; it is used here just as a sample.)

When you're done arranging the icons in order, save the 160x64 pixel image as a PNG file.

Importing the icon set

Finally, we get to import our new menu icon set into Menu Icons Plus.  Start Firefox, select the Tools menu, then Add-ons.  In the add-ons list, find Menu Icons Plus and click the Options button.  In the Menu Icons Plus preferences window, click on the "Icon set" panel if it is not already selected.  Now click the Advanced button and choose Import... from the drop-down menu.
On the first page of the import wizard (Step 1), click the Browse button and find the path to your PNG image file that contains all the icons.  Once you've chosen the correct image file, click the Next button at the bottom of the wizard.  Leave the radio button selected that says "Generate a stylesheet for me" and click the Next button again.  After clicking the Finish button, your icon set will be imported and you can press the Ok button to close the Menu Icon Plus preferences dialog.  Now your Firefox menus should show the new menu icons you just imported.  If at first they don't show up, try restarting Firefox to see if that helps.

Advanced icon sets

If you want to create an icon set that includes other menu icons in addition to the general commands listed above, you can specify your own stylesheet to go with your PNG icon set image file on Step 2 of the import wizard.  This is recommended only for advanced users who are familiar with CSS and how it is used inside Firefox.  To get started learning about this, you'll need to know all about CSS, and especially the selectors.  You'll also want to read this page and more importantly this one at MDN.  I also recommend you export one of the built-in icon sets from Menu Icons Plus and examine the stylesheet it uses.

That's it!  If you have any questions about this tutorial or suggestions for improving it, please let me know.  Thanks!

Make a free website with Yola