Deploying a constant icon system creates uniformity where each icon should be consistent with the rest in the set. When your icons work individually as well as a whole, the result is an intuitive user experience and provides brand consistency.
We currently use a selection of pre-existing open source libraries as a basis for our icon styles. Our primary set utilises Feather icons, but supporting our libraries include Themify and Simple line icons.
section-01 anchor pointIcon System
Developing an icon system creates a platform for uniformity where each icon should be consistent with the rest in the set. When your icons work individually as well as a whole, the result is intuitive flow and provides brand consistency.
We are currently utilising a selection of pre-existing open source libraries as a basis for our icon styles, primarily feather icons, but supporting libraries include Themify and Simple line icons.
Usage
Determine where an icon is needed or where text may be more effective. Think of icons as a visual shorthand and use them for points of emphasis, identifiers and cues. Not to be over-used, less is more, favour accessibility and usability.
Communicate
What symbol best communicates the message. Can the viewer decipher it's meaning? is the message universally understood (print, shopping cart, burger menu etc.) or unique? Cryptic or obscure graphics can create confusion and hinder the experience.
Aesthetic
Design within the style of your brand. This extends through colour, typography, shape, form, style, scale, and even messaging. Those finer details applied well help unify the set.
Consistency
Establish a system and remain consistent, icons should flow and function as a system. Use them consistently across all platforms including interaction states, to ensure continuity. Any new or updated icons need to follow suit. If you have any requirements that the library can't resolve please contact the design team to discuss options and approach.
Feather - default (Black)
Feather - custom (Random)
Icon sizes
For ease, our icons follow similar size rules to our typography. Depending upon the component or placement of the icon the following sizes of 12px, 16px, 24px, 32px up to 40px. At any size, the stroke weight of the icon must remain consistent to avoid ‘cartooning’. This is determined as 1px wide at 12px size and 2px wide thereon.
Roundels
We utilise roundels to contain our icons when they require more emphasis. Their size varies depending upon it’s application.
The roundel icons can be used in the following sizes: 16px, 32px, 48px, 64px and 96px.