Above are some icons I’ve done for print and web. Creating them is a lot of work and using them for navigation can be risky. However icons are seen everywhere these days especially on smart phones.
Here’s a little css for making a nav bar with different icons for each link complete with hover states.
#but1 a
{background: url("but1iconhover.gif") no-repeat -94px 1px;}
#but1 a:hover { background-position:2px 4px;}
ul li.but1 {background: url("but1icon.gif") no-repeat 2px 4px;}
and so on for each additional button.