Make CSS Sprite Image resize accordingly as the broswer zoom is altered

Question

I'm using css sprite and currently this is how it looks like Icon is part of sprite It stays fine but when i start changing the zoom of the browser nearby image starts to bleed in the image Adjacent logo bleeding in I tried increasing the padding by 100px as well but it is not a correct solution.

I need to ensure the sprite image stays in correct aspect and doesn't bleeds as the page is zoomed.

I tried using a div wrapper but in this case it is not wroking. here's the code

.icon {
    width: 512px;; height: 512px;;
    background-size: auto 70%;
    height: 70%;
    background-position: center center;
    cursor: pointer;
    background-size: cover !important;
    background-repeat-x: no-repeat;
    /*zoom: 0.049;*/
    background: url("../resources/images/css_sprites_ico.png") 1px -3657px;
}

and the code where this is implemented is this

 {name:'setup',index:'setup',label:'Setup',width:80,align:"center",search:false,sortable:false,cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
                      var classes = "icon";