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: 
I had the same problem. I fixed it with the following code:

```
.ui-icon {
    background-color: transparent;
    width: 22px;
    height: 22px;
}

```

It removes the black shadow circle behind the icons and makes it 22px height/width.

Good luck.
The class .ui-icon in the jquery mobile has a border radius of 9 px - This might be what is causing your problems. Try changing your css to:

```
.ui-icon-home {
   background: url("home.png") no-repeat 50% 50% !important;      
   -moz-border-radius:0px;
    -webkit-border-radius:0px;
   border-radius:0px
}

```