Icon Customizations for Mobile Devices


Has anyone in the community has a work around for Change Icons for Checkboxes and Radio Buttons for surveys that are viewed mobile devices. 

I was able to use custom icons for a survey, however, the custom icons does not come through on mobile devices. 

I think this is expected (according to the article below) however I am curious whether anyone has come up with creative work arounds leveraging the API or something else. 


Change Icons for Checkboxes and Radio Buttons

Please note the below icon customizations use custom CSS that does not work on mobile devices.



Many thanks!


Lola Gill answered
    Lola Gill 6.99K Rep.

    I’m not a CSS expert, but using the heart icon example, I was able to get the hearts on the mobile version with this CSS:

    .sg-survey .sg-mobile-optimized:not(.sg-rtl) input[type=radio] + label:before {
    content: “\f08a”;

    .sg-survey .sg-mobile-optimized:not(.sg-rtl) input[type=radio]:checked + label:before {
    content: “\f08a”;

    So instead os starting the CSS code with:


    I’m starting with
    .sg-survey .sg-mobile-optimized:not(.sg-rtl)

    Hopefully this is helpful!

    Lola Gill edited answer


      Question stats

      • Active
      • Views3878 times
      • Answers1 answer
      • Followers1 follower