These logos are commonly used in St.George user interfaces. They 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 symbols using code and also complies with AA accessibility requirements.

Logos

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.0

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.1

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.2

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Part of the STG logos where not showing. We really want all parts of the logos showing so we gave it a pep-talk. (#254)

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.3

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • We added Westpacs 200 year birthday logo. Yes. We’re turning 200. 🎂🎉🎁 Feels just like yesterday when we started with this whole banking thing. (#280)

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Part of the STG logos where not showing. We really want all parts of the logos showing so we gave it a pep-talk. (#254)

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.4

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Logos. Logos use the .logo-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • We added Westpacs 200 year birthday logo. Yes. We’re turning 200. 🎂🎉🎁 Feels just like yesterday when we started with this whole banking thing. (#280)

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Part of the STG logos where not showing. We really want all parts of the logos showing so we gave it a pep-talk. (#254)

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
2.0.5

What’s new since v2.0.4

This version changed: SVG CSS/LESS, but not: HTML, JS
  • New .logo-multibrand-* Multi-brand logos; brought over from the Symbols module and renamed for clarity. (#333)
  • Reduce CSS over-specificity (#346)

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Logos. Logos use the .logo-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • We added Westpacs 200 year birthday logo. Yes. We’re turning 200. 🎂🎉🎁 Feels just like yesterday when we started with this whole banking thing. (#280)

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Part of the STG logos where not showing. We really want all parts of the logos showing so we gave it a pep-talk. (#254)

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<!-- Background image method -->
<span class="logo logo-wbc"></span>

<!-- Direct embedding method -->
<span class="logo logo-wbc" data-grunticon-embed></span>

<!-- Large: Background image method -->
<span class="logo logo-multibrand-large"></span>

<!-- Large: Direct embedding method -->
<span class="logo logo-multibrand-large" data-grunticon-embed></span>

<!-- Small: Background image method -->
<span class="logo logo-multibrand-small"></span>

<!-- Small: Direct embedding method -->
<span class="logo logo-multibrand-small" data-grunticon-embed></span>

LESS

The main mixin is called: _logos(STG)
2.0.6

What’s new since v2.0.5

This version changed: SVG CSS/LESS, but not: HTML, JS
  • .logo-multibrand-small multi-brand logo has been resized; slightly taller and wider to 122×44px
  • New .logo-multibrand-small-center and .logo-multibrand-small-right multi-brand logos (122×44px)
  • WBC brand’s multi-brand logo now uses the 'Westpac 200' design

What’s new since v2.0.4

This version changed: SVG CSS/LESS, but not: HTML, JS
  • New .logo-multibrand-* Multi-brand logos; brought over from the Symbols module and renamed for clarity. (#333)
  • Reduce CSS over-specificity (#346)

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Logos. Logos use the .logo-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • We added Westpacs 200 year birthday logo. Yes. We’re turning 200. 🎂🎉🎁 Feels just like yesterday when we started with this whole banking thing. (#280)

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS, HTML, JS
  • Part of the STG logos where not showing. We really want all parts of the logos showing so we gave it a pep-talk. (#254)

What’s new since v2.0.0

This version changed: CSS/LESS, SVG but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • In a cleaning-frenzy we removed duplicated logos and renamed them to more relevant names. Now all done and dusted!

What’s new since v1.0.1

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<!-- Background image method -->
<span class="logo logo-{NAME}"></span>

<!-- Direct embedding method -->
<span class="logo logo-{NAME}" data-grunticon-embed></span>

LESS

The main mixin is called: _logos(STG)