I'm looking for some black and white/transparent icons that represent the following words and semantic concepts:

  1. General - general settings area.
  2. Header - settings for a site's header.
  3. Frontpage - settings for a site's frontpage/homepage.
  4. Footer - settings for a site's footer.

I'm thinking of maybe using a generic icon for General, something like some tools or a globe. But as for the rest I'm not really sure what would make a good pictorial representation. If anyone has any ideas please let me know. :)


For header: alt text

You can find a lot of icons on iconfinder


For general, I would go with a Wrench or a couple of Gears - pretty synonymous with the 'settings' concept.

For the header/mainPage/footer I would go with the same basic icon (featuring 3 distinct areas, such as the one in solomongaby's answer) with the related part of the icon in another colour (green isn't bad). Not only does each icon visually identify what it relates to but this way the icons are visually relative (semantically linked) too.



In my opinion it would serve you better to use a single icon for settings, but place it in context, i.e. near the thing it's supposed to set.

If all found in one place, it might be too complex for people to distinguish between them on sight alone, forcing your users to hover with their mouse over the icons to understand their meaning.

It might be worth while to consider going with text in this case, or mixing the two:

 - General   | <Settings Icon>
 - Header    | <Settings Icon>
 - Frontpage | <Settings Icon>
 - Footer    | <Settings Icon>

For some more info on this, I'd recommend reading the False Simplicity post.


The Mac OS uses a light switch as an icon for general settings. You could try that.

Not the answer you're looking for? Browse other questions tagged or ask your own question.