How and why to use Icon set in UI design

General Practice of using icons
Generally we have seperate icon file as image for an icon. I take and example lets say I have 10 icons on my page so 10 icon images in my application. there Images are embedded in page of css to display icons.
What is the problem in existing approach
Well From the functionality point of view there is no problem. Icons/images are the resources resides on application server .
I assume the hosting server is IIS in our case .When our page is loaded it asks for the icon images from the server and it provides those . IIS can parallely provide only 2 resources at a time (it could be css files , script file or image files or any other resources ). So for 10 images we need minimum 5 request to the webserver and this means longer response time.
How Icon set help
Idea of using iconset is pretty simple .We keep all out icons in one file (assuming we have defined dimentions of icons if not you need to fix those.)and than use these icons via css.Now we have only one file as icon so there will be iconset image file will be served and some other resource also be served to the browser.Now we have speed up our response time by minimum 5 times .
my icon set image looks like this

And on my page it look like this

Download sample from here

Iconset sample


6 thoughts on “How and why to use Icon set in UI design

  1. Though the point is right, I am concerned about IIS being able to provide only 2 items at a time. Do you have any reference for it? Also, we would still not have to make 5 different requests because the number of parallel HTTP requests would depend on the browser you are using. For IE9 it would be 12 parallel HTTP requests allowed.

    1. Probably I missed some points to mention in my post I assume My web application is website hosted on IIS 6 with standard configuration.Yes you are right Internet explorer >7 can make more than two resource request in parallel
      i.e ie8 can make 8 request and ie9 can make 12 request .But this does not mean that browser will get response for those 8 or 12 parallel request parralely. For example the standard installation of IIS/WAS is have only one worker process for application pool and it will process only 2 requests and rest of the request has to wait .

      So we need further configuration on our IIS server to handle more than on service.One of the the most commonly faced problem is WCF service thottling problem and reason is same i mentioned above.
      No doubt we can configure IIS as efficient as we want and ready to spend( to create web garden on 8 core machine) .

      With my best knowledge behavior of “HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_MAXCONNECTIONSPERSERVER” is still not behaves properly like i mentioned WCF throttling.

      have a nice day.

  2. I agree that using an icon set is faster as storing every single icon on the server. But: it also has some disadvantages..

    If you decide to change the size of a specific picture, this construct will crash, because for each icon, there is only a background-image set in the div. So if you decide to decrease the width of the image, it will crash, because of this background issue.
    Of course, there are some work arounds for that, but for myself, this is a point against using iconsets 🙂 If you are sure about the size of the icons and all your icons size on a specific page are equal, it’s probably a nice thing.

    Another thing is, that you already use the class attribute just for getting the image out of the icon set. If you want to give your icon another class, this won’t be possible ! And classes are holy and powerful 🙂

    1. Thanks for the comment and you are right at the point you have mentioned . But every solution is a for certain situations and scenarios. In my post i mentioned icon set in regards of improving performance.From being a good practice its good to have same size or icons.If you look at the JQuery-UI package you get different icon set with different size and color. have a nice time 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s