Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Styles

Icons

About

What does it do?

  • Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).

When to use it?

  • Only use icons and images if there’s a real user need.

When not to use it?

  • Do not use it for unnecessary decoration.

Using icons

WMN Design System icons are available as an SVG sprite to include in your HTML page.

How to use

The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date. To get started, include the below snippet of javascript somewhere in your codebase. This will:

  • the latest SVG icon spritesheet to be used within your web app or service
  • Will ensure the icons work with older browsers such as Internet Explorer 11
  • Keep the icon set consistent with other Transport for West Midlands services
  <!-- Ajax SVGs from WMN Design System -->
  <script>
    const ajax = new XMLHttpRequest();
    ajax.open('GET', 'https://unpkg.com/wmn-design-system@1.7.3/build/img/wmnds-icons.min.svg', true);
    ajax.send();
    ajax.onload = function () {
      const div = document.createElement('div');
      div.style.display = 'none';
      div.innerHTML = ajax.responseText;
      document.body.insertBefore(div, document.body.childNodes[0]);
    };
  </script>

Displaying an icon

To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet. The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #wmnds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.

<svg>
<use xlink:href="#wmnds-ICON-TAG-NAME" href="#wmnds-ICON-TAG-NAME"></use>
</svg>
  • Download the icon svg sprite.
  • Include the downloaded icon sprite in to your project locally.
  • You can now start using the icon svg sprite sheet using the instructions from the "Displaying an icon" section abov

Icons

Find below a list of all our icons and their tags below. To use, don't forget to prefix the tag with 'wmnds-'

General

general-arrow

general-caret-down

general-caret-up

general-checkmark

general-chevron-right

general-circle-hollow

general-circle-solid

general-clock

general-closed

general-contact

general-cross

general-compress

general-current-location

general-disabled

general-electric

general-expand

general-favourite

general-file

general-filter

general-id-card

general-info

general-list

general-location-arrow

general-location-pin

general-minimise

general-n-ticket

general-paperclip

general-parking

general-route

general-report

general-request

general-search

general-share

general-star

general-star-empty

general-success

general-swap

general-sync

general-ticket

general-trash

general-user

general-wallet

general-warning-circle

general-warning-triangle

Swift

swift-bird-icon

swift-card

swift-card-full-logo

swift-full-logo

swift-historical-journey

swift-journey-removed

Social

social-facebook

social-twitter

social-instagram

Isolated

modes-isolated-bus

modes-isolated-coach

modes-isolated-cycle

modes-isolated-eBike

modes-isolated-metro

modes-isolated-plane

modes-isolated-rail

modes-isolated-roads

modes-isolated-walk

modes-isolated-eScooter

With background

modes-bg-bus

modes-bg-coach

modes-bg-cycle

modes-bg-eBike

modes-bg-metro

modes-bg-p-r

modes-bg-plane

modes-bg-rail-nr

modes-bg-rail

modes-bg-roads

modes-bg-walk

modes-bg-eScooter