Web Design Tutorials and Tips

Icons are everywhere in a website and their primary purpose of guiding and giving out information to visitors is a highly important one. Other than words themselves, these little graphics within a website that tells you how you can move to the next page, cancel a transaction, checkout the cart and the likes, basically the entire navigation. In a general sense, they act as symbols that allow easier and smoother communication between the webpage and the person interacting with it.

Depending on the web context, icons should be designed in a manner that are pleasing to the eyes, and most importantly, communicate what it is suppose to communicate. Here’s a showcase of 40 Free and Useful Icon Sets for your reference. Full list after jump.

Function Icon Set | Download
128 Icons, they are only available in 48×48px. [via wefunction]

Onebit Free Icon Set | Download
A total of 50 icons. These icons are free to use in any kind of project unlimited times .[via Icojoy]

Onebit Free Icon Set 2 | Download
Total of 30 icons, 48×48 in PNG format. [via Icojoy]

WP WooThemes Ultimate Icon Set | Download
The free download contains all 79 icons, sized at 256×256 pixels and available in both PNG and GIF formats. [via WooThemes]

SEM Labs Web Blog Icon Pack | Download
48x 48 icons for use on the front and back-end of the site released under the Creative Commons License. [via semlabs]

Bright! | Download
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.[via iconeden]

Milky | Download
The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds. [via iconeden]

Iconza Icons | Download
Collection of free icons that can be colored and reduced in size to your taste. [via Iconza]

Basic Set | Download
42 high quality icons for your web application, software or GUI design. Comes in various sizes of 64×64, 48×48, 32×32 & 16×16. [via prokofusha]

MinIcons | Download [via kyo-tux]

Coquette Icons Set | Download
Free icon set contains 50 high quality, free icons in these sizes: 16x16px, 32x32px, 48x48px, 64x64px and 128x128px and 32-bit transparency PNG file format. [via dryicons]

Coquette Icons Set 2 | Download
Improved version of one of DryIcons’ most downloaded and most popular free icons sets. [via dryicons]

Dropline Nuovo | Download

Developers Icons | Download
105 icons (32×32) for your toolbar or anything. Comes in .png, .ICO, .ICNS, .iContainer. [via Sekkyumu]

Circular Icons | Download
A themed collection of 100+ 16×16 icons designed by Ben Gillbank, licensed under the Creative Commons Attribution 2.5 License. [via Pro Theme Design]

Web Application Icons Set | Download
20 icons designed specially for web applications, Free Web Application Icons Set is completely Free for both personal and commercial projects in any way you like. [via Webappers]

Mini and Pixel Icons

If large and silky smooth icons aren’t the style you are looking for, how about simple, mini and pixelated one. Such icons can save significant amount of space for your website. Did we also mention their are light in filesize too?

Twotiny | Download
Two icons setsfor websites and web applications.

Twotiny Expansion Set | Download

Icons | Download
A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. [via Paul Armstrong]

Tango Icon Library | Download
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help. [via Tango]

Mini Icons 2 | Download
113 10×10 greyscale icons in .gif format. [via brandspankingnew]

Mini Pixel Icons | Download
320 icons (available in various color theme) for general web design such as: blog themes, forums, eCommerce sites, and CMS application. [via Icondock]

Web Social Icons | Download
30 free web social icons, great for your website and blog. [via seanau]

Microformats
These icons can be used to depict various microformats in webpages or on the desktop.

512 Pixel LED Icon Set | Download
Designed for web designers/developers by Marcis Gasuns. [via Led24]

Iconjoy Free Web Development Icons- These icons are free to use in any kind of project unlimited times.

Set #1 | Download

Set #4 | Download

Greyscale | Download
40 greyscale icons which each fit into a 34 x 34 pixel area. [via e-lusion]

FamFamFam Icons
Silk | Download

Mini | Download
"Mini" is a set of 144 GIF icons available for free use for any purpose.

Flags | Download
247 icons in GIF and PNG formats representing most countries in the world as small pixel icons.

Splashy Icons | Download
470 splashy icons.

Bitcons | Download
Mini-pixel icon set (16×16 pixels) containing 91 121 individual icons for various subjects. [via somerandomdude]

Bullet Madness
A list of 200 bullets, arrows and icons uploaded by stylegala users.

Minimalist Pixel Icon Set | Download
[via nclud]

Fugue | Download
2,225 icons are included in PNG format (16×16 pixel). [via pinvoke]

Sizcons | Download
Comes in 2 different format: 16×16 version and a 12×12 version. [via randomjabber]

Social Media Icon Pack | Download
This icon set consists of 30 (16×16) finely crafted social media icons. They are free to use non-commercially. [via Komodo Media]

Sweetie
2 sets of cute and clear icons to use in your nifty web application, respectively Sweetie BasePack and Sweetie WebCommunication. [via sublink]

Vaga | Download
60, semi-transparent .png icons (16 x 16) ready to use and available for free download. [via tenbytwenty]