How to colorize the 'x' in a cancel svg icon

Question

I am looking at this svg icon: https://www.iconfinder.com/icons/352263/cancel_icon

How do I give the x inside of the circle a color other than transparent?

Screenshot

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="#b01e1e" class="fill-000000"></path>
    <path d="M0 0h48v48H0z" fill="none"></path>
</svg>

Answer 1

Try using a different svg icon since your current svg does not have a fill property of the X part

This should help you out: Change the fill property to be a hex or rgba color or a predefined color name, for eg. a hex color code of red is #f00

<svg class="vector" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- `CIRCLE` background -->
  <path
    d="M20 0C8.95 0 0 8.95 0 20C0 31.05 8.95 40 20 40C31.05 40 40 31.05 40 20C40 8.95 31.05 0 20 0ZM30 27.17L27.17 30L20 22.83L12.83 30L10 27.17L17.17 20L10 12.83L12.83 10L20 17.17L27.17 10L30 12.83L22.83 20L30 27.17Z"
    fill="tomato"
  />
  
  <!-- `X` symbol -->
  <path
    d="M30 27.17L27.17 30L20 22.83L12.83 30L10 27.17L17.17 20L10 12.83L12.83 10L20 17.17L27.17 10L30 12.83L22.83 20L30 27.17Z"
    fill="pink"
  />
</svg>