Creating and Implementing Future-Proof Web Icons

Posted on July 3, 2013 by

Good web designers always try to make their websites easy to navigate and user typically prefer to see icons and buttons, instead of plain links. Designers use icons to de-clutter websites with complex navigation and it is a good thing that icons are very easy to add. Icons are available in various formats, such as GIF, JPG and PNG. However, it can be rather tricky to find a good concept for icons that we can use on our website, let alone using Photoshop to create them. Designers should filter out bad concepts and choose ones that can match the website’s main topic.

However, web designers should be aware that the Web is always changing and they should also change the way they create and use icons. The web development community is now building things responsively to adapt to different platforms and devices. Navigation is one element that changes significantly to match standards of responsive design. Newfangled navigation solutions have more importance as more web designers implement responsive concept into their works. Some experts in the industry have been calling for standardized icons that can reveal navigation structure in smaller contexts.

Web icons and buttons give us a roughly similar end result, we push them and a webpage or menu appears. But today, when it comes to responsive navigation, these web elements can send mixed messages. Designers are dealing more with touch-capable devices, where there’s much less gap between the interface and users.

The messages web designers want deliver should be clear and consistent for any type of users and icons are an important component of the messages.

As devices with varying pixel density are cropping up in the market, it is crucial to use resolution independence elements to bring more consistency in user experience. It can be difficult for designers to keep the designs stay future friendly, especially if they fail to consider specific display and device dimension properties. To stay ahead of the competition, scalable assets are necessary, such as using pictographic web fonts for icons. Theoretically, designers can use a single-glyph font to represent a menu indicator. While this adds another HTTP connection, this is still a light-weight resource to load.

It’s worth noting that users with touch-based interface are far more likely to zoom in the interface, so icons must be able to maintain their sharpness. For this purpose, scalable vector-based SVG icons can be more appropriate.

Web browsers draw SVG graphics based on specific mathematical parameters and they are typically resolution independent. In any case, they’ll look crisp and sharp whatever density and pixel resolution they are presented on. As a future friendly solution, SVG-based icons should be quite acceptable across the contexts.

Web designers can cater for web browsers with no supports for SVG files by employing the feature detection technique. If certain browsers don’t support SVG, designers may revert to using bitmap-based icons. Thus far, SVG icons haven’t been utilized as much as they should be. One likely reason is perhaps the relative unavailability of reliable mainstream tools for creating them. Current software are most likely used for common creation and editing of SVG files, which is a little bit more difficult for designers to use when they seek to make web icons. Crafting SVG icons should become a skill that today’s web designers are accustomed to, as they are entering a new generation of World Wide Web that’s based on responsive ideas.

Surely, there are drawbacks in using SVG-based icons, for example it’s harder for designers to change the colors. They are unable to change the seemingly straightforward property without adding certain Javascript methods and this could mean triggering additional HTTP requests. If web designers want to implement inline SVG loading to address the HTTP requests issue, there’s even less browser support for that. Regardless of the methods used, designers should make sure that the feature detection capability is enabled to cover all eventualities that may affect user experience.


Building websites responsively often requires more attention and care that web designers may have ever given to their craft. To gain the favorable butterfly effect in their work, designers increasingly need to adopt the mobile-first approach. Any bad decision impacts page weight and as digital artisans, web designers should be able to sensibly exercise and instruct responsive design, by involving all elements, including icons.

Author :

  • Editor