Sometimes it’s just not feasible to make icons for every single thing you want to link to on your page. Yet, you want something different than just a text link; you want something more creative than just “Click here for [this content]”.
And it’s not just links, either. Often, you end up with a need for a small graphic, but you either don’t want to draw it out or you can’t draw it on the computer (like me controlling a laptop mouse–fail). What does one do when you want a cute little graphic that doesn’t require Photoshop to create?
ANSWER: Use a symbol font!
What IS A Symbol Font, Anyway?
A symbol font is any font that does not display the typical alphabet letters when you use it. The most common (and oldest) of these symbol fonts are the Wingdings series and the Webdings font, often included with many systems’ default fonts.
Well, Why Bother with Fonts that Have No Recognizable Letters?
Precisely for the webdesign opportunities it offers. Not only do you have ready-made, professional-looking icon designs, but you can also include your symbol font as part of your webpage using the @font-face CSS declaration. It saves you from having to create icons; instead, you can just type a letter and stipulate that it has to display in the symbol font. Instant icon!
And, if you want to dress up your icons a little more, you can always use the symbol font in your preferred image-creation program, masking, sizing, turning, and otherwise decorating the font to look like a traditional icon. Either way you go about it, symbol fonts provide icons and small graphics with more professional “pop.”
How Can You Use Symbol Fonts?
I find that symbol fonts used as icons are best at slightly larger font sizes, so that they are more visible and easier to click on. Too-small symbols can be frustrating for users, because it’s hard to tell what the symbol even IS at small sizes.
Also, symbol fonts need to be used with as sharp a color contrast as possible (i.e., white symbol on black background) so that all the symbols are easily visible.
What Kinds of Symbol Fonts Exist?
Literally everything you can imagine…including fonts with symbols and pictures that baffle the mind. (“Why would anybody make a font out of THAT?!”) What follows below is a fairly broad listing of some of the better symbol fonts out there.
The images are merely samples of each font–in each case, I tried to capture much of the range each font covers. Also, some of the symbol fonts in my examples, below, are sized smaller or larger than I like, due to the previews. Clicking on their links, however, will take you to the pages where you can see them in better quality, and see the entire character set.
Useful Icons and Signs
![]() Cursor |
![]() FFF Extras |
![]() IconBit1 |
![]() IconBit2 |
![]() PepGenious10 |
![]() PixArrows |
![]() BTD Cart-O-Grapher |
![]() The B.O.M.B. (Best of Magurno Brushes) |
![]() Symbolix |
![]() DNR Recreation Symbols |
![]() Spaider Simbol |
|
![]() CD Icons (not actually this huge normally) |
|
![]() WMSymbols |
Little Faces and Emoticons
![]() Skrewd Up Soulz |
![]() Spacy Stuff |
![]() SQCon |
![]() V5 Pixelpals |
Decorative Designs
![]() BitFuul |
![]() Rosette110621 |
![]() Calligraphic Frames Soft Two (screenshot does not do it justice) |
![]() Picture Squares (screenshot does not do it justice) |
![]() Davy’s Dingbats 2 |
![]() Gembats 2 |
Detailed Images
![]() Suboel (Christmas/holiday theme) |
![]() Craft (Minecraft theme) |
![]() SL Mythological Silhouettes |
![]() Random Dingbats |
(Fonts displayed in this section are from DaFont and Fontspace. Additional symbol fonts can be found at 1001Fonts.com.)
Summary
If you’re having trouble finding icons for what you want, try a symbol font–an easy and clean way to get icons without having to manage your own pixel-by-pixel design. For those of us who are not skilled in small designs (like me :P), symbol fonts can be a lovely way to dress up your page, whether used alone or within an image creation program.