Iconography & its Significance in Today’s Design Community
Back to the basics:
Let’s understand what an icon is and why we use it.
The first ever set of computer icons was conceptualized in 1981 (49 years ago), when David Canfield Smith (computer scientist) and Norman Lloyd Cox (designer) were working on the GUI (Graphical User Interface) of the Xerox Star 8010. Their task was to ease the user’s interaction with the machine, which they creatively overcame by introducing familiar graphic symbols meant to reflect real-life objects to which the user could relate.
Ease of Interaction
Fast forward to today, and while they’ve definitely seen some changes in terms of form, their core function has remained pretty much identical, since they continue to serve the same purpose that they were originally designed for, and that is easing our interaction with the different pieces and types of software.
Language Barrier Breakers
Icons behave as universal visual symbols that break free of the language barrier, due to the fact that they manage to portray images that can be easily understood by users who come from different sides of the planet.
How Many Size Variations Do You Need?
Industry Standards –
Small Icons:
12 x 12 px
16 x 16 px
24 x 24 px
32 x 32 px
48 x 48 px
Medium Icons:
64 x 64 px
96 x 96 px
128 x 128 px
256 x 256 px
Large Icons:
512 x 512 px
1024 x 1024 px
In some cases, such as for mobile apps, you can find detailed guidelines straight from the OS manufacturers that are meant to help you out:
Apple Icon Guidelines
Google Icon Guidelines
I strongly recommend you always start from the smallest addressable size possible. More commonly used industry standard sizes start with 3 variations: 16 x 16 px, 32 x 32 px, and 64 x 64 px.
I usually find inspiration from these resources:
Shutterstock.com
Dribble.com
Behance.com
Iconfinder
The Noun Project
Pinterest
Instagram
Google Images
Points to note:
Keep it Simple
Start with Basic Shapes
Focus on Color and Modes
Avoid using Text on Icons
Icon Formats to use:
GIF
PNG
BMP
TIFF
SVG