Skip to main content

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 Pro is a protected work and may not be used without a license

BAS has a licence to use this icon family in its official websites and applications. This licence does not cover non-BAS projects, including personal projects of BAS Staff.

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 &times; HTML entity wrapped in a .bsk-close element for indicating closing or dismissive things, such as alerts.

×
  • Times

Hint The close icon is aligned right.

<button type="button" class="bsk-close" aria-label="Close">&times;</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.

  • Flask
  • fas fa-flask
  • <i class="fas fa-fw fa-flask" aria-hidden="true"></i>

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.

  • Chevron Right
  • fas fa-chevron-right
  • <i class="fas fa-fw fa-chevron-right" aria-hidden="true"></i>

Sortable icon

Use .far.fa-bars, from the Font Awesome icon family, to indicate something that can be reordered, such as the Sortable component.

  • Bars
  • far fa-bars
  • <i class="far fa-fw fa-bars" aria-hidden="true"></i>

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.

  • ORCID iD
  • fab fa-orcid
  • <i class="fa-fw fab fa-orcid" aria-hidden="true"></i>

It is recommended to use the relevant external service colour with this icon.

  • ORCID iD
  • fab fa-orcid
  • <i class="fa-fw fab fa-orcid" aria-hidden="true"></i>

Markdown icon

Use .fab.fa-markdown, from the Font Awesome icon family to indicate support for Markdown formatting.

  • Markdown
  • fab fa-markdown
  • <i class="fa-fw fab fa-markdown" aria-hidden="true"></i>

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:

  • Success
  • fas fa-check
  • <i class="fas fa-fw fa-check" aria-hidden="true"></i>
  • Warning
  • far fa-exclamation-triangle
  • <i class="far fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
  • Danger
  • fas fa-exclamation-circle
  • <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
  • Info
  • far fa-info-square
  • <i class="far fa-fw fa-info-square" aria-hidden="true"></i>

When used on their own, it is recommended to use the standard contextual colours with these icons.

  • Success
  • fas fa-check
  • <i class="faa fa-fw fa-check" aria-hidden="true"></i>
  • Warning
  • far fa-exclamation-triangle
  • <i class="far fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
  • Danger
  • fas fa-exclamation-circle
  • <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
  • Info
  • far fa-info-square
  • <i class="far fa-fw fa-info-square" aria-hidden="true"></i>

When used with text, it is recommended to use the contextual text colour classes with these icons.

  • Success
  • fas fa-check
  • <i class="fas fa-fw fa-check" aria-hidden="true"></i>
  • Warning
  • far fa-exclamation-triangle
  • <i class="far fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
  • Danger
  • fas fa-exclamation-circle
  • <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
  • Info
  • far fa-info-square
  • <i class="far fa-fw fa-info-square" aria-hidden="true"></i>

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
  • Backlog
  • fas fa-lightbulb
  • <i class="fas fa-fw fa-lightbulb" aria-hidden="true"></i>
  • Discovery
  • fas fa-search
  • <i class="fas fa-fw fa-search" aria-hidden="true"></i>
  • Alpha
  • fas fa-paper-plane
  • <i class="fas fa-fw fa-paper-plane" aria-hidden="true"></i>
  • Beta
  • fas fa-plane
  • <i class="fas fa-fw fa-plane" aria-hidden="true"></i>
  • Live
  • fas fa-rocket
  • <i class="fas fa-fw fa-rocket" aria-hidden="true"></i>
  • Retired
  • fas fa-moon
  • <i class="fas fa-fw fa-moon" aria-hidden="true"></i>

It is recommended to use the development phase colours with these icons.

  • Backlog
  • fas fa-lightbulb
  • <i class="fas fa-fw fa-lightbulb" aria-hidden="true"></i>
  • Discovery
  • fas fa-search
  • <i class="fas fa-fw fa-search" aria-hidden="true"></i>
  • Alpha
  • fas fa-paper-plane
  • <i class="fas fa-fw fa-paper-plane" aria-hidden="true"></i>
  • Beta
  • fas fa-plane
  • <i class="fas fa-fw fa-plane" aria-hidden="true"></i>
  • Live
  • fas fa-rocket
  • <i class="fas fa-fw fa-rocket" aria-hidden="true"></i>
  • Retired
  • fas fa-moon
  • <i class="fas fa-fw fa-moon" aria-hidden="true"></i>

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:

  • Twitter
  • fab fa-twitter-square
  • <i class="fab fa-fw fa-twitter-square" aria-hidden="true"></i>
  • Facebook
  • fab fa-facebook-square
  • <i class="fab fa-fw fa-facebook-square" aria-hidden="true"></i>
  • YouTube
  • fab fa-youtube-square
  • <i class="fab fa-fw fa-youtube-square" aria-hidden="true"></i>
  • RSS
  • fas fa-rss-square
  • <i class="fas fa-fw fa-rss-square" aria-hidden="true"></i>

It is recommended to use the external service colours with these icons.

  • Twitter
  • fab fa-twitter-square
  • <i class="fab fa-fw fa-twitter-square" aria-hidden="true"></i>
  • Facebook
  • fab fa-facebook-square
  • <i class="fab fa-fw fa-facebook-square" aria-hidden="true"></i>
  • YouTube
  • fab fa-youtube-square
  • <i class="fab fa-fw fa-youtube-square" aria-hidden="true"></i>
  • RSS
  • fas fa-rss-square
  • <i class="fas fa-fw fa-rss-square" aria-hidden="true"></i>