Help with layout and icon grayscale

[mdb17]

I am hoping some of y'all with more experience can help me. I am not experienced with SVG and JavaScript and wanted to learn something new. 

I am struggling to get the layout behavior the way a want it. I man trying to get the elements to stack like they do in the new SpO2 Signature clock face but I just cant seem to get it right. this is what I am getting currently:

Here is the code I am using.

index.gui:

  <svg class="container" x="50%" y="200">
    <image class="image"
           width="24" height="24" href="images/steps_36px_final.png" fill="blue" opacity="1"/>
    <text class="item"
          id="stat" fill="white" text-length="8"/>
    <text class="item" 
          id="statGoal" fill="fb-light-gray" font-size="12" text-length="16"/>
  </svg>

styles.css:

.screen { width: 100%; height: 100%; viewport-fill: black; }
.container { height: 25; width: 200; }
.item { width: 100%; height: 25%; x: 0; y:$+5; fill: red; text-anchor: middle; }
.image {x:0; y:0}

The second issue is when trying to change the color of the step icon. I have changed the image to be 8-bit grayscale but don't know what I am doing wrong. Here is the image. 

[Gondwana]

That image is in 256-colour palette format. You need to change it to greyscale format. Note that this actually changes the file format, and not just the colours used within it.

[mdb17]

Oh thanks. How would I go about checking that the file is correct? I used this site: Convert image to PNG (online-convert.com) to do the conversion as was suggested on another forum post.