Icons
Overview
The Style Kit uses some basic icons for drop-down menus and closing alerts only. To use other icons, you need to include an external icon family alongside the Style Kit.
For general use, the Font Awesome icon family is recommended, with some specific icons recommended for consistency. Other families are available for more specialist needs.
Icons should be used to enhance rather than replace other content, unless it is clearer or more familiar for users. Always ensure any icons used are accessible.
Heads up! The Style Kit used to include Font Awesome directly but is now optional.
Icon families
Font Awesome
Font Awesome is a general purpose icon family designed for use in websites and applications. It includes a wide range of icons including indicators, media playbook, progress indicators and social media brands. It is available in two versions, Free and Pro.
It is recommended to use the solid or regular font variants and the .fa-fw class for fixed-width icons.
Font Awesome is not included in the Style Kit but is available through the BAS CDN. See distribution for how to include it.
Bootstrap Icons
Bootstrap Icons are another general purpose set of icons.
They are available under an MIT license: https://github.com/twbs/icons/blob/main/LICENSE
As of 2023 they are open source.
It is recommended to use the solid or regular font variants.
In most cases the Font Awesome icons should be prefered over the Bootstrap icons.
Caret icon
The caret icon is now included in drop-down menus.
If a caret is needed elsewhere use a Font Awesome icon or an SVG.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>Close icon
Use the × HTML entity wrapped in a .bsk-close element for indicating closing or dismissive things, such as
alerts.
Hint The close icon is aligned right.
<button type="button" class="bsk-close" aria-label="Close">×</button>Conventional icons
Experimental icon
Use .fas.fa-flask, from the Font Awesome icon family, to
indicate something that is experimental or a work in progress.
Start now icon
Use .fas.fa-chevron-right, from the Font Awesome icon
family, to consistently identify buttons that will start a process or task, as in the
Start page pattern.
Sortable icon
Use .far.fa-bars, from the Font Awesome icon family, to
indicate something that can be reordered, such as the
Sortable component.
ORCID iD icon
Use .fab.fa-orcid, from the Font Awesome icon family, for
ORCID iDs.
ORCID iD must be displayed according to ORCID Brand Guidelines.
It is recommended to use the relevant external service colour with this icon.
Markdown icon
Use .fab.fa-markdown, from the Font Awesome icon family
to indicate support for Markdown formatting.
Standard contextual icons
Use these icons, from the Font Awesome icon family, to indicate the context of an intent or purpose (such as a notice or action).
- Success
- Indicates something positive or successful will happen, or has happened
- Warning
- Indicates something needs attention, or carries a low-risk
- Danger
- Indicates something negative, dangerous, or with a high-risk, will happen, or has happened
- Info
- Indicates something neutral, or informative
You should ensure contextual icons are not the only means context is conveyed to ensure those using assistive technologies are not excluded.
These icons can be used with core styles and components, such as:
When used on their own, it is recommended to use the standard contextual colours with these icons.
When used with text, it is recommended to use the contextual text colour classes with these icons.
Development phase icons
Use these icons, from the Font Awesome icon family, to indicate the state of a service, project, feature, component or other concept in its life-cycle.
- Backlog
- A phase for concepts that are yet to be evaluated, or deliberately held for review in the future
- Discovery
- A phase before a concept is started to find out whether users need it and is not already provided by another service
- Alpha
- A development phase during which a concept is prototyped and tested to demonstrate its feasibility and function
- Beta
- A refinement phase following alpha where a concept is tested and improved until it is suitable for general use
- Live
- A phase where a concept is generally available and receiving support for, improvements and fixes
- Retired
- A phase for where a concept is no longer needed, due to changing needs or replacement by another concept
You should ensure icons are not the only means context is conveyed to ensure those using assistive technologies are not excluded.
It is recommended to use the development phase colours with these icons.
External service icons
Use these icons, from the Font Awesome icon family, for indicating various external services.
Icons for external services may be trademarked or otherwise restricted. If used, you must ensure you follow any requirements to use these icons.
These icons can be used with components such as:
It is recommended to use the external service colours with these icons.