Installation

Ensure the Foundations package is installed from npm, which will bring in the Icons package as a dependency

npm install @royallondon/design-system-foundations

Ensure the Foundations CSS import is included at the top of your main CSS file

@import '@royallondon/design-system-foundations/dist/foundations';

Copy the Icons SVG sprite file from the package to the assets folder at the root of your project

@royallondon/design-system-icons/dist/icons.svg

Add the HTML code for the Icon, replacing both [Icon name] and [icon-name] with your chosen Icon from the Icon library. For information about when an Icon is decorative, see the Accessibility section.

<!-- non-decorative -->
<svg class="rl-f-icon">
  <title>[Icon name]</title>
  <use href="/assets/icons.svg#[icon-name]"></use>
</svg>

<!-- decorative -->
<svg class="rl-f-icon" aria-hidden="true">
  <use href="/assets/icons.svg#[icon-name]"></use>
</svg>

Options

| Property | Default | Modifier class | | --------- | -------------- | ------------------------------------------------------------------- | | Colour | currentColor | rl-f-icon--( primary \| secondary \| neutral ) | | Container | none | rl-f-icon--container-( solid \| inverted \| neutral \| semantic ) | | Size | md | rl-f-icon--( xxs \| xs \| sm \| md \| lg \| xl \| xxl ) |

Support

Issues and questions are handled through the Royal London Design System support page.

Licence

@royallondon/design-system-icons

This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.

Use of this package is subject to the Royal London Authorised Use Licence. See the LICENSE.md file included in this package.

The SVG icon library for the Royal London Design System, distributed as a single sprite. For design guidance and the full icon list, see the Icons page.

Release log

| Version | Release notes | | ------- | -------------------------------------------------------------------------------- | | 1.4.0 | Prepare for public npm release: add licence, publish dist only (src removed) | | 1.3.1 | Move to new feed | | 1.3.0 | Add action icons for Like and Dislike | | 1.2.1 | Add semantic container option to docs, replace xlink:href attr | | 1.2.0 | Update colour tokens on the Semantic Circle icons | | 1.1.0 | CSS moved to Foundations (2.16.0) to prevent circular dependency | | 1.0.0 | Initial release of the new SVG-based Icon library |