Icons embellish a UI with small meaningful graphics that represent ideas, objects, or actions.

Icons are static multi-purpose graphics that can attract the user's attention or express a conspicuous meaning.

Icons with universal recognition are rare but a good choice when appropriate in your UI as they are quickly understood by most users. The icons for Home (A), Print (B) and Search (C) are examples of universal icons.

Some icons have become standard for specific uses but may require context to be recognized promptly. For example, icons based on simple lines, such as the 'hamburger' menu (A) or page navigation (B) icons are commonly recognized when used in context.

When adding an icon to your UI, choose icons that readily convey their intended idea or meaning like the universal and standard icons described above. If you can't think of a suitable icon quickly, reconsider whether an icon is the best UI option in this instance. Even if you determine an icon is appropriate, you can still provide accompanying text in the form of a label or tooltip to assist the user.

Don't include icons in your UI unless they have clear meaning or purpose. Decorative icons that simply add a splash of color, for example, don't improve the user experience.

If you need to include information in an icon, consider using a badge instead. Icons can adorn many other components, such as buttons and lists, to improve their usability.

The icon component displays a named icon from Material Icons.

Icons are available in three sizes: small, medium and large.

  1. Small icon – 24px
  2. Medium icon – 36px
  3. Large icon – 48px

Icons are square graphics, so their width and height are the same.

Icons can appear in the colors available in our standard color palettes. For example:

  1. Temenos Primary
  2. Grayscale Primary
  3. Status Success Primary
  4. Status Error Primary
  5. Status Warn Primary

Icons are square graphics, so their width and height are the same.

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For information about how this design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

Set up the accessibility of your icon according to its use:

  • Decorative Icons are only being used for visual or branding reinforcement. If they were removed from the page, users would still understand and be able to use your page. Typically, the majority of icons are decorative and so the icon component is hidden from assistive technology by default.
  • Semantic Icons are ones that you're using to convey meaning, rather than just pure decoration. An example of this would be a star icon to convey that an item is a "favourite". In order to supply this information to assistive technology, simply supply an aria-label attribute.