Skip to content

Using Icon Sets Within Web Components

The Web Component SDK library includes a ptcs-icons package that you can use to display SVG icons in web components. The package contains a cds-icons.js file that is used to display all icons within the SDK.

The following image shows an incomplete preview of the available icons:

Using SVG icon libraries has the following benefits:

  • Smaller file size compared to PNG icons, which leads to faster load times.
  • Icons scale to any size without losing sharpness, which improves the user experience on high-resolution devices.
  • Support for different states, such as rule-based coloring.

You can include an icon package by adding an import statement to the .js file of your web components:

import '<path_to_package>/ptcs-icons/cds-icons.js'

You can also use this statement to import your own icons sets.

Icon sets are JS files that are named [iconset-name]-icons.js. Each .js package file contains a list of predefined icons where every icon has a unique id, followed by the SVG data. For example:

<g id="[icon-id]"><path part...
You can display icons from the ptcs-icons package within a ptcs-icon component using the following syntax:

<ptcs-icon icon="cds:[icon-id]"></ptcs-icon>

Note: You can use the file as a template to create and import custom icon sets when using SDK components to build web pages and applications.