Iconography
Icons are symbols that represent an object or action. Icons are a visual representation of information that cross language and visual impairment barriers. However, they should be used sparingly to provide clarity and reduce cognitive load.
Iconography principles
Great icons are, first and foremost, context-appropriate. Secondly, they are universal and well recognized. The goal is to use well-recognized icons consistently across all platforms.
Icon library
Clear, minimal, and consistent is the goal, and for this reason, Phosphor icons has been selected for the design system. Phosphor is a robust library collection of 1,512 icons, each of which has light, regular, bold, filled, and dual-tone variations, making the total count of icons about 9,072.
Using Phosphor Icons as SVGs
To optimise the website's load time, it is recommended to select SVGs and use them within your code over a hosted CDN-based CSS and font file.
- Visit Phosphor Icons and select the icon you need.
- Select the Regular, Filled, or Duo-tone option.
- Select the icon and then select SVG RAW.
- Use the size and colour options. These are optional, and you may control this directly in your code, as well.
Using Phosphor Icons as an image
There may be a time within the development of your website when it becomes essential to use the icon in an ` <img> ` tag rather than an ` <svg> `. Although not recommended, we understand that this may be a situation that cannot be avoided at times.
In such cases, use the SVG file as your reference in the ` <img> ` tag. By referencing an SVG, the vector format and clarity is preserved.
Using Phosphor Icons as a CDN
The icon library is available as part of a hosted font family and CSS file. Phosphor uses a similar approach as many other icon sets out there, providing icons as several web fonts that use Unicode's Private Use Area character codes to map normally non-rendering characters to icons.
You may use this approach to load all required icons via the CDN.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/bold/style.css" />
</head>
<body>
<i class="ph-bold ph-smiley"></i>
<i class="ph-bold ph-heart" style="color: blue"></i>
<i class="ph-bold ph-cube"></i>
</body>
</html>
Icons usage
- Icon outline must correspond to the font weight being used. For example, if the font weight is Regular (400), then the icon stroke width must be Regular too. Similarly, if the font weight is Light (200), then the icon stroke width must also be Light.
- The use of filled and duo-tone icons must be used selectively. (For example, it is recommended to use duo-tone with dark mode. However, if the colour tone visually allows for a consistent look, you may use duo-tone with a lighter shade in the light mode of the website, too.)
- Use vector formats (SVG) for optimal performance and a refined look. The use of SVG will give maximum flexibility towards responsive icon usage and change of colour for 'fill' and 'stroke'.
Stroke
The default stroke for the icons in standard size is 2 pt (point) or ` stroke-width="16" `. As mentioned under general usage, the stroke width is dependent on the font weight of the element it represents. In this sense, the following strokes are applicable:
Size
You can increase icon sizes to 28 px, 32 px, or 48 px, depending on context and display dimensions. You may also choose to go beyond 48 px when using empty states.
Understanding SC 2.5.8: Target Size (Minimum) (Level AA) from the WCAG guidelines recommend that the minimum usage of icon size must be 24 px so the icons are visible and recognizable by users with visual impairment. The mini size (20 x 20) must be used sparingly and only when necessary. The large size (28 x 28) is advisable when the font size is 18px.
Colour
We recommend limiting icon colours using the following:
White colour on a dark background
White colour on a dark background
Primary colour on a white background
Black colour on a white background
You can still use colour for specific icons in isolated frames or sections, e.g. Services and Initiatives. The target contrast ratio for icon colour and its background should be at least 1:3.
Since accessibility (contrast ratio) is the main concern, using high contrast combinations within the colour guidelines is allowed. You can also apply core (or secondary) colours 100 on the same icons and core (or secondary) colours 700 and above for backgrounds.
Alignment
Although the canvas of an icon may be a square, the object of the icon may not always be circular or a square. Therefore, correct alignment helps keep the layout clean when icons are placed next to each other within a grid.
Always centre align same-sized icons on the vertical axis. Keep the text centrally aligned with its icon on the horizontal axis.
When to use icons
Great icons are, first and foremost, context-appropriate. Use icons when they help with communication only.
In some scenarios, they might effectively communicate the message, while in others, they might misrepresent your intention, or worse, not convey it at all. The key to avoiding this is to pick the correct icon for the right use (not similar use cases) and pair it with helper text or visual aid for text.
Overuse of iconography leads to distracting and visually overwhelming interfaces.
Icons may be used for the following:
- Components, such as buttons, links, supporting calls to action, etc.
- Navigation items, or navigation identifiers, such as a hamburger icon to represent a nav-menu
- Header and supporting links, e.g. 'Log in', 'Search', or 'Change language'
- In the footer, for supporting links, such as social media icons
- In components, such as a rating
- A list or a sub-navigation identifier
- The identity on a service card
- To provide help and contextual information for accessibility
- Status indicator, such as a loading state
State icons
State icons are visual placeholders for different states, such as empty states, messages (e.g. 'Nothing found' or 'Turn on notifications'), attachments, and so on.
These icons are 48 × 48 in size, usually with a bold stroke, and are recommended to be duo-tone type. It is worth mentioning that state icons must also be responsive and react to font-size variations.
When the empty state is larger and represents an entire blank page or a section that is edge-to-edge on a screen, the icon may be larger as well. For example, the icon size on an empty state, which extends to the width of the web page, can be 80 × 80 and coloured to match the state-disabled colour.
No dependents added
You have not added any family members as dependents yet.
Icon shapes
You can use icons on specific shapes and forms
Icons can be placed in button or shapes that are square, rounded corners or circular in shape.
Do not apply shapes inspired by your identity elements
Irregular shapes, shapes based on your brand identity or other blobs are not allowed.
Duo-tone or two-tone icons
A duo-tone icon consists of a primary and secondary layer. By default, The secondary layer is given an opacity of 40% so that it appears as a lighter shade of the icons inherited or directly set the colour.
Two-tone icons also consist of a primary and secondary layer; however, the colour variation is not based on opacity but is rather a completely new colour shade. The use of two-tone icons is encouraged when used with the secondary colour palette and is usually recommended when used in small sections or to show a process.