Icons

Accepted

Icons are there to carry information in an instant, drawn from one icon family and held to one style within any product.

Why it looks like this

An icon is often at its best when it goes unnoticed and simply works. Keeping to one family and one style is what makes icons cohere across everything Aleris makes, and that steadiness reads as considered and trustworthy.

The same icon can be right in an internal workshop deck and wrong in a patient letter, because the cost of being misread is high for a patient and low for a colleague. So icon use falls into four contexts: patient-facing, internal digital tools, presentations and internal material, and signage and wayfinding. The context decides how an icon is used, and the cost of a mistake decides how strict that is.

Which icon you choose is free. Any Font Awesome Pro icon may be used except the few motifs that are always out, and there is no list to choose from.

What never changes

No weapons, logos or trademarks, religious symbols, or anything aggressive or alarmist
These motifs do not belong to the Present Expert in any context, however permissive.
One family, one style per product
Icons come from Font Awesome Pro, and styles are not mixed on the same surface. Status markers are the one exception: they are solid.
An icon with a specific meaning always has a label
Decorative icons in presentations are the exception.
Colour from the palette only
Icons take the named palette colours like everything else, never an arbitrary hex.
Only the petrol gradient, and only on white, sand and petrol-100
An icon needs 3:1 against its ground, and a gradient is only as strong as its weakest stop: petrol-400 falls to 2.56:1 on orange-300, and on a petrol section the dark stop reads 1:1.

How to apply it

Patient-facing

Outline icons in one weight, with status markers solid, used only for navigation, status, category and action.

Internal digital tools

Outline is preferred. Number icons stay out of data-dense views, where they compete with the data and risk becoming the only thing carrying the meaning.

Presentations and internal material

Outline, solid and duotone are all allowed, and an icon may illustrate as well as function.

Icons can also enrich a poster or presentation visually: modified, filled with images or used as they are.

Signage and wayfinding

Signs follow established wayfinding standards and accessibility symbols that Aleris does not own. The selection is defined together with the Physical chapter.

What good looks like

Do
A label beside an icon that means something
The reader knows exactly what it stands for.
Don't
An icon on its own for a specific meaning
The reader is left to guess what you mean.
Do
A petrol gradient icon on white
Its light stop, petrol-400, reads 4.09:1 on white, above the 3:1 an icon needs.
Don't
A petrol gradient icon on orange-300
The light stop falls to 2.56:1, below the 3:1 floor.
Do
A paper plane for send
It is an established symbol for the action.
Don't
An aeroplane for send
It is not the established symbol, so the reader has to work it out.

Asked about icons

Can I use an icon that isn't on the allowlist, like a back arrow or a payment icon?
Can an icon use a gradient?

Creating with icons

How it is checked

The icon render contract states what the extracted set actually is

Read from lib/icon-render-contract.test.ts at build.

Source and status