Icon Styles

A couple weeks ago I quickly covered the two major types of icons you can find yourself creating. As a follow-up this week, I’m covering four different icon styles that you should be familiar with. Like before, this isn’t a comprehensive look at the topic, it’s just a quick introduction to get you started. Down the road, I will be covering a few of these styles in more detail.

Photorealistic

These icons range in style from truly photorealistic, to highly and accurately detailed. These icons, by definition, are based around real-world objects and are very three-dimensional and tangible. While this particular style has fallen out of fashion in recent years, it’s still a style to be aware of.

As beautiful and artistically crafted as these icons can be, their shortcoming is that they’re very much based in the real world. Also, with the advent of high-resolution displays, photorealism doesn’t really offer the crisp and clean look that we we expect on these modern screens.

Flat

Flat icons are just one part of the larger philosophy of flat design. This style eschews the highly-detailed, three-dimensional nature of photorealism, and opts for a simpler approach. While flat design comes in several forms, the idea is always to break down a design to the bare elements to find the balance between over-designing and underwhelming.

One clear advantage of a simpler approach to design is scalability. While it still takes an amount of work to scale, it’s not as much of a challenge since you’re not going to have to lose a lot of detail.

Outline

Probably the easiest style to explain, an outline icon is pretty much what it sounds like. While flat icons do sometimes have outlines, this style almost never has any solidly filled shapes. The way I like to think about outline icons is a coloring book that’s not colored in.

This style works with at a variety of sizes, as long as you take the time to make adjustments to the line width and to fill in/remove details. This style works best for interface icons, for example in a tool bar.

Glyph

This is probably the simplest icon style. Glyph icons are just silhouettes combined with white space to draw a simple image. The best glyph icons don’t just use white space to simply add detail, but also if used creatively can communicate much more.

The icons actually work best at smaller sizes, but not very well at all when large. Like with the outline style, these are best used for toolbar and interface icons.