UI cheat sheet: Icon categories + icon style reference guide

Icons are just the best. I love them almost as much as I love buttons. But, one of the problems with icons is that we don’t really know how to speak about them. And this is especially hard for people who have little graphic design experience.

So, my focus for this cheat sheet will help give us all a common understanding of the different types, categories and styles of icons. Grouping icons is not an exact science, but this is my interpretation/suggestion on how best to do it.

In this cheat sheet we will cover:

Categorising icons:

1. Defining icon categories
2. Icon sizes
3. Icon Categories
4. Icon ingredients

Icon style references:

5. Small icons style reference

6. Big icon style reference

7. Closing thoughts

1. Defining icon categories

There are different ways of categorising icon styles; you can look at subject matter, colour palette, size, era, how it was created, cultural context, aesthetics and more. The main problem when categorising icons is that there is a lot, and I mean a lot, of overlap and not a lot of specificity.

Even just look at the below icon which is fairly simple, and how many categories it can technically fall into.

Example of the problem with the current icon categories.

So, before we start panicking and running in circles screaming, “But which category DOES it fall it to?”, let’s see what categories other sites use:

Iconfinder: Solid, outline, flat, filled outline, 3D, isometric, handdrawn, cartoon, pixel, smooth, long shadow, badge, semi-solid, other.
FlatIcon: Black outline, black filled, multicolor, lineal colour, flat, gradient
IconStore.co: Coloured, glyph, outline.
Material Design icons: Filled, outlined, rounded, two-tone, sharp.