This library of icons is intended for use across all of our brands and user interfaces. They are designed to aid navigation and legibility. The use of icons purely as page embellishment is not recommended and in some cases will be off brand. These icons are implemented as scalable vector graphics (SVGs) with PNG fallbacks for older browsers. Using SVGs ensures the highest quality rendering on all devices, allows us to style the icons using code and also complies with AA accessibility requirements.

Icons

1.0.0
<!-- Background image method -->
<span class="icon icon-house"></span>

<!-- Direct embedding method -->
<span class="icon icon-house" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-lg

Sizing

These icons are designed on a 16px grid. They must only be used at the following sizes: 16px, 32px and 64px. If the icons are not used at these sizes they will appear blurred.

<!-- Small -->
<span class="icon icon-size-sm icon-message"></span>
<span class="icon icon-size-sm icon-email"></span>
<span class="icon icon-size-sm icon-australia"></span>
<span class="icon icon-size-sm icon-settings"></span>
<span class="icon icon-size-sm icon-accessibility"></span>

<!-- Medium (default) -->
<span class="icon icon-size-md icon-message"></span>
<span class="icon icon-size-md icon-email"></span>
<span class="icon icon-size-md icon-australia"></span>
<span class="icon icon-size-md icon-settings"></span>
<span class="icon icon-size-md icon-accessibility"></span>

<!-- Large -->
<span class="icon icon-size-lg icon-message"></span>
<span class="icon icon-size-lg icon-email"></span>
<span class="icon icon-size-lg icon-australia"></span>
<span class="icon icon-size-lg icon-settings"></span>
<span class="icon icon-size-lg icon-accessibility"></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-lg

LESS

The main mixin is called: _icons(BT)

Implementation method #1: Background image

This simple method requires less markup, but is not semantic or accessible and is trickier to style icons with colour; only possible with the source code, updating the Gruntfile.js settings and running Grunt to compile. Refer to Grunticon for more details.

<!-- Background image method -->
<span class="icon icon-message"></span>
<span class="icon icon-email"></span>
<span class="icon icon-australia"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-accessibility"></span>
<span class="icon icon-house"></span>
<span class="icon icon-person"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-add-b"></span>
<span class="icon icon-search"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bank"></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-lg

LESS

The main mixin is called: _icons(BT)

Implementation method #2: Direct embedding (recommended)

This method offers better accessibility as each SVG icon’s internal title value is readable by screen readers. It also allows for greater colour styling options using CSS properties to fill SVG paths.

Direct embedding is only available to modern browsers supporting inline SVGs (IE9+), but will fallback to the method above if necessary. Implementation is very straight forward, only requiring a data‑grunticon‑embed attribute on the icon element.

<!-- Direct embedding method -->
<span class="icon icon-message" data-grunticon-embed></span>
<span class="icon icon-email" data-grunticon-embed></span>
<span class="icon icon-australia" data-grunticon-embed></span>
<span class="icon icon-settings" data-grunticon-embed></span>
<span class="icon icon-accessibility" data-grunticon-embed></span>
<span class="icon icon-house" data-grunticon-embed></span>
<span class="icon icon-person" data-grunticon-embed></span>
<span class="icon icon-camera" data-grunticon-embed></span>
<span class="icon icon-add-b" data-grunticon-embed></span>
<span class="icon icon-search" data-grunticon-embed></span>
<span class="icon icon-chat" data-grunticon-embed></span>
<span class="icon icon-bank" data-grunticon-embed></span>

<!-- Direct embedding method (with fill colour) -->
<style>
	.icon-fillexample .icons-background {
		fill: #0074C4;
	}
</style>
<span class="icon icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-email icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-australia icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-settings icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-accessibility icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-house icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-person icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-camera icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-add-b icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-search icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-chat icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-bank icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-lg

LESS

The main mixin is called: _icons(BT)
2.0.0

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Sizing

These icons were designed on a 24px grid. They must only be used at the following sizes: 12px, 18px, 24px, 36px and 48px. If the icons are not used at these sizes they will appear blurred.

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Extra small: 12px -->
<span class="icon icon-xsmall icon-{NAME}"></span>

<!-- Small: 18px -->
<span class="icon icon-small icon-{NAME}"></span>

<!-- Medium (default): 24px -->
<span class="icon icon-{NAME}"></span>

<!-- Large: 36px -->
<span class="icon icon-large icon-{NAME}"></span>

<!-- Extra large: 48px -->
<span class="icon icon-xlarge icon-{NAME}"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #1: Background image

This simple method requires less markup, but is not semantic or accessible and is trickier to style icons with colour; only possible with the source code, updating the Gruntfile.js settings and running Grunt to compile. Refer to Grunticon for more details.

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-message"></span>
<span class="icon icon-email"></span>
<span class="icon icon-australia"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-accessibility"></span>
<span class="icon icon-house"></span>
<span class="icon icon-person"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-add"></span>
<span class="icon icon-search"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bank"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #2: Direct embedding (recommended)

This method offers better accessibility as each SVG icon’s internal title value is readable by screen readers. It also allows for greater colour styling options using CSS properties to fill SVG paths.

Direct embedding is only available to modern browsers supporting inline SVGs (IE9+), but will fallback to the method above if necessary. Implementation is very straight forward, only requiring a data‑grunticon‑embed attribute on the icon element.

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Direct embedding method -->
<span class="icon icon-message" data-grunticon-embed></span>
<span class="icon icon-email" data-grunticon-embed></span>
<span class="icon icon-australia" data-grunticon-embed></span>
<span class="icon icon-settings" data-grunticon-embed></span>
<span class="icon icon-accessibility" data-grunticon-embed></span>
<span class="icon icon-house" data-grunticon-embed></span>
<span class="icon icon-person" data-grunticon-embed></span>
<span class="icon icon-camera" data-grunticon-embed></span>
<span class="icon icon-add" data-grunticon-embed></span>
<span class="icon icon-search" data-grunticon-embed></span>
<span class="icon icon-chat" data-grunticon-embed></span>
<span class="icon icon-bank" data-grunticon-embed></span>

<!-- Direct embedding method (with fill colour) -->
<style>
	.icon-fillexample .icons-background {
		fill: #0074C4;
	}
</style>
<span class="icon icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-email icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-australia icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-settings icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-accessibility icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-house icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-person icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-camera icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-add icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-search icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-chat icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-bank icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Responsive icons

Size icons according to grid breakpoints by appending the breakpoint to your size modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example icon-small becomes icon-small-md for an icon that will change to small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • icon-{size}-{breakpoint}: The icon will render at the given size at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • icon-{size}-{breakpoint}-only: The icon will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your icon to get the desired effect. Start with setting the default icon size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .icon-{size}-xs or .icon-{size}-lg-only classes; simply use .icon-{size} and .icon-{size}-lg respectively.

Demo

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)
2.0.1

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Sizing

These icons were designed on a 24px grid. They must only be used at the following sizes: 12px, 18px, 24px, 36px and 48px. If the icons are not used at these sizes they will appear blurred.

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Extra small: 12px -->
<span class="icon icon-xsmall icon-{NAME}"></span>

<!-- Small: 18px -->
<span class="icon icon-small icon-{NAME}"></span>

<!-- Medium (default): 24px -->
<span class="icon icon-{NAME}"></span>

<!-- Large: 36px -->
<span class="icon icon-large icon-{NAME}"></span>

<!-- Extra large: 48px -->
<span class="icon icon-xlarge icon-{NAME}"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #1: Background image

This simple method requires less markup, but is not semantic or accessible and is trickier to style icons with colour; only possible with the source code, updating the Gruntfile.js settings and running Grunt to compile. Refer to Grunticon for more details.

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-message"></span>
<span class="icon icon-email"></span>
<span class="icon icon-australia"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-accessibility"></span>
<span class="icon icon-house"></span>
<span class="icon icon-person"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-add"></span>
<span class="icon icon-search"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bank"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #2: Direct embedding (recommended)

This method offers better accessibility as each SVG icon’s internal title value is readable by screen readers. It also allows for greater colour styling options using CSS properties to fill SVG paths.

Direct embedding is only available to modern browsers supporting inline SVGs (IE9+), but will fallback to the method above if necessary. Implementation is very straight forward, only requiring a data‑grunticon‑embed attribute on the icon element.

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Direct embedding method -->
<span class="icon icon-message" data-grunticon-embed></span>
<span class="icon icon-email" data-grunticon-embed></span>
<span class="icon icon-australia" data-grunticon-embed></span>
<span class="icon icon-settings" data-grunticon-embed></span>
<span class="icon icon-accessibility" data-grunticon-embed></span>
<span class="icon icon-house" data-grunticon-embed></span>
<span class="icon icon-person" data-grunticon-embed></span>
<span class="icon icon-camera" data-grunticon-embed></span>
<span class="icon icon-add" data-grunticon-embed></span>
<span class="icon icon-search" data-grunticon-embed></span>
<span class="icon icon-chat" data-grunticon-embed></span>
<span class="icon icon-bank" data-grunticon-embed></span>

<!-- Direct embedding method (with fill colour) -->
<style>
	.icon-fillexample .icons-background {
		fill: #0074C4;
	}
</style>
<span class="icon icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-email icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-australia icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-settings icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-accessibility icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-house icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-person icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-camera icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-add icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-search icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-chat icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-bank icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Responsive icons

Size icons according to grid breakpoints by appending the breakpoint to your size modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example icon-small becomes icon-small-md for an icon that will change to small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • icon-{size}-{breakpoint}: The icon will render at the given size at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • icon-{size}-{breakpoint}-only: The icon will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your icon to get the desired effect. Start with setting the default icon size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .icon-{size}-xs or .icon-{size}-lg-only classes; simply use .icon-{size} and .icon-{size}-lg respectively.

Demo

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)
2.0.2

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Sizing

These icons were designed on a 24px grid. They must only be used at the following sizes: 12px, 18px, 24px, 36px and 48px. If the icons are not used at these sizes they will appear blurred.

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Extra small: 12px -->
<span class="icon icon-xsmall icon-{NAME}"></span>

<!-- Small: 18px -->
<span class="icon icon-small icon-{NAME}"></span>

<!-- Medium (default): 24px -->
<span class="icon icon-{NAME}"></span>

<!-- Large: 36px -->
<span class="icon icon-large icon-{NAME}"></span>

<!-- Extra large: 48px -->
<span class="icon icon-xlarge icon-{NAME}"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #1: Background image

This simple method requires less markup, but is not semantic or accessible and is trickier to style icons with colour; only possible with the source code, updating the Gruntfile.js settings and running Grunt to compile. Refer to Grunticon for more details.

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-message"></span>
<span class="icon icon-email"></span>
<span class="icon icon-australia"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-accessibility"></span>
<span class="icon icon-house"></span>
<span class="icon icon-person"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-add"></span>
<span class="icon icon-search"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bank"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #2: Direct embedding (recommended)

This method offers better accessibility as each SVG icon’s internal title value is readable by screen readers. It also allows for greater colour styling options using CSS properties to fill SVG paths.

Direct embedding is only available to modern browsers supporting inline SVGs (IE9+), but will fallback to the method above if necessary. Implementation is very straight forward, only requiring a data‑grunticon‑embed attribute on the icon element.

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Direct embedding method -->
<span class="icon icon-message" data-grunticon-embed></span>
<span class="icon icon-email" data-grunticon-embed></span>
<span class="icon icon-australia" data-grunticon-embed></span>
<span class="icon icon-settings" data-grunticon-embed></span>
<span class="icon icon-accessibility" data-grunticon-embed></span>
<span class="icon icon-house" data-grunticon-embed></span>
<span class="icon icon-person" data-grunticon-embed></span>
<span class="icon icon-camera" data-grunticon-embed></span>
<span class="icon icon-add" data-grunticon-embed></span>
<span class="icon icon-search" data-grunticon-embed></span>
<span class="icon icon-chat" data-grunticon-embed></span>
<span class="icon icon-bank" data-grunticon-embed></span>

<!-- Direct embedding method (with fill colour) -->
<style>
	.icon-fillexample .icons-background {
		fill: #0074C4;
	}
</style>
<span class="icon icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-email icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-australia icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-settings icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-accessibility icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-house icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-person icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-camera icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-add icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-search icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-chat icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-bank icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Responsive icons

Size icons according to grid breakpoints by appending the breakpoint to your size modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example icon-small becomes icon-small-md for an icon that will change to small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • icon-{size}-{breakpoint}: The icon will render at the given size at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • icon-{size}-{breakpoint}-only: The icon will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your icon to get the desired effect. Start with setting the default icon size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .icon-{size}-xs or .icon-{size}-lg-only classes; simply use .icon-{size} and .icon-{size}-lg respectively.

Demo

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)
2.0.3

What’s new since v2.0.2

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated icon SVGs to include focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers. (#433)
  • Updated the Slack icon (.icon-slack)

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Sizing

These icons were designed on a 24px grid. They must only be used at the following sizes: 12px, 18px, 24px, 36px and 48px. If the icons are not used at these sizes they will appear blurred.

What’s new since v2.0.2

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated icon SVGs to include focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers. (#433)
  • Updated the Slack icon (.icon-slack)

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Extra small: 12px -->
<span class="icon icon-xsmall icon-{NAME}"></span>

<!-- Small: 18px -->
<span class="icon icon-small icon-{NAME}"></span>

<!-- Medium (default): 24px -->
<span class="icon icon-{NAME}"></span>

<!-- Large: 36px -->
<span class="icon icon-large icon-{NAME}"></span>

<!-- Extra large: 48px -->
<span class="icon icon-xlarge icon-{NAME}"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #1: Background image

This simple method requires less markup, but is not semantic or accessible and is trickier to style icons with colour; only possible with the source code, updating the Gruntfile.js settings and running Grunt to compile. Refer to Grunticon for more details.

What’s new since v2.0.2

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated icon SVGs to include focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers. (#433)
  • Updated the Slack icon (.icon-slack)

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-message"></span>
<span class="icon icon-email"></span>
<span class="icon icon-australia"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-accessibility"></span>
<span class="icon icon-house"></span>
<span class="icon icon-person"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-add"></span>
<span class="icon icon-search"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bank"></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Implementation method #2: Direct embedding (recommended)

This method offers better accessibility as each SVG icon’s internal title value is readable by screen readers. It also allows for greater colour styling options using CSS properties to fill SVG paths.

Direct embedding is only available to modern browsers supporting inline SVGs (IE9+), but will fallback to the method above if necessary. Implementation is very straight forward, only requiring a data‑grunticon‑embed attribute on the icon element.

What’s new since v2.0.2

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated icon SVGs to include focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers. (#433)
  • Updated the Slack icon (.icon-slack)

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Direct embedding method -->
<span class="icon icon-message" data-grunticon-embed></span>
<span class="icon icon-email" data-grunticon-embed></span>
<span class="icon icon-australia" data-grunticon-embed></span>
<span class="icon icon-settings" data-grunticon-embed></span>
<span class="icon icon-accessibility" data-grunticon-embed></span>
<span class="icon icon-house" data-grunticon-embed></span>
<span class="icon icon-person" data-grunticon-embed></span>
<span class="icon icon-camera" data-grunticon-embed></span>
<span class="icon icon-add" data-grunticon-embed></span>
<span class="icon icon-search" data-grunticon-embed></span>
<span class="icon icon-chat" data-grunticon-embed></span>
<span class="icon icon-bank" data-grunticon-embed></span>

<!-- Direct embedding method (with fill colour) -->
<style>
	.icon-fillexample .icons-background {
		fill: #0074C4;
	}
</style>
<span class="icon icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-email icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-australia icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-settings icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-accessibility icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-house icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-person icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-camera icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-add icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-search icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-chat icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-bank icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)

Responsive icons

Size icons according to grid breakpoints by appending the breakpoint to your size modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example icon-small becomes icon-small-md for an icon that will change to small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • icon-{size}-{breakpoint}: The icon will render at the given size at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • icon-{size}-{breakpoint}-only: The icon will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your icon to get the desired effect. Start with setting the default icon size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .icon-{size}-xs or .icon-{size}-lg-only classes; simply use .icon-{size} and .icon-{size}-lg respectively.

Demo

What’s new since v2.0.2

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated icon SVGs to include focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers. (#433)
  • Updated the Slack icon (.icon-slack)

What’s new since v2.0.1

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Updated the transfer icon design (.icon-transfer)

What’s new since v2.0.0

This version changed: SVG, CSS/LESS, but not: HTML, JS
  • Added new pay, gift and image-square icons (.icon-pay, .icon-gift and .icon-image-square)
  • Adjusted vertical positioning of icons inside links
  • Adjusted specificity of icons inside links

What’s new since v1.0.0

This version changed: SVG, CSS/LESS, HTML, but not: JS
  • Updated the SVG icon design, including a number of brand new icons
  • Updated the .icon-loading and .icon-loading-inverse animated icons; IE8&9 now use a simple clock icon
  • Introducing our new class size naming convention of .icon-[xsmall|small|large|xlarge] (rather than .icon-size-[sm|md|lg]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360)
  • New icon designs are designed for optimal rendering for the above sizes; snapping to the pixel grid where possible
  • New responsive 'sizing by breakpoint' options using .icon-{size}-{breakpoint} and .icon-{size}-{breakpoint}-only classes (as per Buttons v4.0.0) (#382)
  • Icons are now vertically aligned to the middle by default
<!-- Background image method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]"></span>

<!-- Direct embedding method -->
<span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}[-only]]" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-xsmall
  • icon-small
  • icon-large
  • icon-xlarge

LESS

The main mixin is called: _icons(BT)