Iconography

Our iconography is built as an entirely custom set of glyphs that are used to maximize recognition and ownability. They were designed to communicate quickly and effectively across all touchpoints, executions and at any size

Basics

Taking the AnyVan logo mark as inspiration, we can draw out a shape - often referred to as a rounded square - that will inform the icon style. The logo mark has a radius of ≈15px, which we can use to extrapolate a scale; steps of 3 can be used to simulate the same rounded appearance of the logo mark across all of our iconography

Grid and clear space

Our icon keyline grid establishes clear rules for the consistent, but flexible, positioning icons. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.

Outline

Critically assess

When designing icons apply some critically assessment as to style and what is necessary to convey the idea. As a rule, icons should be flat on, but sometimes it is necessary to add some perspective. The inverse may also be true, adding to much perspective may just convolute the message

When perspective is needed, opt more for a 'vanishing point' approach

Add delight

Life and moving is messy and unpredicatable and our icons should reflect this imperfect world. This approach also helps the icons feel more relatable and helps keep them fresh and interesting - the example below is ideal because a label applied to a box is usually never applied straight

Style

In some edge cases, is may be necessary to fill in certain elements - in the examples below, the spades loses impact and context when just outlined, and the pear's leaf has too much impact when filled. For the most part, icons should never be filled but use your discretion

Organic

Icons of oragnic elements should never be reduce down to geometric shapes - always try and capture the essense of the icon as close to reality as possible

Corners

Use a consistent corner radius of 3px for icons — where it makes sense, critically look at the icon and context of the idea or object. The 3px radius can be increased by a multiple of 3, when needed, to make the idea more understandable or to help better define an object’s shape

Caps and terminals

Ensure that, when designing icons, the stroke caps and joints are always set to 'Rounded'

Customization

There are two types of icons within the AnyVan icon library - icons that are 'system' and those that allow for customization. System icons represent a very specific idea that users look out for, a visual cue that should remain consistent whereas flexible icons lend themselves to be tweaked to suit a specific mood or application. These icons have been marked with blue accent in the icon library.

Icons can often be used - pulled apart - to convey new ideas and concepts. This level of customisation is encouraged to bring more continuity to our icon library.

Detailed

Use fewer details to convey the icon in as simple a shape as possible. The core idea of the design should be clearly conveyed and should remain discernible across every viewport and application.

Consistent

Ensure that multiple icon variations should not be used for the same concept or idea

Minimum size

Ensure that strokes and outlines are never smaller than 1.5px

Colour

Icons should only ever appear in one of two colours - 'Scorpion' if the icon needs to appear against white, or 'White' if it sits against a dark background. Never use gradient stokes for the icons and ensure that icons strokes always use a single colour

Universal

Ensure that symbols and concepts represented are known and familiar to a global audience, unless specifically talking about or drawing for a cultural or geographical context

Hierarchy

Additional icons can we drawn to accommodate and to flesh out the broad service offering categories. Remember the fundamental rules around alignment, proportion and colour when creating additional primary and secondary icons. Only ever use secondary icons once the primary icon's context is clear and has been established

Scale

At really small sizes, it may be necessary to fill in certain elements to improve their legibility and impact. Below, the bolt, becomes strange at this scale when not filled, but the billboard still works without a fill.

Misuse

Always draws icons - with the aforementioned rules and guides in mind - to ensure visual consistency and a cohension that can only be achieved when not using a generic library that doesn't meet of our requirements and doesn't allow for extensions and expansion

Library

Explore and search our icon library for the perfect one - if you are needing additional icons or are needing assistance with an icon, email uxr@anyvan.com