https://github.com/siemens/ix-icons
Icon library for @siemens/ix
https://github.com/siemens/ix-icons
font icon-font icons iconset svg-icons
Last synced: 4 months ago
JSON representation
Icon library for @siemens/ix
- Host: GitHub
- URL: https://github.com/siemens/ix-icons
- Owner: siemens
- License: mit
- Created: 2022-09-19T18:04:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T10:35:04.000Z (about 1 year ago)
- Last Synced: 2025-03-30T12:34:01.298Z (about 1 year ago)
- Topics: font, icon-font, icons, iconset, svg-icons
- Language: TypeScript
- Homepage:
- Size: 11.7 MB
- Stars: 33
- Watchers: 5
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
> Siemens Industrial Experience Icons
[](./LICENSE.md)
## Usage
### Setting up with Siemens Industrial Experience design system
If you are also using the library [Siemens Industrial Experience](https://github.com/siemens/ix/), 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 `` near the end of your page, right before the closing </body> tag.
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.esm.js">
```
Now you can render icons in your applicaton:
```html
```
### 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:
```javascript
import { defineCustomElements } from '@siemens/ix-icons/loader';
// Register Web Component
defineCustomElements();
```
### Prepare your project
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:
```javascript
import { addIcons } from '@siemens/ix-icons';
import { iconStar } from '@siemens/ix-icons/icons';
addIcons({ iconStar });
```
```html
```
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.
### Use the `ix-icon` component with custom SVG's
```tsx
```
## Development
### Installation
```sh
pnpm install
```
### Build
```sh
pnpm build
```
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
## 📝 License
Copyright © 2019–2025 [Siemens AG](https://www.siemens.com/).
This project is MIT licensed.