These logos are commonly used in Westpac Group 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

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!
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!
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!
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!
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!
<!-- 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(WBG)
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!
<!-- 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(WBG)
2.0.7

What’s new since v2.0.6

This version changed: SVG CSS/LESS, but not: HTML, JS
  • .logo-wbc-200 logo removed, Westpac multi-brand logos updated. The ‘Westpac 200’ logo is now deprecated, we have reverted back to using the standard ‘Westpac W’ logo. (#446)

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!
<!-- 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(WBG)