Change width icon dimensions

Question

Good afternoon, on a site I am developing I need to put as the style of the list icon cluttered as an image, but because it is too big I would just like to decrease its width. I tried here but I could not, follows attached the code.

Html:

<div class="instrucoes">
    <div class="passo1">
        <span>1.</span> <br>
        <span>Deve atender aos requisitos básicos</span>
        <ul>
            <li>
                <span>Possuir CNPJ</span>
            </li>
            <li>
                <span>Se enquadrar em um dos programas apoiados pelo banco</span>
            </li>
            <li>
                <span>Pertencer a um dos municípios atendidos</span>
            </li>
        </ul>
    </div>
</div>

Css:

.passo1 ul{
    margin-top: 10px;
    margin-left: -10px;
    list-style-image: url(../images/check-gray.png);
    color: var(--fontGray);
    font-size: 14px;
}
.passo1 ul li::before {
    position: relative !important;
    display: flex !important;
    width: 20px !important;
}
.passo1 ul li, .passo2 ul li, .passo3 ul li{margin: 25px 0;}
.passo1 span{
    color: var(--fontGray) !important;
    font-size: 14px !important;
    vertical-align: top;
    display: inline-block;
}

Answer 1

Unfortunately it is not possible to control the size of the image used in list-style-image

My suggestion is that since you put one ::before in his li that you put the image in this same pseudo-element.

Look at this example, I haven’t changed anything in your HTML, and in CSS I just used ::before that already had there to place the image and align the li.

.passo1 ul {
    margin-top: 10px;
    margin-left: -10px;
    list-style:none;
    color: var(--fontGray);
    font-size: 14px;
}
.passo1 ul li::before {
    content: '';
    background-image: url(https://placecage.com/60/60);
    background-color: red;
    width: 20px;
    height: 20px;
    display:inline-block;
    position: relative;
    top: -5px;
}
.passo1 ul li, 
.passo2 ul li, 
.passo3 ul li {
    margin: 25px 0;
}
.passo1 span{
    color: var(--fontGray) !important;
    font-size: 14px !important;
    vertical-align: top;
    display: inline-block;
}

<div class="instrucoes">
    <div class="passo1">
        <span>1.</span> <br>
        <span>Deve atender aos requisitos básicos</span>
        <ul>
            <li>
                <span>Possuir CNPJ</span>
            </li>
            <li>
                <span>Se enquadrar em um dos programas apoiados pelo banco</span>
            </li>
            <li>
                <span>Pertencer a um dos municípios atendidos</span>
            </li>
        </ul>
    </div>
</div>

---

Option 2

Put a background in li and control the size and position with background-size and background-position.

I left the comments in the code

View and execute the code below to see

.passo1 ul {
    margin-top: 10px;
    margin-left: -10px;
    /* list-style-image: url(https://placecage.com/60/60); */
    color: var(--fontGray);
    font-size: 14px;
}

.passo1 ul li, 
.passo2 ul li, 
.passo3 ul li {
    margin: 25px 0;
    padding-left: 2rem;
	list-style: none;
	background-image: url(https://placecage.com/60/60);
	background-repeat: no-repeat;
  /* posição da imagem */
	background-position: left center;
  /* tamanho da imagem */
	background-size: 20px;
}
.passo1 span{
    color: var(--fontGray) !important;
    font-size: 14px !important;
    vertical-align: top;
    display: inline-block;
}

<div class="instrucoes">
    <div class="passo1">
        <span>1.</span> <br>
        <span>Deve atender aos requisitos básicos</span>
        <ul>
            <li>
                <span>Possuir CNPJ</span>
            </li>
            <li>
                <span>Se enquadrar em um dos programas apoiados pelo banco</span>
            </li>
            <li>
                <span>Pertencer a um dos municípios atendidos</span>
            </li>
        </ul>
    </div>
</div>