Question: I am using this piece of code for my nav bar

```
<a href="#home" data-icon="home" data-iconpos="top" class="ui-btn-active ui-state-persist">Home</a>

```

with the following CSS

```
.ui-icon-home {
       background: url("home.png") no-repeat 50% 50% !important;      
}

```

This code works perfectly and replaces default icon image but I cant use large icons here. I want to use 22 \* 22 px icons. When I try to use 22 \* 22 px icons jQuery Mobile encaps icons inside a circle and thus showing only some part of my custom icon I want to remove circle.

Answer: 
You can use the following css.This will override the default values for icon classes.

```
.ui-icon-home {
   background: url("home.png") no-repeat 50% 50% !important;      
   -moz-border-radius:0px;
   -webkit-border-radius:0px;
   border-radius:0px;
   width:22px;
   height:22px;
   margin-top:-12px;/*Adjust this value to position the icon*/
}

```
For icons twice as big as the regular size, use:

```
 .ui-icon-custom::after {
   background-image: url( "custom.svg");
 }
 .big-icon {
   padding-top: 4em;
   height: 6em;
 }
 .big-icon::after {
   margin-left: -1.3em;
   width: 2.6em;
   height: 2.6em;
   background-size: 2.6em 2.6em;
   border-radius: 0;
 }

```

where custom.svg is your custom icon. Remember to add two classes to your button: `big-icon` and `ui-icon-custom`.