• Colour palettes
• Icons
• Typography
• Utility classes

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

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

How to use

Recommended

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:

• Pull 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 West Midlands Rail Executive Services

  <!-- Ajax SVGs from WMRE Design System -->
  <script>
    const ajax = new XMLHttpRequest();
    ajax.open('GET', 'https://wmcadigital.github.io/wmre-design-system/img/wmre-sprite.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 #wmre-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.

  <svg >
  <use xlink:href="#wmre-ICON-TAG-NAME" href="#wmre-ICON-TAG-NAME"></use>
</svg>

Can't include via recommended method? Try hosting the sprites locally

• 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 above.

Icons

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

General

Social