[Development Guides Home](/guides) >> [Quickstart Development Guide](/guides/quickstart-development-guide)

# Tutorial - Add a Link to the cPanel Interface

## Introduction

This tutorial adds an icon that links to an external location to the cPanel interface. For the purposes of this tutorial, an "external location" is a location outside of cPanel & WHM (for example, a support or sales website).

For a tutorial to create an authorized integration link, use our [Create an Integration Link](/guides/guide-to-integration-links) tutorial.

div
Important:

To add icons to multiple themes, you **must** repeat the following steps for each theme:

* Compress the `install.json` file and icon files.
* Run the `/usr/local/cpanel/scripts/install_plugin`  script to install the plugin.
* You **must** provide separate icons for each theme, in the appropriate sizes.


## Add a link to the cPanel interface

### Create an `install.json` file

To begin, create a blank [`install.json file`](/guides/guide-to-cpanel-plugins/guide-to-cpanel-plugins-add-plugins).

The cPanel interface uses this file to add groups to [cPanel's `dynamicui.conf` file system](/guides/guide-to-cpanel-plugins/guide-to-cpanel-plugins-the-dynamicui-files) automatically.

### Add a custom group to the `install.json` file

Add the desired group information to the `install.json` file.

In this example:

* Line 3 sets the group's display name to `Support`. This is the name that displays in the cPanel interface.
* Line 4 sets the group's display order to `11`. Groups with lower display orders display higher in the cPanel interface.
* Line 5 sets the group's type. This value **must** always be `group`.
* Line 6 sets the group's internal name as `custom_support_group`. This is the name that cPanel uses to associate a group with its icons.



```
[
   {
      "name" : "Support",
      "order" : 11,
      "type" : "group",
      "id" : "custom_support_group"
   }
]
```

### Add an icon to the `install.json` file

Add the desired icon and link information to the `install.json` file.

The image **must** be 48x48 pixels, and image files **must** use the `.svg` file format.

In this example:

* Line 9 sets this icon as the `supportcontact.svg` file.
* Line 10 specifies that this icon will appear as part of the `custom_support_group` group.
* Line 11 sets the icon's order to `10000`. Icons with a lower order appear first in their assigned groups.
* Line 12 sets the icon's display name as `Contact Support`. This text displays with the specified image in the cPanel interface.
* Line 13 sets the icon's type. This value **must** be `link`.
* Line 14 sets the icon's internal name.
* Line 15 sets the link's URL. This link will direct cPanel users to `https://support.example.com`.



```
[
   {
      "name" : "Support",
      "order" : 11,
      "type" : "group",
      "id" : "custom_support_group"
   },
   {
      "icon" : "supportcontact.svg",
      "group_id" : "custom_support_group",
      "order" : 10000,
      "name" : "Contact Support",
      "type" : "link",
      "id" : "contact_support",
      "uri" : "https://support.example.com"
   }
]
```

### Optional: Add more icons

You can add multiple icons to the same group and `install.json` file. The example below adds a second icon, which links to an external knowledge base, to the `custom_support_group` group.


```
[
   {
      "name" : "Support",
      "order" : 11,
      "type" : "group",
      "id" : "custom_support_group"
   },
   {
      "icon" : "supportcontact.svg",
      "group_id" : "custom_support_group",
      "order" : 10000,
      "name" : "Contact Support",
      "type" : "link",
      "id" : "contact_support",
      "uri" : "https://support.example.com"
   },
   {
      "icon" : "knowledgebase.svg",
      "group_id" : "custom_support_group",
      "order" : 10002,
      "name" : "Support Knowledge Base",
      "type" : "link",
      "id" : "support_kb",
      "uri" : "https://supportkb.example.com"
   }
]
```

### Compress the `install.json` file and icon files

Create a directory that contains the `install.json` file, and the icon files for each icon.

For this tutorial's examples, this directory is the `supporticons` directory, which contains the following files:

* `install.json`
* `knowledgebase.svg`
* `supportcontact.svg`


To compress these files into a `.tar.gz` file, run the following command:


```
tar -cvzf supporticons.tar.gz supporticons/*
```

This command compresses **all** of the directory's contents. Before you run this command, make **certain** that the directory only contains the files that you wish to compress.

If the command succeeded, it returns the following output:


```
a supporticons/install.json
a supporticons/knowledgebase.svg
a supporticons/supportcontact.svg
```

### Run the` /usr/local/cpanel/scripts/install_plugin` script to install the plugin

#### Jupiter

To install the icons, run the following command:


```
/usr/local/cpanel/scripts/install_plugin supporticons.tar.gz --theme jupiter
```

If the installation succeeds, the script returns the following output:


```
Installing to jupiter
Cleaning up temporary directories
Running sprite_generator
Plugin installed ok
```

Due to the permissions that the `/usr/local/cpanel/scripts/install_plugin` script requires in order to access the necessary files, **only** the `root` user can run this script successfully.

### View the new icons in the cPanel interface

When users log in to the cPanel interface, the new icons will now display:

![New cPanel icon links](/assets/new-cpanel-icons.5df3f4985572dc987baa927ec11946e1dccb43cd22b0c0e011130ef89dc06674.a80915f4.png)

Remember:
To add icons to multiple themes, you **must** repeat the following steps for each theme with the appropriate icon files and command: * Compress the `install.json` file and icon files. * Run the` /usr/local/cpanel/scripts/install_plugin` script to install the plugin.