Icon Font Design


Notes:
- Please view in a modern browser.

- Neither text-shadow nor gradients will render on IE9.
Since I'm only using the W3 standards syntax for gradients (and no vendor prefixes), demo will work as expected in current IE, FF, Chrome, Opera. You can add a solid background colour (for IE 8) and other vendor prefixes for Safari and older browsers, if you're using in production code.


Vanilla Icons

( ' +

Vanilla Icons with text shadow

( ' +

Solid Color Icons

( ' +

Gradient Icons - Subtle

( ' +

Gradient Icons - Loud

( ' +

Gradient Icons - Sharp Contrast

( ' +

Gradient Icons - rounded corners

( ' +

Gradient Icons - rounded corners with letterpress effect

( ' +

Solid Icons - rounded corners with embossed effect

( ' +

Gradient Icons - rounded corners with shadow

( ' +

Solid color icons with thick border & rounded corners

( ' +

Solid Icons - round

( ' +

Solid Icons - round with thin border

( ' +

Gradient Icons - round with outer glow

( ' +

Gradient Icons - round with inner glow

( ' +

Gradient Icons - Leaf Shape

( ' +

Solid Icons - Folded corners

( ' +

BACK TO ARTICLE