This is my html code block :

and the icon i am getting from boxicon :https://boxicons.com/

I am struggling in make the icon stay in the center of the button block. I get fail when I try to use

display:flex;
justify-content: center;
align-items: center;

it still not in the center, now is like this:

enter image description here

and also I try use ,also not used.

line-height:2;

below is my css code:

.close-icon {
    position: absolute;
}

#close-button {
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:auto;
    width: 50px;
    height: 50px;
}

.bx-x-circle {
    font-size: 30px;
    line-height: 2;
}