I’ve been working on an icon set off and on for a number of months—basically whenver I can find a few spare minutes here and there. I’ve finally completed the entire set, including 40 total icons, designed in a minimal, pictogram style. You may recognize some of these icons too! The set actually started as the collection that I specifically designed for the current version of this blog, and I’ve just been adding some extra icons as time went on.

The first ten are basically just simplified icons for some of the more popular social media and social voting sites, mostly design related. Again, you can see these icons in action by scrolling down to the bottom of this post.

For the rest of the icons, I actually reviewed a number of different websites and tried to compile a list of what would be some of the most useful types of icons, and used my findings to guide the design of the rest of the set. Here is a preview of all 40 icons.

Here's a preview of all 40 icons included in the set

The icons themselves are all vector-based, and designed in Illustrator CS4. They scale up and down well, and remain fully editable, in case you need to make slight (or even significant) changes. Also, they are designed as fully “cut out”, meaning that the various negative areas within the icons are actually transparent and not white. This should work fine in the majority of cases, but if you do need these areas to be filled with white, just drop a white shape behind the icons!

To download this set, just click on the image below!

Echo Minimal Icon Set (Downloaded 5159 times)

The set is completely free, and you can use it in both personal and commercial works. There are just a few simple restrictions, which are outlined in the release file included in the download, so please review that document before using the icons. Also, If you do any of them design, please consider shooting me an email. I always love to see my freebies hard at work, and I would really like to see what you’ve come up with.

Let me know your thoughts on this one! Do you like the icons? Would you like to see more icon freebies on here?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

CSS is a remarkable technology, capable of doing things that I wouldn’t have even dreamed of when I was first introduced to it. And, with added support for rounded corners, box shadows, text shadows, rotation and a wide range of other possibilities, web designers and developers can accomplish all sorts of amazing things when it comes to applying a design to a website.

But are we starting to take things too far?

The design community is awash with all kinds of different “CSS experiments” where people attempt to do some pretty incredible stuff (and quite often succeed). In an article I wrote for Six Revisions a couple months ago, I listed five of the experiments that I found really interesting:

• CSS3 Transforms & @font-face Experiment
• CSS Posters
• Pure CSS Line Graph
• CSS3 Leopard-style Stacks
• Pure CSS Twitter Fail Whale

Each of these experiments takes a different approach. Some, like the line graph, have some practical applications in the real world, while others like the CSS fail whale are completely and entirely impractical. It’s certainly interesting to know that it can be done, but that doesn’t necessarily mean that it should be done.

Let’s Be Practical

I’ve been thinking this way for a while, but it was really cemented in my mind when I recently read Faruk Ateş recent article “Pure CSS Icons: Make The Madness Stop,” which I picked up on from a short post over on Think Vitamin. In his article, Ateş notes that “some people have started experimenting with CSS as a ‘design tool’ and it suddenly hit upon a large audience.” He also writes:

how usable are these snippets of CSS and markup, really? Is it easy to plug them into your website as you’re designing it? No. Is it easy to plug them into your website as you’re developing it? No. Is it easy to adjust them once they have been integrated into your website? No, no, no!

I have to agree wholeheartedly with this. Before this week, I’d looked at a bunch of the CSS experiments out there, and occasionally appreciated some of what they manage to do, but i had never really taken the time to examine the actual styles themselves. So, I took a gander at the code for these CSS social networking buttons:

Social media icons created entirely with CSS

Just as I expected, there are lines and lines of different styles, all just to create one icon. Is it impressive? Yes. Creative? Certainly. But it’s just not practical. This is also not an easy way to create icons. It probably takes long hours of careful consideration and experimentation to create these kind of graphics. I could create similar icons in Photoshop in less than an hour, and they would probably look better too (smoother, better anti-aliasing).

Finally, as Ateş clearly notes, the whole concept of maintenance becomes problematic. Adjusting an icon should be about moving pixels, not about changing CSS rules. It just screams at me as being the epitome of impracticality.

Of course, it should be noted that Nicolas Gallagher, the creator of the above cited icons does make note that “CSS is not necessarily the most appropriate tool for this kind of thing” (again, cited by Ateş).

HTTP Requests?

While Gallagher’s icons are presented and framed mostly as an experiment, there is another set called “Peculiar” which is actually available for sale. Yes, that’s right, they are now selling CSS icons – and at $25 for just 45 icons, the price seems a little steep too. Here is the preview of the icon pack:

These icons are created entirely using CSS

Honestly, I like the look of these icons. They are small, elegant and beautifully wroght, and so from a craftsman’s perspective, I tip my hat to Lucian Marin for his fine design work.

However, in the preamble to the Peculiar site, he writes “It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.” Now, I understand the need to cut down on HTTP requests to improve the overall responsiveness of and load times of our sites. Really, I get it.

But, before everyone starts running out and buying up CSS icons left, right and center, I just have to ask: is one more request really going to make that much of a difference? Because all you need is one. A single, well crafted CSS sprite can contain all of these icons, in multiple hover states if you need them too. Then, all your styling is just a matter of background positioning.

Also, I have to wonder how much bandwidth difference there would be. I’m not about to fork out $25 to download icons that I’ll never use, so I’m not sure how much styling there is involved with these little beauties. Based on what I saw from the Gallagher example though, I would imagine it would be a fair bit. Even minified, it’s probably still going to be a significant amount of data, and with the really minimal amount of colour data that would be involved with creating a CSS sprite of these icons, I just don’t feel that one extra HTTP request and a few extra bytes of information is really worth the hassle.

In the Spirit of Semantics

I’ll admit that I’m occasionally as guilty as the next guy for occasionally adding in an extra
<div> or <span> to be able to achieve something visually on a site that I can’t seem to figure out how to do otherwise (or at least can’t figure out how to do efficiently). I try to avoid it, though, and the last thing I want to do is to start filling up my code with all sorts of extra tags to help build CSS icons.

That’s just not semantic coding.

Now, looking at the Gallagher example, he does an excellent job of keeping his markup beautifully clean, relying heavily on the :before and :after psuedo-classes for apply his styling. So, from an HTML perspective, I would have to say this is semantic (though I’m sure that many other examples utilize some excessive HTML elements, just for the purposes of providing “hooks” for their styles).

That being said, semantics is a discipline all about of meaning, and semantic HTML is about writing code that supports the meaning of a document, while using CSS to dictate the visual rules by which that content is displayed. CSS is about taking the form and structure of the document and representing it in the browser. Or, to put it another way, it’s about facilitating the graphical presentation of content.

It’s not about creating the graphics themselves.

That’s the realm of vector-based and/or pixel crunching software like Photoshop, Fireworks, Illustrator and so on. And so, it seems to me that using CSS to create graphical elements like icons goes against the very purpose for which the technology was ultimately created. By doing so, it deviates from its own core meaning, and therefore strikes me as unsemantic, at the very least in spirit if not in a strictly literal sense.

Tables Again?

Though it doesn’t form a perfect parallel, in some ways this issue of CSS icons (or other graphics) can be compared to using tables for layout. There are a few key reasons why tables for layout is a bad idea:

1. Bloat – All the necessary table tags fill up your HTML, making it big and ugly and an absolute nightmare to manage. I used to use tables back in the day, and I hated it for this very reason
2. Inflexible – Tables are rigid, unmoving things, and getting them to do anything even remotely complex was a huge pain. Empty cells and complex ROWSPAN and COLSPAN properties can only take you so far without becoming entirely unmanageble.
3. Purpose – Most of all, we have to recognize that it just wasn’t what tables were designed to do. Tables exist in HTML for the purpose of presenting tabular data, not for creating layouts. Yes, you can, create layouts with them. Yes, with a bit (or a lot) of effort, you can bend them to your will, but it’s just not what they were created to do.

If you’ve been around the web design and devlopment industry for very long, you probably already know how much of a faux pas table-based design is considered. Well, when it comes to CSS icons, consider these thoughts:

1. Bloat – All the necessary CSS declarations will really bloat up your style sheets, making them an absolute nightmare to manage. Wait, didn’t I just write those same words? Also, depending on how the icons are achieved, you might find your HTML bloating up with extra elements too.
2. Inflexible – Again I admit that people have done some really incredible things with CSS, but compared with a real graphics program, CSS generated graphics are incredibly limited in what they can do.
3. Purpose – As we’ve already discussed at some length, CSS wasn’t designed as a tool for creating graphics, despite the fact that people are able to do some pretty amazing things with them, like the Peculiar and social media icons we’ve already looked at. Impressive? Yes. The right tool? No.

Obviously, there are some key differences between CSS icons and using tables as a layout tool, but the similarities in these three areas are somewhat startling. I also think it works as a really excellent illustration of something that I pointed out back at the beginning of this article: that just because something can be done doesn’t mean that it should be done.

Conclusion

Of course all of this is my personal opinion, and I leave the final decesion up to you. If you think that CSS icons make sense for you to use in your own work, then feel free to take advantage of them. I’m also not trying to talk Marin out of making any money from his Peculiar icon set. If he can manage it, then more power to him.

This article was simply the presentation of my own thoughts on why I don’t thinks that CSS icons (or any other, similar graphic) are really a viable solution for displaying graphics on the web. I hope my points were clear enough, and that they provided some food for thought on this particular subject.

What about you? How do you feel about the idea if CSS icons? Do you think they are viable? Would you ever consider implementing them into one of your own websites?I’d love to hear your thoughts on this.

Note: Main article image supplied via ShutterStock

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

As a designer, writer, husband and father (among other things), my life is pretty full and I absolutely love pretty much anything that can save me time. This is especially true when doing my work as a designer. Over the years, I’ve come across a number of awesome little websites and web apps, created by brilliantly helpful people to make my life easier – and yours too.

So, in this article, I’ve decided to share some of my favorite online resources. This isn’t to say that they are necessarily the best or the most powerful. They’re just the ones that I like to use. Some of them are generators of sorts, while others offer customizable and downloadable content that you can use in your own work.

Grids

I like using grids when I build websites, and the one I use most often is probably the 960 grid system, which I wrote about in one of my first posts on this blog. Not only does the grid allow me to create a beautiful, proportionate structure for my designs, it also provides an excellent and consistent framework. This, in turn, means that I can build concepts and prototypes faster than I could if I was coding the entire thing from scratch.

I’ve found this to be especially useful in my last few projects, in which I did a lot more of the design work in the browser itself, rather than mocking it all up in Photoshop.

Anyhow, while the plain-jane 960 grid worked well enough for me for my first few grid-based sites, I’ve been finding more and more that I want to tweak the basic parameters of the grid. For instance, I may want to increase the size of the gutter between columns, or change the number of columns from the standard 12, 16 or 24. Well, there are some awesome grid generator tools out there that I’ve used to do this.

Grid System Generator

The Grid System Generator is a great tool. Personally, I was first drawn to it because it could allow me to customize the standard 960.gs that I had become so accustomed to using. It allows me to specify different widths for the document, change the number of columns, and tweak the spacing of the gutter (through left and right margins). Yet, while CSS is adjusted for my settings, the basic syntax remains the same!

Generate custom CSS grids based on four different frameworks

The Grid System Generator isn’t a one-system app, though. You can also generate custom grid frameworks based on the Golden Grid, 1KB Grid and Simple Grid systems, making it a truly flexible tool with appeal and practical application for a wide range of designers and developers.

Tiny Fluid Grid

As a matter of personal preference when it comes to coding, I tend to prefer working with fixed-width layouts. It just tends to match the way I think – mostly in exact pixel widths. However, on one website that I was designing recently, the background image was extremely important for my client, and because I was using a base width of 960 pixels, this background became somewhat obscured on displays set to 1024 pixels in width.

So, I needed a way to shrink the content area down for smaller displays, while still maintaining the default width for larger displays. In other words, I needed a fluid grid. I could probably have done the math myself and converted the existing, static grid to a fluid one, but fortunately I had just discovered the Tiny Fluid Grid generator a few days earlier!

Generate a custom fluid grid based on the 1KB Grid system

This little web app will generate a fluid grid – based on the 1KB Grid System – and allows you to select the number of columns, the percentage width of the gutter, and (most importantly) the minimum and maximum widths of the grid itself. The syntax is pretty similar to the 960.gs, so I only had to make one slight tweak to the CSS to apply the grid to the existing site, though I had some other CSS trickery to do to force the grid to shrink down when I wanted it to.

Regardless, Tiny Fluid Grid was a real life saver on that project. It also has an awesome GUI. While most other generators just accept numeric input, this one has some really slick sliders that just make it fun to play with!

Typography

Obviously, typography is a hugely important aspect of any design, and the web is no exception. With the increasingly broad browser support for @font-face, and with font replacement services like TypeKit, designers are finding more and more freedom to do incredible things with typography on the web.

It has also paved the way for some really awesome typography-based tools on the web.

Font Squirrel

Looking to add some flair to your website, and move away from standard, web-safe fonts? Using @font-face is a great way to do this, but there are all kinds of licensing issues to be considered before you go uploading fonts to your server. There are also conversions to be made to account for the widest possible browser support.

Font Squirrel helps alleviate some of these issues.

Find fonts and download kits for @font-face integration

It is basically a repository of different fonts which, based on Font Squirrel’s interpretation of their licensing, are freely available to use on your websites. That’s pretty awesome. But it gets even better. The site also allows you to download @font-face kits, which include the font files along with a complete stylesheet that you can easily integrate into your own code.

It has made finding and integrating new fonts into my website an absolute dream.

What the Font?

Ever seen a cool font and wondered what it was? If it was from a famous image or logo, you may be able to find the answer on a forum somewhere (I have before), but that’s not always going to work for everyone. Well, the folks at MyFonts.com have developed a handy little app that you can use to try to satisfy your curiosity. Meet WhatTheFont.

Use this tool to identify cool fonts

Basically, you take a screenshot or photograph of some typography – preferably something unique and well spaced – and upload it to the site. It will then try to decipher the different characters and ask you to confirm that it identified the letters properly. One you’ve done that, the app will go out and try to determine what the font is.

Obviously, it’s not perfect, and the results are going to depend a great deal on the quality of the original source image. From what I can tell, the results also appear to be from MyFont’s own library (which really makes sense, all things considered). Still, it’s a useful little tool that’s fun to play with, and which can potentially introduce you to some awesome new typefaces. I have an app for my iPhone too!

Icons

I love icons. I love finding them, designing them and finding interesting ways of integrating them into my work. A few months ago, I also wrote a series about using icons on the web. All that being said, there are a few really awesome icon resources out there.

Iconza

Iconza is a free icon set fused together with a customizable generator. Basically, it is a set of 112 awesome, monochromatic icons that you can download and use in your designs (with attribution). All on its own, that’s pretty awesome. But it gets better.

Download this icon set with customized size and colour

The Iconza website actually allows for a reasonably broad range of customization options. There are 15 different colour options, including five shades ranging from black, to grey, to white. There are also three different sizes – 32×32, 24×24 and 16×16, and even just a cursory glance will reveal that the icons are optimized for quality at each size, rather than just scaled down. Lastly, this little web app provides an RGB colour selector for setting the background colour of the icons.

Feedicons.com

There is no shortage of RSS icons out there on the web, but if you’re looking for a nice simple solution for your visual RSS needs, then Feedicons.com could be a great solution for you.

Free and simple RSS icons

There are a few different download options, such as a 2 icon pack of 28×28 and 14×14 (the smaller one does look a bit off though). There is also a tiny pack of coloured 12×12 icons. The big one, however, is the developer pack, which contains icons ranging from 12×12 to 128×128, in all kinds of different image formats including editable vectors. This allows you all kinds of flexibility to customize the icons.

iconSweets

Monochromatic icons are probably some of the most useful, in terms of being able to easily integrate them into so many different types of designs, and there are so many different places to find and download such icons. One of my recent favorites is the iconSweet set, by YummyGum.

60 simple and beautiful monochrome icons

This pack contains 60 beautifully designed vector icons that appear to be designed primarily for use in your next iPhone or iPad app, but which could easily also become a focal point of your next web design too. Again, the fact that they are vector based makes them extremely customizable, which is always a bonus for any designer.

Admittedly, I also just really love the design of the website, which is part of the reason that I chose to include this particular set over some of the many others. The pink and grey colour palette and sliding images within the balloon are all really slick. That being said, however, there are lots of other similar sets available out there. To find more, check out this recent article of at SpyreStudios: 40 Minimalist Icon, Symbol & Pictogram Sets.

Other Graphics

As great as icons are, however, they are not the be all and end all of supporting graphics, and there a few other cool graphic-generating web apps that I really dig.

Placehold.it

When building prototypes and mockups of websites, I often don’t have actual images that stick in yet, and need to create a placeholder image. Traditionally, what I used to do was to create a single pixel image and then adjust the properties to stretch it out the the required size. That worked pretty well, but thanks to a recent tweet from SwissMiss, I discovered this incredibly simple and useful little site called Placehold.it.

Grab simple placeholder images of any size

Basically, this simple web app does one thing – it generates greyscale placeholder images of absolutely any size, all with a really simple, URL based syntax that is super easy to remember. All you have to do is insert the appropriate URL into your code, and the app will serve up a placeholder image for you.

It may not seem like a huge deal, but I’m pretty excited about this recent find. I can see it saving me a ton of time in future projects.

StripeMania

Stripes don’t seem to quite as popular in web design as they were two or three years ago, but they’re still something that will never really go out of style entirely. Every once in a while, I find myself needing some stripes for this or that – and not always just for on the web.

StripeMania is an awesome little web app that I’ve blogged about before in my article “17 Useful Pattern Resources“, which I always return to when I need some kind of repeating stripe pattern.

Stripemania

For an app that just generates stripes – something that might seem relatively simple – there are a surprising number of options and controls on this one. You can adjust the stripe width, the spacing width, the orientation, the colours of the stripes and the background and so forth. You can even set a gradient. All this makes for a powerful little tool with almost limitless customization.

AjaxLoad

If your websites are loading any kind of dynamic data through either AJAX or some other custom methodology, chances are that you’re going to want to include some sort of animated graphic, in order to indicate to the user that the data is actually loading. The AjaxLoad site is an awesome solution for this need.

AjaxLoad allows you to generate custom loading animations in GIF format

You can select from over 30 different animated graphics, select the foreground colour and the background colour, then generate and download an animated GIF based on your choices. If you want, you can even make the background transparent, though of course you’ll have to take into consideration the natural drawbacks of GIF transparency.

With the broad range of animations and the extensive customization, this little resource is a great one to keep in your bookmarks!

Conclusion

Obviously, this list is not an exhaustive roundup of all the different resources that are out there on the web. Such a list would be much, much longer and would include all kinds of goodies and awesomeness that I didn’t have the chance to include here. As I stated in the opening, these are merely some of my favorite, bookmarked resources, which I thought might be worth sharing.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

We’ve come a long way over the past few weeks, discussing what icons are and why they are important, where to find them, how to organize them and (most recently) some tips on how to best implement them into your own web designs! This will be the second to last installment of this series (and the last actual article), in which we will be looking at some things that you may want to keep in mind when creating and modifying icon sets.

Icons and the Web – Part 5: Creating and Modifying Icon Sets

Sometimes, you may find that nearly-perfect set that has almost everything you need. There’s just one or two key icons missing. Or, maybe you’ve implemented icons into a site and you (or your client) wants to change something or add in some new functionality. It can be incredibly frustrating to find that the set you built the site around just doesn’t have an appropriate icon.

There are a couple of things you can do when this problem strikes.

One option is to go back out there on the web and see if you can find something that would blend in nicely, even though it’s not from the same set. Many icons sets can have very similar styles and appearances, allowing you to blend them together while still maintaining consistency (as discussed in part 4).

On one recent project, I was using an icon set that met pretty everything I needed. One thing it was missing, however, was a Twitter icon. Given the hundreds (and probably thousands) of Twitter icons that exist out there on the internet, it was relatively easy for me to track down one that blended nicely into the site with the rest of the icons.

You won’t always be so lucky, though, and the other option for dealing with this issue is to either create a new icon, or at least significantly modify one that already exists. Here are some things that I’ve learned to consider through my own work in this area:

Pencil and Paper

One of the best places to start when doing any kind of icon development is always the good old fashioned pencil and paper. Go ahead and break out the old sketchpad (or Moleskine, if you are so inclined) and just start sketching. If you are creating a new set, let your imagination and creative juices flow. If you are editing or expanding on an existing set, the pencil and paper method can be a great way to create a study of the set, locating some of the common features or traits that really bring and hold the set together.

Also, always remember that the sketching stage should always be really natural and organic. There’s no need to create a perfect drawing facsimile of your final icon design. For example, consider this initial sketch, as featured on an icon design tutorial over on eyesontutorials:

Examples of sketching out an icon design

The drawings themselves are really just rough and sketchy, and have only a conceptual relation to the final icon, which looks like this:

The final, fully rendered icon

The point of working with pen and paper is just to get your mind working and rolling. In my experience, there is just something that much more natural about drawing by hand (and not on the computer), something which is able to work as a spark for imagination and creativity.

Quick Colour Changes

Probably the most common change that I typically want to make with a lot of the icons that I use is to change the colour. They might be awesome icons in their own right, but their colour might just not fit into the overall design that I’m working on. Depending on what kind file type I am working with, I can usually use either Photoshop or Illustrator to accomplish to make a change.

If the icons come in a raster format (usually PNG), I will often just use a Hue/Saturation adjustment layer to modify the colours. If I am working with multiple icons, I can also use this same adjustment to apply the change across the entire set. In my experience, this method usually works best with monochromatic icons, or for turning full colour icons into monochromatic icons.

You can also use the Hue/Saturation adjustment layers for more precise colour control. For more information about that, check out the tutorial that I recently wrote on this very subject: Quick Tip: Precision Colour Control in Photoshop.

If I am working with a set of vector icons (EPS or AI), extensive colour changes can usually be achieved by simply selecting the different shapes and adjust the colours as necessary. Of course, depending on the complexity of the icons, changing colour this way can likely become more than a little tedious – especially if there is significant use of the gradient mesh.

Using Swatches

Photoshop and Illustrator both have a swatches palettes that can be incredibly valuable tools when designing, editing or expanding icons sets, since they allow you quick access to standardized colours. Again, this can help you maintain consistency between the icons within a single set.

However, swatches in Photoshop actually work quite differently than swatches in Illustrator, which can have a fairly significant impact on how you can use them.

In Photoshop, swatches work in a way that is very similar to brushes, in that they are an application level function. This means that when you create a swatch it becomes available for every document that you open. If you want to keep your swatches organized by project, then you will likely want to export each swatch set that you create to its own file, then import them again as required.

In Illustrator, swatches exist as a document level function. Again, this is similar to the application’s use of brushes. Your group of saved swatches is actually stored inside of the document itself, meaning that the swatches that will be available in the palette will vary from file to file. Illustrator also allows you to create and store gradient swatches, which is something that doesn’t exist in Photoshop (at least not exactly – you can create and save gradients through separate functionality).

Given this difference, swatches in Photoshop work more as a quick colour selector, allowing you to very quickly apply identical colours throughout an icon design. They are even more useful in Illustrator, however, especially if you are editing or adding to a set that is built off of a specific swatch collection. If this is the case, then the specific swatches used will be saved right in the document, allowing you quick access to those colours and gradients.

That’s a lot of discussion so far. Let me show you what I mean. During the recent redesign of the Highland Marketing website, I implemented the Milky set from IconEden. This set is available as an EPS, which actually includes the complete set of swatches that are used throughout the set. As it turns out, I had to create a few extra icons that didn’t exist in the original pack, and was able to do so using the pre-existing swatches to help them match the rest of the set – without having to guess or use the eyedropper tool!

Original icons, new icons and the swatches

As you can see, swatches are a great tool for helping to create and edit icons with consistent colours.

Grids

One of the things that I have mentioned about looking for consistency between icons is to pay close attention to perspective – or what we could also call camera angle. Dramatic variation in either of these can cause visual inconsistency between icons.

Grids are a great way to help keep things in perspective (and proportion), and there are several different ways of approaching building on a grid, all depending on what you are trying to do.

The simplest of these options is probably to just use the grids that are available in both Photoshop and Illustrator. This works the best for flat, two dimensional icons – in other words, icons that have no real perspective. It can be used to maintain certain levels of proportion for the size of various elements.

If you are wanting to create icons with a common form of perspective, you can also create grids to help you with this too. First, if you understand basic concepts of two or three point perspective in traditional art, it can be useful to create a grid based on the simple perspective lines. For example, here is a simple two-point perspective grid that I created in Illustrator:

A grid based on 2-point perspective

The perspective lines are pretty strong on this one, which would mean that, if I was to use the full artboard, the icons would have some strong perspective.

Of course, if you have already upgraded to CS5 (I have not), then your Illustrator will already have a built-in perspective grid. Check out the Adobe documentation for more details.

Another perspective option is to use an isometric grid. This technique is basically a means of creating the illusion of depth, without adhering to the specific rules of traditional artistic perspective. Wikipedia explains if like this:

Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees.

Basically, all of the main “perspective” lines adhere to a standardized grid in which, unlike my perspective grid, every single quadrant is identical in terms of area and angles. Here is a basic isometric grid that I created for a project:

A basic isometric grid

Personally, if you’re working with icons that are set on an angle, I find that the isometric method is actually better to work with than traditional perspective, since all of the line work is standardized. It also make it easier to create a complete matrix of icons, all with the same apparent perspective! Here is an example of some really great isometric icons from monofactor:

Free Vector Icon Set 2 – Turqua – 3D Isometric Icons

Notice the consistency in the angles and the main perspective lines in these icons. As I’ve already mentioned, it really helps to bring the whole set together with a nice, consistent visual appeal!

Additional Resources

So, in this article, I’ve tried to cover some areas that I haven’t seen talked about a great deal when it comes to icon design (which is not to say that they haven’t been discussed at all). Of course, there are a thousand and one other things that I could touch on when it comes to this subject – vector vs. pixel formats and sizing for example, but we’ve done had a lot of discussion on the subject over the five parts in this series. So I’ll pretty much wrap it up now. If you want to read more, however, here are a few excellent resources for you to check out.

• Icon Design Explained (Quickly)
• 50 Excellent Icon Design Tutorials
• Photoshop Tutorial: Realistic, High quality printer icon
• 7 Principles of Effective Icon Design
• 10 Mistakes in Icon Design
• Icon Design: Bitmap vs Vector

Conclusion

That pretty much bring our series on Icons and the Web to a close. Almost. This will definitely be the last article in the series, but I do have one more post planned – in the form of a free, 12 piece icon set designed by me exclusively for readers of the Echo Enduring Blog. It should be released soon, so keep an eye out for it.

In the meantime, I’d love to hear some feedback on this article and the series in general. Are there any other important elements to consider when creating icons, or about icons and the web in general. Please feel free to chime in with your own thoughts and opinions on this!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

So, here we are in the fourth part of this series about icons and the web. So far we have talked about why icons are important, where to find them and how to organize them. This is all very good, solid information, but it becomes very meaningless very quickly if you never get to the point of actually implementing those icons into your design!

Icons and the Web - Part 4: Implementation

That’s what this article is going to be all about. We’ll look at some of the things that you are going to want to keep in mind when adding icons to a website. We’ll cover consistency, size, image types, sprites, metaphor and cultural differences, all of which will make for a fairly extensive article. That being said, however, I want to stress that this discussion is meant only as a general set of guidelines, and not as hard fast rules that absolutely need to be followed.

So let’s get started!

Consistency

One of the most important things to remember when implementing icons into your web designs is the concept of consistency. In its most basic form, this means using icons that work together, or that at least don’t fight with each other. There are several different ways to look at consitency.

First, you may want to consider general style. If most of the icons that you are using are of the glossy or shinny variety, chances are that you are not going to want to throw a grunge icon or a sticker icon into the mix. It just wouldn’t fit. Instead, everything should have a nice, unified appearance. The website for the OS X task management app Things does a good job of this.

Simple, consistent icons

All of the icons have a similar feel and general aesthetic appearance. Imagine how the continuity would be effected if all of the icons were from different sets. It would certainly be lessened (or perhaps completely broken) and the overall design would surely suffer because of it.

Another area that can help maintain consistency between icons is a focus on colour. Many icon packs have a tendency to use similar hues and shades throughout their various icons. For example, the Shine pack from IconEden uses a the same basic green, orange and light grey scheme through most of the set.

Colour helps to establish unity in this set

This certainly builds a very strong sense of continuity throughout all the icons, a continuity that would be translated into any website that implemented these.

Perspective, position and rotation can also play a strong role in consistency. Many sets will use a common “camera angle” for all of their icons. Often, focus on perspective becomes a crucial element of the overall design. For example, here are some icons from two different social media sets from IconShock:

Different icons at different angles

Notice that, though each set is awesome and detailed, they are each set at significantly different angles. As such, combining icons from these two sets would likely cause real sense of disunity, making a design feel awkward or unfinished.

Size

Icons come in all different sizes, and when you’re looking to include them in your web designs, there are several size related issues that you should consider.

The first is the purpose for which you will be using the icons. There are many different reasons why you might want to include an icon in a site design, and for each reason, a different icon size might be more appropriate. Here are just a few examples.

Tools or Options – If your site is more of an application based site, then you will likely be using several icons to help represent different types of functionality within your site. In this case, small and simple icons will generally be more useful. Facebook is a perfect example.

Facebook makes excellent use of smaller icons

This is a screenshot from the current Facebook sidebar. Each link leads to a specific application within the site, and is represented by its own unique icon.

Visual Meaning – Many pages elect to use icons to help support an idea or concept. This is particularly popular for sites listing a collection of features for a given service or product. In this situation, a medium sized icon will generally work the best. Here is an example from the website of Episodic, and online video platform.

Medium sized icons used to emphasize meaning

Each icon supports a different feature of the product that they are offering. They are chosen to visually reinforce the message behind each feature, and also work very well to break up what would otherwise be a great deal of text.

Also, notice the size of the icons. They are not nearly as small the ones we saw in the Facebook screenshot, and are large enough to have a nice, somewhat glossy effect on them. However, they are not so large as to be distracting. Of course, the exact size for this kind of icon use is going to vary from page to page. The more features you have, the smaller you will probably want to make the icons, just for the sake of balance. On the other hand, if there are only two or three features, you could also make the icons a bit larger, to really draw attention.

Application Websites – Another use of icons on websites can take an almost logo-like approach, especially for sites whose primary purpose is to promote a particular program or application. The atebits home page is a perfect example of this, featuring the icons for its Scribbles, Tweetie and Tweetie 2 (for iPhone) apps.

Larger icons used to promote their applications

Because the purpose of the icons is actually to represent their own individual applications, it only makes sense to present them in a large beautifully crafted manner. This is especially true since the icons themselves are so exquisitely designed.

The other sizing issue that you need to consider is scalability. Many of the icons that are available out there these days are almost like works of art in their own right. They are large and beautifully rendered with incredibly precise detail. However, beyond a certain point, these specific icons just don’t scale down all that well. That being said, however, some sets do come packaged with smaller versions, specifically designed to fit into a fewer number of pixels.

Image Types

There are essentially three types of images that you can use to integrate icons in your web designs. These are these same three image types that supported by all major browsers – JPG, GIF and PNG. Each type has its own advantages and disadvantages.

JPG – This image format is ideal for detailed icons on a static background. It offers a full range of colours, and can be used for those beautiful and highly detailed icons that can really bring a lot of beauty to a site. The JPG also offers excellent compression, though its important to find a balance. Too much compression and your icons will start to lose their quality and become overly rastered. If there’s not enough compression, though, image files can become unnecessarily bloated.

The downside of JPGs is that they don’t support any level of transparency. As such, they either need to be set against a solid background (which matches the background of the image itself), or placed with a near pixel perfect accuracy.

GIF – Not nearly so common as it used to be, the GIF is a much smaller type of image, limited to an index of only 256 colours. Fortunately, this index can be customized and does not have to be limited to the standard index of the old 256 colour space. This colour limit is both an advantage and a disadvantage.

On the one hand, it can be really great for small and simple icons, like the ones we saw from Facebook. They only have a few basic colours each, so using the GIF format is perfect, and yields really tiny file sizes.

On the other hand, the GIF tends to fail with any real level of detail. Because of the severe colour limit, even mildly complex images quickly become grainy and pixelated, losing much of their detail.

The GIF format does support a very basic level of transparency, but it is very limited. It can basically take a single colour from the index and render it as fully transparent. As such, it is pretty much an all or nothing kind of transparency that only has a few limited uses in modern web design.

PNG – The PNG is probably my favourite image time, due mostly to its versatility. It offers the full colour gamut of the JPG, along with a vastly superior form of transparency, which works independently of the colour information. This means that any coloured pixel can have a transparency level within 256 degrees. This allows for a great deal more flexibility with your images, and allows you to place icons over complex backgrounds, which can be huge advantage in terms of implementation.

PNG images do tend to be larger than either compressed JPEGs or GIFs, so that’s something that needs to be taken into account during your development. It’s also important to remember that Internet Explorer 6 doesn’t support full PNG transparency. Some very clever people have developed methods of getting around this problem, but you still always need to keep it in mind if you plan on developing websites that support IE6.

Each of these three types can be appropriate in different situations, so it’s always a good idea to choose your image format based on circumstance and what will prove to be the overall most efficient option for what you are trying to do.

Icon Sprites

This won’t always apply, but you may occasionally want to make some sort of interactive change to your icons. For instance, I recently created a menu that used icons above the text labels. I wanted all of the icons to have the same monochromatic colouring, except for the icon of the current page, which would appear in full colour. The concept, of course, was to delineate the current page within the menu itself.

To achieve this, I made use of CSS Sprites, placing all of the different icons, in both their monochromatic and full colour states, into a single image. I then used the image as the background of of the HTML list elements that made up the menu, adjusting positioning values as necessary. It’s all basic sprite work, and helps to keep overall overhead down by reducing the number of HTTP requests.

Recently, I also read a really interesting and clever article over at NETTUTS+ outlining the possibility of using @font-face in CSS to implement icons through a custom font. It’s not quite the same thing as using sprites, but it has many of the same advantages. Be sure to check it out.

Metaphor

In the first part of this series, we talked quite a bit about what an icon is, and how it is meant to represent something else. One of the examples we used was the floppy disc as a well recognized symbol the action that would save a file document. This basic premise is really little more than metaphor in action. As such, I would suggest that a strong metaphor is an intrinsically important part of good icon implementation.

Your use of icons needs to make sense, especially in circumstances where they may not be surrounded by words that give them context (though, in this case, it would probably be a good idea to use a tooltip). So, if you want to have a save function, you would do best to use the floppy disc or, if you really want to get away from that, something like an SD card.

What you don’t want to use is something like a life preserver. This may seem to make sense, since it is something that can be used to “save” someone who is drowning, but this isn’t quite the same as saving a file, so the metaphor is not as strong. Also, the life preserver is occasionally used to represent help or support functionality, so using it in a different way may be counter-intuitive for your users, leading to confusion and frustration.

Always give careful consideration to the implied metaphors of your icons.

Cultural Differences

Of course, analyzing metaphor is not always easy or obvious. We all think, visualize and conceptualize in our own unique ways, but the fact remains that a lot of what influences these faculties is actually our immersion in our own cultures. If you’re building a site for a client in a different country, and are looking to implement icons into the design, be sure to keep these cultural differences in mind.

To use a really broad and general example, suppose I was designing a site for a client in South Africa (to pick a seemingly but not entirely random location), and that I wanted to implement the an icon to represent the concept of sport. As a good, true blooded Canadian, my first instinct might be to use a hockey icon, like this stick and puck from Kevin Anderson’s Sports Illustrated icon set:

Ice hockey

For me, and many of my Canadian compatriots, the hockey metaphor would work perfectly. How many people really play hockey in South Africa though? I put this question to South African native Sue Rutherford on Twitter. Her response was that they typically follow soccer and rugby. As such, the hockey metaphor loses some of its meaning and may not be the most appropriate choice, given what the icon is supposed to represent.

A better option would probably be a soccer ball (or football, if you prefer). This might be even more relevant with the FIFA World Cup coming up in South Africa this summer.

A soccer ball

Moreover, soccer is also a far more international sport, meaning that his icon will also likely be more widely understood by visitors from around the world.

So, if you are designing a site that will have a world wide audience, or if you are designing for a client in another continent, or even just another country, keep the idea of cultural difference firmly in your mind. You might also want to consider doing some research and testing, just to make sure that the icons you want to use actually have convey the meaning you intend.

Conclusion

I really believe that icons are a great way to add extra meaning, usability and visual flair to a website. I also believe these icons need to be implemented thoughtfully and with a careful attention to detail. Too often, I’ve seen great websites that are dragged down or disrupted by the poor deployment of icons that seem to have been added almost as an afterthought.

What about you? Do you have any thoughts on this matter, or any other areas that you think need to be addressed when implementing icons into a website? Please feel free to share!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Here we are with part three in the continuing discussion of using icons on the web. In part 1 we considered why icons are important and how they can add usability and value to your designs. In part 2, we looked at some techniques that you can use to search for icons and begin building your own library.

Icons and the Web – Part 3: Organizing Your Icons

If you keep building your library, though, you may eventually end up with a large amount of icons. When you get to this point, it can always be a good idea to try to find a way to organize your icons for easy access and retrieval. In this post, I want to look at some techniques that you can use to keep your icon library nice and organized – or any other media library for that matter.

Why Organizing is Important

Currently, I have hundreds of icons sitting in my own library. Over time, it is not at all unreasonable to expect that that number will slowly climb into the thousands. When I go looking for an icon or group of icons to use in a web design, the last thing that I want to do is have to manually wade through all of these manually.

Trust me – I’ve done this before. It is not at all efficient and the very thought of it makes me shudder.

Organizing is just a better way to go about it. Just think about a real library. How many books do you think it has? That will vary, of course, but thinking back to the library where I spent so much time as an undergraduate and graduate student, I would hazard a guess and say that they have hundreds of thousands of books.

Now suppose that I want to find one book in that entire collection. I don’t just walk in, look at the first book on the first shelf and then move from volume to volume hoping to find the one I want! I use the index system to look for the specific title, determine it’s call number and where in the library the book is and go find it. In a matter of minutes, I have exactly what I was looking for.

I do the same thing with my own books, too! I have four large bookcases in our basement, and each case generally holds a different type of book. All of my many fantasy novels are in one bookcase. All of by theoretical textbooks are on another. If I need to find something specific, I know just where to look.

Organizing your icons can offer all the same benefits! Instead of spending hours looking through all your icons individually, a good library should make location and retrieval simple and relatively painless.

Categorize

Probably the best way to start to organize your icon library is to establish a method of categorization, which will allow you to break your icons into logical and manageable groups. This, in turn, can make finding your icons just that much easier.

Categorizing your icons is a great way to get organized

There are several different ways that you could choose to categorize:

By Publisher – If you tend to get all of your icons from a few key sources (like those listed in part 2), then you might consider categorizing your icons according to the publisher. This can help keep the creator of the icons at the front of your mind when it comes time to giving any necessary credit.

Also, a single publisher will often release multiple icon packs in the same – or at least very similar – style. Grouping your icons this way can be one useful way to help you find similar icons from different sets!

By File Type – In my icon library I have icons in AI, EPS, PNG, PSD, and ICO formats. There’s not too much difference between the AI and EPS icons, but there’s a world of difference between them and the PSD icons. Then there are the PNG icons, which are flattened and much more difficult to edit. The ICO icons are probably the least flexible, and are rarely used.

Categorizing icons by file type can be most helpful for people who tend to select their icons based on file types. Perhaps you are always looking for varying degrees of editability, or prefer to use vector icons in some situations and PSD or PNG icons in others. If that’s you, then using file type categorization might well be your best bet!

By Set – This is the way I am currently organized, and so far it has worked reasonably well for me. I basically just decompress each icon set to its own unique folder. I like to look at my icons in terms of their larger set, so this seemed a logical choice for me.

As my icon library has continue to grow, however, it is becoming less and less efficient. I will certainly be picking up another means of organizing them as soon as possible. As such, I would really only recommend this method of organizing for small libraries, or as a means of creating sub-categories withing a larger organizational construct.

By License – Filling your icons sets according to license type can be a great approach if your range of projects demands an equally diverse range of usage options. Perhaps you’re doing a bunch of personal projects for yourself (or others), some non-profit work and websites for commercial clients. Each of these types of projects may allow you to use different icons in your library, based on the unique license agreement.

Having your icons organized by license gives you a simple and easy way of filtering out sets which, though they may contain awesome material, may simply be unusable based simply on the license. It can also help fend of the disappointment of finding the perfect icon but not being able to use it because of license limitations.

By Theme/Style – You could also organize your library into thematic groups like social media icons or blogging icons. If you do a lot of work in a particular niche, you may also have some more specific general themes such as medical icons or academic icons. Alternatively, you can also organize based on styles. Grunge, glossy and sticker icons would all be different types of styles, based on the visual appearance of the icons themselves.

In many ways, I think that this may be the most useful way of organizing your icons, since the theme or style of an icon will frequently be one of the deciding which icons to implement in your website designs.

Using a Folder Structured

Both OS X and Windows provide a natural way of organizing your icon files, through the use of various folders and sub-folders. For example, you can create a one folder called “Icons” and then create a series of other sub folders, based on whatever method of categorization you choose.

Using a folder structure is a simple and easy way to organize

This is precisely the method that I am currently using, and so far it has worked pretty well, especially since my Mac is actually able to preview AI files. I can quickly navigate up and down through the folder structure, previewing the various icons as I look for a set to use.

The advantage of this method is that it’s really easy to set up and does not require and additional software. Just create your folders and go.

It does, however, start to become somewhat cumbersome for large libraries with dozens and dozens of subfolders to look through. You are also limited to just a single means of organization – you cannot really organize the icons independently by both theme and license. The best you can do is to create subfolders for each unique theme, and then create further subfolders within those for the different forms of licensing.

It all works, but it might be just a bit cumbersome. That’s where an often overlooked application like Adobe Bridge can become an incredibly valuable tool.

Using Bridge

I know that a lot of people aren’t a huge of using Bridge – it can be a little buggy and a real drain on system resources, especially for an application that is essentially a means of managing documents and creating an effective connection between applications in the Creative Suite. If does, however, have some unique features which can actually make it a really great choice for managing image libraries.

Adobe Bridge has some great organization functionality

First of all, Bridge can actually display and preview nearly all major image formats, including AI and EPS files, which is a huge advantage for Windows users and over many other image browsing packages, many of which typically only work with bitmap-based images such as JPEG or PNG. In my experience, the only common icon format which Bridge cannot handle is the ICO file.

Moreover, Brdige also also provides some other interesting options that can help you improve the organization of your icon library. One great feature is the ability to assign keywords to files. As far as I can tell, you can use this almost like a tagging system. You create a series of words in the Keywords panel and then assign those keywords to different files. You can even create a sub keywords help maintain a logical structure.

Of course, on their own, keywords don’t really do you all that much good, and this leads us to the next part of Bridge that can be useful for us – filters. Filters allow you to limit the files that are displayed based on certain conditions, one of which is for specific keywords (you can also filter by other types of meta data too). So, after assigning some keywords to a bunch of different files, you can use the filter tool to retrieve only those files that have that particular keyword assigned to them.

That makes for a handy little organizational tool.

Lastly, you can also build what are called collections in bridge. A collection is kind of like a folder full of file references, and as such can actually contain files from multiple folders across your computer. This makes building an effective library really easy and flexible.

For instance, I can create a single collection called Icons to house all of my different icon files. I can then apply a variety of different filters to help narrow down my search! These filters could be on keywords or file types or even creation and modification dates. You can then use Bridge to open the icons in Illustrator, Photoshop, InDesign or any of the other applications within the Creative Suite.

I will be adapting this exact kind of icon organization myself before too long. I will also probably also use it for other design elements such as vectors and textures.

Conclusion

I know that this was somewhat of a different sort of post, and I am certainly not trying to tell you exactly how to organize your icons (or any other design elements for that matter). I do hope, however, that this third part of our Icons and the Web series has shown you the importance of organization and provided you with some ideas as to how to get your own library in order.

Now it’s your turn to talk. What kinds of techniques, methods or applications do you guys use to keep your icons and other resources well organized for easy retrieval? Please feel free to share! We’d all love to hear your thoughts and ideas!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

This is the second article in a series addressing the use of icons in web design. In the first article, we looked at what an icon is and why it can be an important element web design. Of course, that’s all well and good, but before you can start building icons into your designs, first you need to actually get your hands on some icons. In this article, we will discuss the process of locating and gathering icons for your own library.

Icons and the Web – Part 2: Collecting Icons

Really, icon design is an entire creative branch onto itself, one tends to cross over into the realm of illustration (which is an entirely separate topic to be addressed at a different time). There are certainly many web designers out there who are also capable of creating their own icons, but there are also many more who just don’t have the time, interest or skill to invest in this creative process. Fortunately, there are numerous steps and resources that you can make use of for finding awesome and usable icons.

What follows are some tips that I’ve picked up in building an icon library throughout the course of my own design work.

Keep Your Eyes Peeled

There are hundreds of blogs and other sites giving away different freebie icons sets every single day. Frequently, blog and magazine owners will also publish lists that collect great new icons releases, or of icons of a particular type or design. More often than not, these icons seem to be of the social media type (which, though popular, may be getting just a wee bit tedious), but there are also some other types of really, really great icon sets being released.

So, I suggest keeping a careful eye on your RSS reader, and being willing to spring into download mode at a moment’s notice. When you see an awesome icon set, or something that you think you will be able to make use of at some point in the future, just go ahead and download it to your library for use at a later date. If you’re really lucky, you might even find a new set that is absolutely perfect for your current project!

Also, most sets tend to come in a compressed archive of some sort. Check the contents and make sure that there is a readme file or other documentation outlining credit and licensing information. If there’s not, I would recommend creating a quick text file yourself, and filling it with any pertinent information, such as the artist, the site you downloaded the set from and the license. That way, if you come back to the set months later, it’s quick and easy to find that information.

Bigger is Often Better

Typically, I have also found larger sets to be vastly more useful than smaller sets, simply on the basis of variety. Unless you have specifically commissioned an icon set, the chances of finding a small set with all of the exact icons that you are looking for or feel that you need is probably pretty rare. Since larger sets generally offer a wider variety, they are often also much more useful.

IconEden's Bright set is really extensive, especially for a free set

However, this is not always necessarily the case. Some icons sets can be quite large in terms of the number of icons that they present, but very narrow in the variety of those icons. For instance, a set may contain dozens of glassy button icons, with the same shapes repeated over and over, just in different colours. Or, you may have only a few core icons which are simply used together in other combinations to create more “unique” icons.

Now don’t get me wrong. Neither of these are necessarily bad things when it comes to icon sets. They are simply techniques by which a larger icon set can actually have a much smaller variety (and thus a more minimal potential usefulness) than it’s size might lead you to believe.

Nor am I saying that you should avoid smaller packs, many of which can be a real goldmine! I have simply found myself using the larger packs in my library on a much more frequent basis.

Establish An Icon Map

When starting out on a new project, it can be both helpful and beneficial to begin developing what I like to call an icon map. Basically, it’s a matter of examining the specific needs of the particular site that you are working and making a list of the areas in which you are going to need icons. This list then becomes your icon map, and can work as a guide for helping you determine which icon pack (or packs if you are combining several) will best serve your unique needs.

With this list in hand, you can then begin browsing through the different icon sets that are available to you, either online or in your own library. You can then cross check what’s available in each given pack against what you need. Obviously, the pack that meets the most of your unique needs is likely going to be the pack that you will want to implement.

Also, try not get to focused on one particular icon object (unless you have a good reason). Often, there are several different objects that can represent the same concept, though perhaps with slightly different connotations. For example, the concept of video could be represented by a camcorder, by a strip of film or by a television set. Being more open to different icon objects can often help you get more value and use out of a given pack.

Know Your License

One thing to keep in mind when searching for icons to use in your web designs is the fact that there is a large audience out there who are also looking for application icons, which they can use in their operating systems. As such, many icons are made available free of charge for personal use and this kind of customization. In these cases, the icons are often not available for public and/or commercial use, which may (or may not) rule out their use in your next design.

Even if the icons in a pack are not designed specifically as application icons, it is always important to read and understand the license agreement. Different artists release their work for use in different circumstances. Some icons may be completely free, with no strings attached. Others may require credit, or a backlink, or may limit the ways in which their icons can be used.

Always be sure to follow the specific terms laid out in these agreements. If the creator is kind enough to release them free of charge, it’s only common courtesy to adhere to their wishes. If your particular needs fall outside of the scope of the license, consider contacting the creator and seeing if you can work out an alternate arrangement. You may have to pay a little bit, but hopefully it’s a small price for the perfect icon set!

Resources

Of course, all of this talk about picking and choosing the right icons and building your own library won’t do anyone a lick of good if you don’t know where to find awesome icon sets in the first place! Well, I’m going to help you out in that regard too! Here are some great resources for finding equally awesome icons (both free and paid).

IconEden

IconEden is a great icon site, and some of my all time favorite icon sets have come from here, including the Bright and Milky sets, both of which are good sized and totally free sets. Additionally, IconEden also has a collection of premium sets, featuring as many as 440 awesome icons in a single set! Be sure to check them out!

IconEden

DryIcons

DryIcons is one of the single largest repositories of totally rocking icons, which can be used in both personal and commercial projects! One of the only requirements is to provide a link back to the DryIcons site, which is certainly a small price to pay for such awesome resources. If you just can’t bring yourself to add the link, though, you can always purchase a commercial license too.

DryIcons

IconShock

Like DryIcons, IconShock offers a huge repository of free icons for both personal and commercial use. Again, you will find plenty of social media related icons here, and even more character icons, based on popular cultural works (movies, video games, comics). Many of the free sets are simply samples of larger, premium packs, which can be purchased for a price.

IconShock

IconLab

IconLab is an icon design firm offering a variety of different icons. They have some really cool freebie icons, and some really great premium ones. I’ve reviewed some of the pricing on these premium icons too, and it’s very reasonable for the quality of the icons.

IconLab

IconDock

IconDock is an icon site by Nick La, creator of Web Designer Wall and the founder of N.Design Studio. Nick has created some really awesome icons, most of which are of a premium nature and can be purchased in packs, or individually, which is something I haven’t seen on too many other icon sites. There are also some freebies available too, but you have to visit the blog portion of the site to find them.

IconDock

MediaLoot

Icons are certainly among the many different design resources that MediaLoot has to offer. Many are reserved strictly for members, but there are also some really awesome freebie sets that you can download for free. MediaLoot is still a really new site too, so you can definitely expect the total icon library to grow.

MediaLoot - Premium Graphic Design Resources

deviantART

Obviously, deviantART is so much more than just an icon repository, but there are plenty of awesome icons to be found there, if you’re willing to take the time to really look. A word of warning though: many of these icons are provided strictly for desktop customization (as discussed above) and may not be available for use in your next web design.

deviantART

Smashing Magazine

I certainly recognize that Smashing Magazine is more than an icon site, but it is also one of my favourite resources to turn to when I’m looking for a new icon set. They have released a number of their own freebie icons, but even more importantly they periodically publish lists of some of the best new icons out there on the net!

Smashing Magazine

Conclusion

Now, through two articles, we’ve discussed why using icons can be hugely beneficial for your web designs, and looked at where and how to find sets to help build your own library. Next week, we’ll look at some techniques for helping you organize those icons!

In the meantime, feel free to share your own thoughts and views on building an icon library. Is there another site or resource that you would recommend? Do you have any other tips for finding the best and most relevant icons?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Icons are a hugely popular design element today – especially on the web – and there are probably dozens of new sets released each and every day. With all that choice, finding and implementing the icons that are right for you can sometimes be a bit of a challenge. It certainly has for me in past projects!

Icons and the Web - Part 1: Why they Matter

I started to write this article in an effort to look at some of the things that I have learned about using icons on the web. I quickly realized, however, that I had a lot that I could say on the subject, and that the article could swell to epic proportions. So, after a quick poll on Twitter, I decided to break the article down into smaller, more managable chunks and create a series, which I will be posting over the next several weeks.

Today’s article looks at what an icon is, and why they can be an important addition to your websites, both in terms of usability and aesthetics.

What is an Icon?

Before really getting into a discussion of icons, I think it important to briefly at the question of what an icon is. I realize that this might seem like a somewhat elementary question, but I think it’s important. Sometimes, I think that the icon is reduced to being little more than another element, when it is fundamentally so much more than that.

Setting various religious meanings aside, an icon is a representation of something, whether that be a concept, an action, a site, a person and so on. Moreover, the icon must have some intrinsic relationship to the thing that it is meant to represent, because the purpose is for it to be easily recognized and/or related to. This is usually based on the association of an object with whatever you are wanting to represent. A magnifying glass, for instance, is often associated with the action of looking for something, and is thus often associated with search functionality in websites and applications.

The popular magnifying glass can help two different purposes

However, this same object can also be associated with zooming in (magnifying). This differentiation is a strong reminder of the fact that icons can require context in order to be properly understood.

They can also be understood in terms of tradition. How many people do you think are actually using floppy disks anymore? Not me! None of my computers even have a floppy drive. Yet, because of its longtime use, the floppy disk icon has become the standard for almost any kind of save action.

The floppy disc icon maintains its meaning, despite the technology being all but obsolute

There is a strong iconographic tradition here, and it can often be beneficial to remain within these traditions. They are proven icons, and there’s usually no point in trying to reinvent them! We’ll discuss this idea a bit more below.

Note: Icons above are from the Bright, Incredibly Detailed 3D and Milky sets, respectively.

Improved Usability

From a usability standpoint, icons can help to make a site more intuitive and easy to navigate, especially for repeat and returning visitors. When the user sees the icon, they will hopefully understand it and – assuming that it is a navigational or functional element – click to achieve the desired effect. They may be transported to a new page, open a modal box or execute some other action. For the purposes of this discussion, the specific action doesn’t really matter (though, of course, for your site it matters entirely). What’s really important is that the icons help guide the user toward that action.

Take, for example, the front page of FreelanceSwitch, which has a bold navigational items for both Freelancers and Clients built right into it’s header:

FreelanceSwitch uses icons to help give context to its navigation

These navigational items are more lengthy than the normal menu elements, and though they certainly don’t contain a lot of text, the icons help give them context and make the navigation more intuitive to use.

Icons can also help provide a sense of continuity. A single site can have different layouts for different types of pages, and the consistent use of icons can help the user to locate and understand similar functionality across slightly (or sometimes very) different layouts and designs. Again, FreelanceSwitch is a great example. Throughout the site, the user will find various opportunities to subscribe to a feed, either through RSS or Email. Here we can see these options at the top of the sidebar, at the bottom of a single post, and in the footer.

The continuity of icons on FreelanceSwitch

In each case, an identical icon is used for a similar purpose, creating a sense of unity throughout the site. Wherever the user sees the blue RSS icon or the envelope icon, they know that they will be able to subscribe through either their feed reader or via email.

Icons can also be used to create clearer categorization of content. In my recent redesign of the Highland Marketing website, the goal was to prominently feature four main areas of service – lettershop, data services, customer support and postcard packages. So, I used icons to represent each of these areas on the main page.

Different icons used for each branch of the site

Then, when you navigate into any of these branches, the same icon would be featured prominently on the left-hand sidebar, with smaller icons of the other three areas for quick navigation between branches of the site.

The same icons are used on the individual pages to improve navigation and usability

In the previous design, some users noted that they tended to get lost as they navigated deeper into the site. The icons helped address this usability issue by always providing a quick visual reference as to the current location.

These are just a couple of example of how a site’s usability can benefit from the use of icons, but it certainly goes to show how how important they can be as a design element.

Aesthetic Benefits

I’ve also found that nicely designed icons can really help with the overall aesthetic of a design, especially if the site doesn’t use a lot of rich graphics in its background. In such cases, icons can be a really great way to break up the flat appearance of all text menus and navigation systems (along with all the usability benefits). They can add a splash of colour and a degree of polish and professional sophistication that can really add a lot to a site’s overall feel.

Icons can also help to round out the overall feel of a site, by matching the aesthetics of the rest of the design. The design for the recently launched MediaLoot is a good example. The main title bar also contains a simple menu, complete with icons.

Subtle letterpressed icons are noticeable but not distracting

The icons on this one are simple and monochromatic, with a slight letterpress effect. This works really nicely, because they are located in a menu area, which appears on every page. The menu items and icons are large enough to be noticeable, but also subtle enough as to not be distracting. This contrasts against the other icons in the main area, which are colourful and more detailed, and draw the eye to the content.

More colourful and detailed icons actually draw the eye towards important content

Another good example is the n.design studio site, which uses category icons technique described above. The site uses a beautiful hand drawn style, with a paper textured background. As such, shinny and detailed icons probably wouldn’t fit in with the overall theme. Instead, Nick uses simple, monochromatic icons, coloured to match the header text.

Simple, monochromatic icons blend perfectly with the overall design

In this way, he makes great use of icons to help slightly improve the usability and user experience, while keeping well in line with the overall (and really beautiful) design!

Universally Recognizable Icons

As noted above, building icons into your site designs also allows you to take advantage of some universally recognized symbols. The most popular of these might very well be the RSS symbol, which of course simply indicates the existence of a feed by which readers can actually subscribe to the content of a site. I would say that this one is important enough that no blog or other site which continually publishes new content should be without it!

There are literally hundreds of different versions of the RSS icon available out there on the internet (check out my
Unique and Sensational RSS Icons article for examples). Some are very basic, while others are highly unique and original. The one thing that all have in common, though, is what I call the “signal” (because it looks like something being broadcast), which is that universally recognizable symbol.

There are other symbols that can be used in or as icons with relatively universal recognition:

• Plus Sign: denotes addition of something
• X: denotes closing or deleting something
• Shopping Cart/Bag:
• Information icon: denotes that there is more information
• House: denotes the home page
• Checkmark: denotes that something is included or accepted
• Bird: in recent years, denotes Twitter

This list is by no means exhaustive, but using any of these symbols will help convey meaning quickly and efficiently, simply by means of their universal recognition.

So there you have it. I hope you can see why icons can be such an important part of web design. In the next article, we will look at how to go about finding icons and building your own library. In the meantime, please feel free to share your thoughts!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

I’ve been doing some work a blog design recently, and I have needed a few icons here and there. So, I waded through my collection of various freebie icons and actually found everything I’ve needed so far. However, in my wading, the one thing that I found I was somewhat lacking in (much to my surprise) was a good variety of RSS icons.

Now, I know that everybody and there mother seem to have posted their own roundup of RSS icons. Well I’m going to join the fray I guess, because that’s exactly what this post is all about. I’m going to point in you in the direction of some really great RSS icons and graphics. Now, I’m not making any claims at this being an all inclusive collection of all the available icons. Quite honestly, I think that might border on impossible. I certainly don’t have the time to tackle a project like that.

Instead, these are just some of the icons that I think are sensational, either in their simplicity, their exectution or their creativity. I hope that you can find a use for some of these, and if not, that you will at the very least enjoy perusing a collection of beautifully crafted icons! First, though, a website:

www.feedicons.com

If you’re looking for good, plain old RSS icons, this is the place to go. There is the standard orange icon, a pack of coloured icons, and a developers kit, containing icons in AI, EPS, SVG, PSD, PDF, PNG, JPG, and GIF formats, offering you plenty of flexibility for tweaking the icons to match your website design.

The good old fashioned RSS icon is great. I use a modified version of it here. But, for those of you looking for something just a bit more unique, I offer you these, starting with my absolute favorite of the bunch:

Original RSS by Mythique Design

4 Rss Icons

Feed Me Animals

Guitar Pick RSS Icons

Rss 2008 Icon by Vathanx

The "New" RSS Icon

Super Neato RSS Icons

Snap 2 Objects - 40 Free RSS vector icons

RSS Icon

Newsfeed Set

RSS Icons (Stickers)

Matt Forsythe RSS Icons

Glassy 3D RSS Icon

Wood RSS Icons

There you have it. That’s a whole good number of creative and interesting icons for you to check out. Hopefully you will find something that piques your interest. Also, I did my best to present a number of options that aren’t orange. I’ve never been quite certain why orange became the standard RSS colour. Personally, I’m not a big orange guy, so it’s nice that the icon itself has become so recognizable that the colour no longer really matters.

Oh, and in my searching I also found this collection of RSS banners that I thought I would share with you.

Grunge RSS Banners

They’re not really icons, but they are super cool and grungy and might be useful to you and your designs, so I decided it would best to include them here! Enjoy!

Well that’s all for today. Which ones were your favorites? Do you tend to stick with the more traditional kind types of icons, or are you always on the lookout for new and creative alternatives?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd