We have a library of bespoke icons that cover most actions and labels in the platform. The majority are familiar icons like Print, Download and Adding. Let’s see the basics.
How to choose an iconOptical alignment
Dimensions and style
How to choose an icon
A small minority of icons need to refer to more abstract concepts such as regulations, standards, requirements and these have been created especially. There will be a need to create more, so to understand how to create an icon, we can use semiotics to describe what an icon is.
Icon
Physical resemblance to the signified. Resembles whatever it depicts.
Index
Evidence of what’s being represented. Skull to indicate danger.Symbol
No resemblance between the signifier and the signified. Must be culturally learned. Numbers and alphabets.
The rules
- Use ‘Icon’ when creating an icon
- If the concept is abstract, use ‘Symbol’ but must be paired with a label
Optical alignment
What is bigger, the circle or the square?
Both shapes have the same dimensions.
Geometrically speaking, their width and height are equal. Our eyes immediately detect that the square outweighs the circle.
Now we have made the circle is bigger than the square. The two shapes look more balanced.
The rule
Make round elements slightly bigger than square objects to maintain balance.
Dimensions and style
The choice of style for our icons is based on two considerations.
- Text density
- Base size
Text density
Our platform is data heavy. Most pages have a densely packed layout with content and lists. To create an icon system it is important that they do not compete with the text but partner with it. So having a strong stroke but keeping them light by not using a heavy fill. They are outlined in style but not thin to hold their own against the dense text.
Size
The base size for our icons is 16px, though they can be enlarged to 24px and rarely to 32px. They can also be decreased to 14px to fit comfortably in buttons and with labels. As there is a lot of content on the pages, 16px pairs perfectly with our body text size and line heights.
The rule
- Icons should be created on a 16px grid
- Stroke size is 2px
- If icon is square or has straight edges, make the icon 1px smaller than 16px boundary (optical alignment)