Icons on the web are everywhere. They are so ubiquitous you hardly notice them, at least that’s the ideal. On retina displays, poorly optimized icons can stick out like a sore thumb. This post explores two options–icon fonts and SVG icons–to determine some options for getting your icons to be as sharp as your display.
For years, CSS sprites were the most common technique to display icons. Sprites were a bit of hack and a total hassle, but they were the best solution at the time.
Hello Icon Fonts and SVG Icons
Retina Display Surprise
The first round of people with retina displays were surprised to see many sites looked worse, not better. This is because many bitmap images were not optimized for such high quality display resolution.
Images in the world of responsive design are still a tricky thing to handle. There is no industry standard yet on how to best display images across devices.
Style at Scale
Using styling that scales is currently the most surefire way to maintain responsiveness. CSS styles, typography, and SVG (scaleable vector graphics) are currently the most durable tools in terms of scaling at any size.
Using styling that scales is currently the most surefire way to maintain responsiveness.
Icon Fonts behave mostly like regular fonts. They make use of the CSS3 @fontface declaration. The best thing about Icon Fonts is that they can receive CSS styles just like real text. You can control their appearance on hover and click states and say goodbye to those awkward sprites.
They require a little bit of learning and planning to get started with, but there are tools that make it relatively painless to get up and running:
SVG has been around for a long time, but has never seen widespread adoption. Many are now starting to see the benefits to SVG, especially in regards to responsive design.
- fully scaleable at all sizes
- multiple colors (icon fonts can only be one color)
allows for animation
SVG can be a little awkward to implement. While they can be styled, they have their own syntax from regular CSS (i.e. instead of background: red; you would write fill:red;)
Whether you switch to icon fonts or SVG icons, the responsive web and retina displays will look better for your effort. While this likely means a change in workflow among teams, the process will not only lead to better results, but should ultimately save a lot of time compared to the old sprite workflow.
Are you or your team using icon fonts or SVG Icons? Please leave a note in the comments.