# Developing with icons
> The integration of icons into the code varies by framework. To accommodate the diverse range of potential use cases, external icons can be integrated in addition to the existing icon set.
# Usage
The package @siemens/ix-icons offers a large set of icons. It also comes with the ix-icon component that displays them in your application. Additionally custom SVG icons (that are not part of the library) can be used.
Since V3.0.0, all available iX icons are no longer loaded automatically. Only the icons actually used in the application will be part of the bundle to significantly reduce the overall bundle size. As a result, explicitly import icons for correct rendering.
## Icon usage in supported frameworks
### Angular
Provide all iX icons as asset folder via `angular.json`.
```json
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "node_modules/@siemens/ix-icons/svg",
"output": "./svg"
}
],
```
To avoid unwanted console warnings, we recommend you also configure the domain of the asset path using the `meta`-tag:
```html
```
Or using the `setAssetPath`-function:
```ts
import { setAssetPath } from '@siemens/ix-icons/components';
setAssetPath('/svg');
```
It is also possible to import individual icons without an asset folder via [addIcons](#reference-icons-by-name).
Then you can reference iX icons by name anywhere in your application.
```html
```
### Web components
```html
```
### React
```tsx
import { iconStar } from '@siemens/ix-icons/icons';
```
### Vue
```tsx
import { iconStar } from '@siemens/ix-icons/icons';
```
## Reference icons by name
Although referencing icons by name (e.g. ``) is still also possible, simply import all icons you want to display in your application via the `addIcons` method.
### React Examples
#### add-icons.tsx
```tsx
import { IxIcon } from '@siemens/ix-react';
import { addIcons } from '@siemens/ix-icons';
import { iconStar, iconStarFilled } from '@siemens/ix-icons/icons';
import './icon-toggle-button-secondary.scoped.css';
export default () => {
addIcons({ iconStar, iconStarFilled });
return (
<>
);
};
```
### Angular Examples
#### add-icons.ts
```ts
import { Component } from '@angular/core';
import { addIcons } from '@siemens/ix-icons';
import { iconStar, iconStarFilled } from '@siemens/ix-icons/icons';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './add-icons.html',
styleUrls: ['./add-icons.css'],
})
export default class AddIcons {
readonly icons = { iconStar, iconStarFilled };
constructor() {
addIcons({ iconStar, iconStarFilled });
}
}
```
#### add-icons.html
```html
```
#### add-icons.css
```css
body {
display: flex;
flex-direction: column;
}
div,
ix-icon {
margin: 0.25rem;
}
```
### Angular Standalone Examples
#### add-icons.ts
```ts
import { Component } from '@angular/core';
import { IxIcon } from '@siemens/ix-angular/standalone';
import { addIcons } from '@siemens/ix-icons';
import { iconStar, iconStarFilled } from '@siemens/ix-icons/icons';
@Component({
selector: 'app-example',
templateUrl: './add-icons.html',
styleUrls: ['./add-icons.css'],
imports: [IxIcon],
})
export default class AddIcons {
readonly icons = { iconStar, iconStarFilled };
constructor() {
addIcons({ iconStar, iconStarFilled });
}
}
```
#### add-icons.html
```html
```
#### add-icons.css
```css
body {
display: flex;
flex-direction: column;
}
div,
ix-icon {
margin: 0.25rem;
}
```
### Vue Examples
#### add-icons.vue
```vue
```
## Integrate external icons
### Technical requirements
- Supported icon format is SVG
- Each icon is a single SVG file, Sprites are not supported yet
- The icon has a size of 512✕512 (width, height and viewBox)
- All color information within the SVG will be ignored
- Remove any title attributes (` ... `) to make sure no unintentional tooltips appear on the icon
- For visual and formal requirements see guidelines tab above
```tsx
```
### Internal SVG structure
The provided SVG icons are graphic resources whose code is mostly generated by design applications such as Figma, Sketch or Adobe Illustrator. The tools use different export routines, which can also change over time. We therefore cannot guarantee that the internal structure of an SVG will be preserved after updates – even if the icons remain visually the same.