IconBuffet, as I've mentioned previously, is a very nice site, but it's not terribly easy to browse icons that you own. Some people use special programs to browse their accumulated sets, but I haven't found one so far that is a) free and b) bug-free. So last weekend I set out to create one that made me happy, and that was extremely simple to use. It's a PHP script that'll show you all your icons and sets, without any need to specify what icons to manage/look for. It'll tell you what the names of all your icons are, and give you links to easily download them. Because it would be against the spirit of IconBuffet to distribute their Free Deliveries, it's a good idea to run this script on a server that either doesn't have internet access, or has some kind of access restriction.

Usage instructions

  1. Download the icons.txt file, and rename it to index.php
  2. Create a folder to hold your icon database, eg: icons/, and move the index.php file into that directory
  3. Download your iconsets, and unzip them to icons/
  4. Browse your icon database.

The only problem that I know of with this setup is that your set names are case sensitive, so Dresden Atmosphere would come before alexandria audio in the listings. That's easy to fix on your end—just make all the folders the same case.

Download the script

Screenshots

The view of the entire database icons-1

The view of a set icons-2

The view of an icon icons-3

How I made the Browser

First, I had to identify three unique cases that would happen if I was using this system 1. I'd be looking at all the icons, 2. I'd be looking at a specific set, and 3. I'd want to download a specific icon in any format

I didn't want to have to do any setup for the Browser, beyond unzipping and renaming, so I'd have to dynamically determine what icons and sets were in the directory. glob() to the rescue.

Case #1: Browse the entire database

This happens then you go straight to the icons/ directory. In this case, we need to get a list of all the sets in the directory. That easy with the glob() function.

$dirs = glob("*", GLOB_ONLYDIR);

Then loop through each entry, (foreach($dirs as $dir) { ... }) and add a link to browse the set. In most cases, the icon set directory structure has folders for each icon format enclosed in the set folder, but in some cases (Super Modena Bros, et al), there are sub-sets for different colors of the parent set. I put in an example image with each title, and in the case of sub-sets, I linked directly to the sub-set rather than the parent set. I was able to gather the images with this call:

$images = glob($dir."/pngs/*_24.png");

I'm just arbitrarily using the PNG folder for my example image, but it really doesn't matter what you use. To get the example image, it's as easy as $images[0]. I knew there were subsets if the images array was empty. In that case, I got the images and subsets like this:

$images = glob($dir."/*/pngs/*_24.png"); $sets = glob($dir."/*", GLOB_ONLYDIR);

After that, it's only a matter of displaying the title of the set, the image, and a link to the set.

Case 2: Displaying a specific set

I linked all the sets in the last case to ?set=$dir, so in this case I can take that set variable and get all the images in that folder.

$images = glob($_GET["set"]."/pngs/*_24.png");

Then, I can display all the icons (after modifying the title a little) with a link to the specific icon. Basically, to get the title, I remove the set and png path info from the images[i] value, take off the '_24.png' data because I don't need that, and replace spaces with underscores. Then, I display a link with the title and the 24px png to the specific image. I use another $_GET variable to hold the image name.

Case 3: Displaying a specific image

There's two formats for how the individual files are stored in each set folder, and that's either in a folder containing all the image files (png/, jpg/, gif/, etc...) or in a folder like "win icos/16x16/". Getting all those images requires two glob calls, one for each case:

$images = glob($_GET["set"].'/*/'.$_GET["img"].'*'); $icons = glob($_GET["set"].'/*/*/'.$_GET["img"].'*');

And then an array_merge() call to combine them. Then, display a link to the image, and output links to all the specific image files, and it's good to go.

After that, it's only a matter of adding some CSS to make it look pretty. I used the IconBuffet colors to make my browser look visually similar to the site.