What does the component do?

An icon is a graphic symbol that is used to visually represent functions, content or actions and improve the user experience.

When should the component be used?

• To visually support and emphasise functions or actions.
• To save space and create an intuitive user interface.
• To make important information or status messages quickly recognisable.
• To support navigation and improve the findability of content.

Rules

• Icons are available in 3 sizes (24 x 24, 36 x 36 and 48 x 48 pixels). Other sizes are not permitted.
• The icons are displayed in a line width of 1 pixel. Exceptions are only permitted in the header.
• Make sure that the size of the icons matches the surrounding font and other elements.
• Use icons sparingly and only where they actually improve the user experience.
• If possible, offer a text alternative or tooltip to explain the meaning of the icon.

Playground

The sbb-icon component provides a solid way of rendering registered and named icons.

The component will dynamically load an SVG for each icon, avoiding multiple requests to the same icon.
The icon components are not tied to specific icon sets; you can register custom namespaces
and then provide the sbb-icon with the name property in the format name="icon-name" or name="namespace:icon-name".

Note that if you do not provide a namespace, the default namespace will be used pointing to the SBB Icons CDN.

<!-- Will use the default namespace -->
<sbb-icon name="app-icon-medium"></sbb-icon>

** Register custom icon namespace **

import { mergeConfig } from '@sbb-esta/lyne-elements/core/config.js';

mergeConfig({
  icon: {
    namespaces: new Map<string, string>().set('your-namespace', 'https://domain-of-your-icons/'),
  },
});

** Register custom interceptor **

import { mergeConfig } from '@sbb-esta/lyne-elements/core/config.js';

mergeConfig({
  icon: {
    interceptor: ({ namespace, name, request }) => {
      if (namespace === 'your-namespace') {
        // Do your own logic
        return Promise.resolve(`<svg-fake data-name="${name}"></svg-fake>`);
      }
      return request();
    },
  },
});

Custom namespaces and interceptors must be registered globally before the first request is made.

If using the default SBB CDN, ensure that the icon name has the size suffix.
E.g. if in the Design (Figma) the icon is called 'circle-plus', the icon name will be either 'circle-plus-small' or 'circle-plus-medium'.

Accessibility

Similar to an <img> element, an icon alone does not convey any useful information for a screen-reader user.
The user of sbb-icon must provide additional information pertaining to how the icon is used.
Based on the use-cases described below, sbb-icon is marked as aria-hidden="true" by default,
but this can be overridden by adding aria-hidden="false" to the element.

In thinking about accessibility, it is useful to place icon use into one of three categories:

1. Decorative: the icon conveys no real semantic meaning and is purely cosmetic.
2. Interactive: a user will click or otherwise interact with the icon to perform some action.
3. Indicator: the icon is not interactive, but it conveys some information, such as a status.
   This includes using the icon in place of a text inside a larger message.

Properties

CSS Properties