HTML and CSS Reference
Similarly to the real world, icons can fill many roles on websites or in applications.
Most commonly, they act as signposts, giving users hints on how to get where they
want to go and do what they want to do. Icons can impart these hints quicker and
more intuitively than textual descriptions, often due to the fact that they follow
established conventions, which can break through the language barrier: Mail, home,
and shopping basket icons are classic examples ( Figure 6.2 ).
If you need to create an icon to represent something where no convention
already exists, you need to choose an image that is as recognizable as possible, easy
to depict in different sizes, and attractive enough to draw in the user. Web icons
are typically monochrome with transparent backgrounds so they can be overlaid
nicely on top of different backgrounds.
Icons are loosely grouped into three different types:
FIGURE 6.2 Familiar web
icons: mail, home, shopping
FIGURE 6.3 Pictogram
Pictograms. These icons convey a location or idea through resemblance to
a physical object, for example, a vinyl record to represent “music” or a car
to represent “car insurance” ( Figure 6.3 ).
Ideograms. More general than a pictogram, these icons represent ideas
or actions, such as “search” or “write a comment” ( Figure 6.4 ). Generally,
(but not always) they will be intuitive to a certain degree because of users'
familiarity with the real-world objects.
FIGURE 6.4 Ideogram
Arbitrary. These icons are more abstract creations that generally don't
directly relate to real-life objects or concepts. Because they are not real-
world objects, they must be learned from scratch and so are not immediately
intuitive. Figure 6.5 provides a good example: This icon set was created
for the W3C as part of its effort to brand HTML5 and other cutting-edge
technologies to raise interest and awareness (see www.w3.org/html/logo).
I won't go into a great amount of detail on how to choose and draw icons in
this chapter, but for those of you interested in finding ideas and inspiration, a
Google images search always brings up many, and you can find a huge number of
great free icons at thenounproject.com. The images in this section have been taken
from the awesome dingbat sets Modern Pictograms and Heydings Common Icons,
available on Font Squirrel.
FIGURE 6.5 Arbitrary icons
from the W3C's HTML5 brand-
ing (released under creative