How can I add icons to my clock face?

[R2dTOO]

I am trying to create a clock face for my wife, and have pretty much everything that I need on it. I was able to get the background image to show up, but can't get the icons for steps, heart rate, etc to show. Does anyone have examples of the files that need to be edited (and how) in order for the icons to show up over the background image? Sorry if this is an obvious answer. I am completely new to all of this.

[JonFitbit]

Put the images into the resources folder. e.g /resources/image1.png

Then in your index.gui file you use the image:

<image href="image1.png" x="0" y="0" width="100" height="100" />

The order of elements in the index.gui matters, so if you want this image to appear above the background image, it must be added to the file after the background image. Like this:

<svg>
  <image href="background.png" x="0" y="0" width="100%" height="100%" />
  <image href="image1.png" x="0" y="0" width="100" height="100" />
</svg>

[TechNinja99]

I am trying to add more than 1 icon but only the one that is coded first shows up. How do I fix this?

code:

<svg class="background">
<text id="timeLabel" />
<image href="heartRateIcon.png" x="75" y="100" width="30" height="30" />
<text id="heartRateLabel" />
<image href="batteryIcon.png" x="75" y="25" width="30" height="30" />
<text id="batteryLabel" />
</svg>

[JonFitbit]

This looks fine. Did you put the image file in your resources folder? Is the image actually 30x30? The device won't resize big images due to lack of memory.

[TechNinja99]

Thanks, resizing the image worked. But when I use a white image, it just makes it black.

[TechNinja99]

Image: https://imgur.com/a/TmHrm6g 

Actual icon: https://imgur.com/a/bZg6Z9W

[Gondwana]

Ensure you're using rgb (24-bit) images, rather than greyscale (8-bit).

[TechNinja99]

Ok, Thanks for the answer!

[Ineedhelp_]

How is the background image done?

[Guy_]

@Ineedhelp_  see - Solved: SVG background image