# Changing ToolStripButton icons

This section will show you how to change the ToolStripButton icons of the converted control. To start, we will be using a form named **Form1** that already contains a ToolStrip control named **toolStrip1,** and this in turn, already contains four ToolStrip buttons with their respective icon: **toolStripButton1**, **toolStripButton2**, **toolStripButton3,** and **toolStripButton4**.

![Original migrated application](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FAYCCiP3Xokj3rWondaUQ%2Fform.png?alt=media\&token=8cba245d-c552-47d5-9034-224095e9bc92)

{% hint style="info" %}
In the **Form1.Designer.cs,** **toolStripButton1** and **toolStripButton3** have '*Image*' as their '*DisplayStyle*' property, while **toolStripButton2** and **toolStripButton4** have '*ImageAndText*' as their value. 
{% endhint %}

Let's assume that the developer has already created a sprite image with the icons of the ToolStrip buttons. So, the first step is to copy the sprite image into the frontend Angular migrated project that has a folder called '*images*' under the *'src/assets*' directory.

Then in the backend migrated project, go to **Form1.Designer.cs** and change the *'Image'* property from each toolstrip button to the sprite image url.

As mentioned above, there are 2 scenarios. However, regardless of the 'DisplayStyle' property that each toolstrip button has, the procedure to change the button icon is the same.

* For the first one, when the '*DisplayStyle*' value is *'Image'*, it's done as follows:

```csharp
// 
// toolStripButton1
//
this.toolStripButton1.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;    
this.toolStripButton1.Image = "assets/images/spriteImage.png";
this.toolStripButton1.Name = "toolStripButton1";
this.toolStripButton1.Size = new System.Drawing.Size(29, 24);
this.toolStripButton1.Text = "toolStripButton1";
this.toolStripButton1.Id = "toolStripButton1";
```

* On the other side, when the value is *'ImageAndText'*, it's done as follows:

```javascript
// 
// toolStripButton2
//
this.toolStripButton2.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.ImageAndText;  
this.toolStripButton2.Image = "assets/images/spriteImage.png";
this.toolStripButton2.Name = "toolStripButton2";
this.toolStripButton2.Size = new System.Drawing.Size(29, 24);
this.toolStripButton2.Text = "toolStripButton2";
this.toolStripButton2.Id = "toolStripButton2";
```

Finally, compile both frontend and backend migrated projects and then run the app. The new icons should be shown in the toolbar properly.

![Application with the new toolStripButtons icon](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FdW8w6Egs5rIWq0YaoA3A%2Fimage.png?alt=media\&token=e5b164b6-2d71-4311-99d6-a864a7d9cb92)