The Icon Usage Bible

updated
7-22-99




The Icons

download the photoshop file

download the illustrator file


chat
chat

club
club

community
community

member
member profile

message
message boards

personal
personalize

poll
poll

shop
shop

1 When using the icon as a button, the icon color should match the network navigation at the top of the page.

2 When used in non-content areas (Example A), a hyperlinked blurb should ALWAYS be centered below the icon.

3 When used in content areas (examples B, C), a hyperlinked label should ALWAYS be used with the icon. The label should be as closely associated with the icon as possible, ideally directly beside or above it. The label should generically brand the logo service (E.G., "Overheard in Message Boards"). The icon should always be aligned flush left.

4 Icons should be hyperlinked ALWAYS. Icons used with a single link (example A) should always link to the same location as the accompanying text. In content areas, where more than one link is provided, (Examples B, C), the icon should link to the associated menu page (Clubs menu page in Example B).

5 Pages that are associated with an icon (i.e.: community, clubs, etc.) should NEVER use that icon as a button on the page. For example, the Community Icon should not be used as a button on the Community page. Such usage would create confusion, and would lead to the temptation to place many identical icons on the page.

6 More than one link (to more than one location) may be used in content areas if it is appropriate, and bullet points should be used if it is appropriate (Example B).

7 Only one icon should be used for each paragraph of blurb. (Examples B, C)

8 The icons must be separated by a distance at least equal to their size, or approximately three lines of text (vertical). (Example C)

9 However, if a blurb refers to more than one icon subject (such as Message Boards AND Chat) then NO ICON should be used. This will avoid confusion. (Example D)

10 Icons should NEVER be placed directly beside or on top of each other to create a toolbar. The icons were not designed to replace the site navigation. (Example E)


A icons as teasers     (mockup 1)

example A



B multiple links     (mockups 3, 5)

example B



C spacing     (mockups 2, 3, 4, 5)

example C



D multiple topics

example D



E icons as navigation structure

example E






Check out the page mockups:

womenswire feature page using icon as teaser (mockup 1)

women.com walking club page using icons in content area (mockup 2)

moneymode home page using icon in content area (mockup 3)

womenswire home page using icons in content area (mockup 4)

crayola familyplay channel page using icon in content area (mockup 5)