Siemens Industrial Experience Icons

If you are also using the library Siemens Industrial Experience, no additional project setup will be necessary. The packages @siemens/ix-angular, @siemens/ix-react or @siemens/ix-vue will take care of setting up the icon library for you.

If you want to use @siemens/ix-icons without @siemens/ix you need to follow these steps:

Place the following <script> near the end of your page, right before the closing tag.

<script type="module" src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.js"></script>

Now you can render icons in your applicaton:

<ix-icon name="star"></ix-icon>

First install the package @siemens/ix-icons@latest in your project (e.g. npm install --save @siemens/ix-icons).

Then load the icon component:

import { defineCustomElements } from '@siemens/ix-icons/loader';

// Register Web Component <ix-icon></ix-icon>
defineCustomElements();

1. Copy SVG Files: Copy all SVG files located under node_modules/@siemens/ix-icons/svg to an asset folder in your project. This allows the ix-icon component to fetch the images.

2. Alternative Method: Alternatively, you can use the addIcons function to load specific icons directly in your code. For example:

   import { addIcons } from '@siemens/ix-icons';
   import { iconStar } from '@siemens/ix-icons/icons';
   
   addIcons({ iconStar });

   <ix-icon name="star"></ix-icon>

   You only need to add the same icon once. Additional calls to addIcons will not add redundant copies of the same icons to the collection.

   Re-adding an icon name that is already registered replaces the existing icon data and logs a console warning. If you register the same icons from several places on purpose (for example, in multiple lazily loaded modules), pass true as the second argument (skipExisting) to keep the icons that are already registered. Icons that aren't registered yet are still added, and no warning is logged:

   addIcons({ iconStar }, true);

   addIconToCache(name, icon, skipExisting) accepts the same flag as an optional third argument.

<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>

pnpm install

pnpm build

Contributions, issues and feature requests are welcome!

Copyright © 2019–2025 Siemens AG.

This project is MIT licensed.