Skip to main content

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

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

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

  <svg >
  <use xlink:href="#wmcads-ICON-TAG-NAME" href="#wmcads-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 'wmcads-'

General

general-icon-file

general-icon-toolkit

general-icon-list

general-icon-chat

general-icon-map

general-icon-caret-left

general-icon-caret-right

general-icon-caret-down

general-icon-caret-up

general-icon-action-download

general-icon-action-favourite

general-icon-action-expand

general-icon-action-filter

general-icon-action-search

general-icon-action-minimise

general-icon-action-swap

general-icon-action-trash

general-icon-arrow

general-icon-cancel

general-icon-checkmark

general-icon-chevron-down

general-icon-chevron-left

general-icon-chevron-right

general-icon-chevron-up

general-icon-container

general-icon-external-link

general-icon-hamburger

general-icon-hollow-circle

general-icon-id-card

general-icon-info

general-icon-paperclip

general-icon-solid-circle

general-icon-success

general-icon-warning-circle

general-icon-warning-triangle

general-icon-home

Social

social-icon-email

social-icon-linkedin

social-icon-facebook

social-icon-twitter

social-icon-youtube

social-icon-instagram