As designers we’re always looking for ways to give our users little clues and extra bits of information about an interface. Icons are a great way of doing it, simple little pictograms that can carry a lot of contextual meaning (provided the users gets what the icon is trying to say).
These days, SVG icons are the choice de rigueur for implementation of these helpful little shapes, whether placed directly inline or using an SVG sprite or with the help of some component devilry. But each of those options is relatively labor intensive. And SVGs and related tooling inevitably add some degree of bloat to your site. But what if I told you that there’s a great set of ready-made icons that are super easy to implement and won’t add any overhead at all?
Think about it, you’re actually already using a complete set of highly meaningful icons in the form of the typefaces you use to set your text. We tend to think of text characters as restricted to the letters, numbers, and smattering of common punctuation we see on our keyboards, but in fact the Unicode standard includes nearly 140,000 (!) characters. A lot of those are letters and marks from assorted world writing systems, but there are also a bunch of common symbols, shapes, and ideograms that make great icons.
Want to make a star rating? Try combining the filled and unfilled star characters: ★★★★☆
Need to give the user a way to close a dialog? How about the ✕ character?
Some kind of success? ✔
Some kind of problem? ✘
Or you can get a little creative if there isn’t an exact symbol for your needs. For link posts on this site, I’ve used the marriage symbol and given it a little CSS rotation for a decent approximation of a familiar link symbol: ⚭
It’s super easy to use characters like these in CSS content psuedo-elements. And if your typeface lacks any character, it falls through the font stack until it reaches the system default, which should (in theory) have you covered. If the character isn’t available in any fallback, it is usually rendered as an empty rectangle like this ▯.
That last part is where you might get into trouble, so I wouldn’t recommend using any highly unusual characters for any important parts of the interface, especially without cross-platform testing. But even common symbols can get you a long way.