Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

Building Icons

by Mike Perrucci


Summary : An icon is a small image that represents a function or group. For example, you click on a picture of a printer when you want to print a document from your computer, or a green thumb to find web sites about gardening. A great icon has the ability to instantly tell the viewer its purpose.

An icon is a small image that represents a function or group. For example, you click on a picture of a printer when you want to print a document from your computer, or a green thumb to find web sites about gardening. A great icon has the ability to instantly tell the viewer its purpose.

Making your own icons can be tricky. The most obvious obstacle is their small size. Imagine trying to paint on the head of a pin, and what you would need to accomplish this. Your two best tools would be a magnifying lens and a tiny paintbrush.

Creating icons uses these same principles. First, you'll need a Magnify or Zoom tool to make it easier to draw where you intend to. Now you can use the smallest Paintbrush size possible to color the icon one dot at a time. As you are drawing, it's a good idea to zoom out every now and then to see how your icon looks at actual size.

Complex objects need to be simplified because there is no room for tiny details. Look at the guitar example:

Even though there are no indications of any frets or strings, you can still tell it's a guitar by its shape and color.

Drawing good icons may take some practice. The technique is an art form in itself, and is often referred to as pixel art. Painting on a large canvas gives you the freedom to make large, expressive brush strokes. Pixel art often requires more precision.

There are many different types of icons you make and a lot of ways to use them, including logos, bullets, fictional characters, blinkies, and smilies. You can even replace the program and document icons used by your computer with your own designs. You can find examples all over the Internet, so there's no shortage of inspiration for icon newbies!

If you just want to find some premade icons, check out the Bravenet clipart area!