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 specific 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.
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.
.bsk-caret for drop-down menus.
× HTML entity wrapped in a
.bsk-close element for indicating closing or dismissive things, such as
Hint The close icon is aligned right.
<button type="button" class="bsk-close" aria-label="Close">×</button>
fas fa-flask icon, from the Font Awesome icon
family, to indicate something that is experimental or a work in progress.
<button type="button" class="bsk-btn bsk-btn-experimental"><i class="fas fa-fw fa-flask" aria-hidden="true"></i> Experimental Action</button>
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).
- Indicates something positive or successful will happen, or has happened
- Indicates something needs attention, or carries a low-risk
- Indicates something negative, dangerous, or with a high-risk, will happen, or has happened
- 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.
- A phase for concepts that are yet to be evaluated, or deliberately held for review in the future
- A phase before a concept is started to find out whether users need it and is not already provided by another service
- A development phase during which a concept is prototyped and tested to demonstrate its feasibility and function
- A refinement phase following alpha where a concept is tested and improved until it is suitable for general use
- A phase where a concept is generally available and receiving support for, improvements and fixes
- 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.