Iconography on websites has become a standard.
Once you pay attention while browsing your favorite websites, you will find icons in different sizes, weights, and styles everywhere. They are a great visual tool to consistently identify content of a certain category. Done well, they also help users scanning your webpage get a quick overview of the information.
Icons on websites should support the user experience without drawing too much attention to them. They should support the information or action they stand with. Here are a few things to keep in mind when adding icons:
Place icons judiciously
The most successful use cases limit icons to buttons, sections, actions, and elements that need to be quickly glanceable or clickable. The visual element of the icon grabs attention, supports the users’ understanding, and emphasizes the action.
Placement of text with icons
Typically, if an icon is placed in line with text, it should be optically centered vertically with its neighboring typography. It should also be designed to have the same visual weight as your selected typeface. For example:
With this button, the Wi-Fi icon is technically centered correctly on the vertical axis. However, it appears that it sits a bit low when looking at it, in the visual appearance. Since the symbol has a strong downward point to its shape, it needs to be optically adjusted to account for that.
Raising the symbol up to be higher than its technical center makes it appear more level and aligned with the ‘Connect’ text.
A fun example of icons we created and paired with text can be found on the MIT Chemistry website.
Shared visual characteristics create consistency and build your brand
An icon series can help you build your brand. By creating icons that share visual characteristics, you create an icon library that feels cohesive. Examples of how to do that are using the same line weight, color palette, and corner radious. By repeating the same visual elements, the user recognizes icons as part of your brand.
This button has a vibrant color, simple shape, and geometric typeface. To match this, the heart icon has a similar monoline thickness and geometric structure.
One successful approach can be contrasting styles of icon style and typography. However, matching the line weight and style of your icons to the weight and classification of type can create a relationship that successfully ties it all together.
In this case, the tone of the icon is organic, fluid, and hand-drawn. Noticing that the typeface has a modulated thickness as opposed to the monoline appearance from the previous example, a more natural and gestural icon is fitting.
Keep in mind the level of detail and scalability of icons when using icons on websites
The pen and hand icon can’t be scaled down to very small sizes because of the level of detail in the drawing. The ‘Like’ and ‘Connect’ buttons can be scaled to smaller sizes because the icons are much simpler. With a higher level of detail, shrinking icons too small would reduce clarity and legibility, making the smaller details indistinguishable. If this icon was needed in smaller sizes, it could be redrawn with fewer details to make sure it still communicates clearly.
Well-designed icons can make a big difference in creating a great, intuitive user experience in website design.
