Yellow stars not correctly showing

Technical Q&A
,

Topic summary

  • Issue: A yellow star rating built with emoji renders consistently on desktop, but on iPhone/iPad it shows the default iOS star, creating inconsistent visuals across devices. Attached images illustrate the mismatch.

  • Cause: Emoji and native icon rendering depends on each device’s operating system and browser fonts, so identical appearance cannot be guaranteed with emoji.

  • Recommendation: Use images or SVG for the stars to ensure a uniform look across platforms. (SVG = scalable vector graphics.)

  • Outcome: The poster switched to images/SVG and confirmed it solved the problem. No further questions; issue resolved.

Summarized with AI on December 17. AI used: gpt-5.
1

Hi all,

Could any of the resident experts maybe give this newbie a helping hand?

I’m trying to create a yellow stars review like the Polar example attached. I’ve added HTML on the products description page and it came out really well as shown in the sample. On desktop view and desktop mobile view it look fine.

However when I checked the mobile view on my phone and ipad, the star emoji wasn’t the same and looked like the iphone standard star emoji.

How can i ensure the code stays uniform on the mobile devices on apple and android? thanks in advance

pola.png
pola.png518×353 22.4 KB

example.png
example.png397×291 8.33 KB

099.jpg
099.jpg1284×961 40.9 KB

2

Hi @BudBob

Each browser have different looks. If you want to have a same look on each browser, use image or svg instead of icons

1 Like
3

That works. Thanks a bunch!!

1 Like