Skip to main content

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

Angular​

Provide all iX icons as asset folder via angular.json.

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
  "glob": "**/*.svg",
  "input": "node_modules/@siemens/ix-icons/svg",
  "output": "./svg"
  }
],

It is also possible to import individual icons without an asset folder via addIcons.

Then you can reference iX icons by name anywhere in your application.

<ix-icon name="star" size="16"></ix-icon>
<ix-icon name="star" size="24"></ix-icon>
<ix-icon name="star" size="32"></ix-icon>

Web components​

<ix-icon name="star" size="16"></ix-icon>
<ix-icon name="star" size="24"></ix-icon>
<ix-icon name="star" size="32"></ix-icon>

React​

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

<IxIcon name={iconStar} size="16"></IxIcon>
<IxIcon name={iconStar} size="24"></IxIcon>
<IxIcon name={iconStar} size="32"></IxIcon>

Vue​

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

<IxIcon :name="iconStar" size="16"></IxIcon>
<IxIcon :name="iconStar" size="24"></IxIcon>
<IxIcon :name="iconStar" size="32"></IxIcon>

Reference icons by name​

Although referencing icons by name (e.g. <ix-icon name="star"><ix-icon>) is still also possible, simply import all icons you want to display in your application via the addIcons method.

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 (<title> ... </title>) to make sure no unintentional tooltips appear on the icon
  • For visual and formal requirements see guidelines tab above
  <ix-icon name="./assets/my-icon.svg"></ix-icon>
  <ix-icon name="https://my.example.cdn.address/assets/my-icon.svg"></ix-icon>

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.