siemens
Siemens Industrial Experience Icons
Usage
Setting up with Siemens Industrial Experience design system
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.
Setting up without Siemens Industrial Experience design system
If you want to use @siemens/ix-icons without @siemens/ix you need to follow these steps:
Using CDN
Place the following <script> near the end of your page, right before the closing </body> 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>
Using a package manager like npm/pnpm/yarn
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();
Prepare your project
Copy SVG Files: Copy all SVG files located under
node_modules/@siemens/ix-icons/svgto an asset folder in your project. This allows theix-iconcomponent to fetch the images.Alternative Method: Alternatively, you can use the
addIconsfunction 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
addIconswill not add redundant copies of the same icons to the collection.
Use the ix-icon component with custom SVG's
<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>
Development
Installation
pnpm install
Build
pnpm build
🤝 Contributing
Contributions, issues and feature requests are welcome!
📝 License
Copyright © 2019–2025 Siemens AG.
This project is MIT licensed.