# Adding an Icon to a Topic Link

Get started with Menus and Toolbars for WinForms. Create versatile menus and docking/floating toolbars. See more in documentation here.

## Content



In this topic, you will create an image list and then add an image in that list to a topic link.

Complete the following steps:

1.  In the Toolbox, double-click the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) icon to add the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) control to your page.
2.  In the Toolbox, double click the **Image List** icon to add the **Image List** component to your page.
3.  Click the **ImageList** control's smart tag (![icon](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_47.png)) to open the **Image List Tasks** menu.
4.  Select **Choose Images** to open the **Images Collection Editor**.
5.  Click **Add** to open the **Open** dialog box and complete the following:
    1.  Navigate to the image you wish to use as an icon.
    2.  Select the image.
    3.  Press **OK** to close the **Open** dialog box and to return to the **Images Collection Editor**. Observe that the image is numbered “0”.
6.  Press **OK** to close the **Images Collection Editor**.
7.  Hover over **Page 1** with your cursor until the floating toolbar appears. The topic page's toolbar appears as follows:<br />![Floating toolbar](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_69.png)
8.  Click the **Add topic link** button ![button](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_71.png). **Link 1** is added underneath **Page 1**.
9.  On the topic page toolbar, click the **Edit topic page appearance** button ![button](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_76.png) to open the **C1TopicPage Properties** editor.
10.  Click the **Image List** drop-down arrow and select **imageList1** from the list. This will load the image list so that topic page's links can pull images from the list.
11.  Hover over **Link 1** with your cursor until the floating toolbar appears. The topic link's toolbar appears similar to the following:<br /><br /><br />![Toolbar](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_73.png)
12.  Click the **Edit topic link appearance** button ![Button](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_76.png) to open the **C1TopicLink Properties** editor.
13.  Click the **Image Index** drop-down arrow and select **0** from the list.

The icon is added to **Link 1**.

### This topic illustrates the following:

In this topic, you added an icon to a link page. The image below depicts a topic link with an icon.<br />![Form window](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_78.png)

## See Also

[Changing the Visual Style](/componentone/docs/win/online-menus-toolbar/menusandtoolbarsforw2/topicbartasks/customizingtheappear/changingthevisualsty)