Icons

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.

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.

These icons are not directly available in this version of the BAS Style kit. It is recommended to use Font Awesome icons instead of Bootstrap icons

There are a few SVG icons used by the Style kit and this website. It is possible to add more, either here or directly in your own project.

Use this SVG where an arrow or caret is required.
Use the transform and rotate classes to change the direction it points .transform, .transition-transform, rotate-<number>

<svg class="arrow w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>

<svg class="arrow w-5 h-5 rotate-270" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>

Use this SVG where a search icon is required.

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
</svg>

Use either the × HTML entity or the Font Awesome icon .fa-times for indicating closing or dismissive things, such as alerts.

<button class="text-lg font-semibold">✕</button>

<i class="fas fa-times" aria-hidden="true"></i>

Use .fas .fa-flask, from the Font Awesome icon family, to indicate something that is experimental or a work in progress.

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

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.

<i class="fas fa-chevron-right" aria-hidden="true"></i>

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

<i class="fas fa-bars" aria-hidden="true"></i>

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

<i class="fa-brands fa-orcid" aria-hidden="true"></i>

<i class="fa-brands fa-orcid orcid-text-green" aria-hidden="true"></i>

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

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

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

These icons can be used with core styles and components, such as:

• buttons
• form validation messages
• alerts

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 for where a concept is no longer needed, due to changing needs or replacement by another concept

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.

Use these icons, from the Font Awesome icon family, for indicating various external services.

These icons can be used with components such as:

• social media