---
updatedAt: 2026-04-16T11:43:29.000Z
agentTools:
  projectIndex: https://developer.ixon.cloud/llms.txt
---

# Deploying UI Components

To make your UI Component available, you'll need to deploy and publish it. To be able to deploy a UI Component, we'll first need to add some configuration.

# Registration

To be able to deploy a UI Component, you will first need to register it in the platform. Go to **Studio > UI Components** and click **Add new UI Component**. Enter a name that is recognisable for end-users, then click **Add**.

# How to add an icon to your UI Components

Before deploying and publishing your UI Components, it is recommended to **add an icon to your project folder** so that it appears in the component selection when clicking on the **Add a Component** in a Studio page.

<Image align="center" border={true} caption="Example: This is the icon of the VPN Connect component." src="https://files.readme.io/42a8b442ebcda1de2bb6e21c77c4d214dc816ea7d7339275509b73cd5bdecad5-image.png" />

To add an icon, simply **place an SVG icon file in the component folder** (for example, components/service-logbook/icon.svg). It will be automatically picked up by the Portal and displayed as the component icon.

<Image align="center" border={true} src="https://files.readme.io/923d8a4937ec80532c94b202d002248b5a656dfe2432df982f484ad437b46ab3-image.png" className="border" />

## Requirements of the SVG icon

The SVG file has a few requirements:

* It must have a **transparent background**.
* It must be **vector-based** (composed of *paths*, *shapes*, or *strokes*) .
* The name must be **“icon.svg”**; If the name is different, the icon may not be identified correctly.

Once you have applied this last change locally, you can proceed with deploying and publishing of your component.

# Deploy and publish

UI Component deployment is a two stage process, deploying and publishing. Deploying uploads your code to the IXON Cloud in draft allowing you to check and test it. Publishing enables the UI Component for all users.

> 📘 Notes
>
> * The user account that is used for publishing needs to have a role with the **Develop apps** permission.
> * If you use an iframe adapter, you have to build the UI Component before you can deploy it.

First, make sure you are logged in. This can be done via the login command as shown below, this will ask you to fill in your IXON Cloud credentials. You cannot use any SSO login credentials. SSO login is not supported.

```shell
npx cdk login
```

Now that you are logged in, you can deploy your UI Component to the cloud, to do this, run the deployment command. If this is the first time you deploy the component, it will ask for the **Company ID** and **UI Component ID** (this is Public ID of the UI Component).

```shell
npx cdk deploy hello-world
```

A preview link will be displayed in the output. You can do a last check with this link to see if your UI Component works as intended. To make your component available to everyone in the company, publish it.

```shell
npx cdk publish hello-world
```

It will ask you to select the version you want to publish. Once done, all users in the company can use your (updated) component.

# Deploying updates

After deploying and publishing a first version, you can keep uploading **new versions**.

The version number needs to be **increased** in the <Anchor label="manifest file" target="_blank" href="https://developer.ixon.cloud/docs/manifest-file">manifest file</Anchor> every time a new version is deployed, and your users will remain on the published version until you publish a new version.