> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/changing-toolstripbutton-icons-through-css.md).

# 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](/files/j3393dhwrevaDjQHgkVQ)

{% 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](/files/EMAkCDKO9BJ70Lv2HmyH)