Am einfachsten wäre es vermutlich, wenn Sie an der Formatierung der Auswahlbox überhaupt nichts machen, sondern das Herz einfach als <label> zum Eingabefeld definieren und das Eingabefeld selbst mittels "position: absolute; left: -9999px" aus dem Sichtfeld verbannen.
Welche CSS-Regeln angewendet werden, sehen Sie, wenn Sie in den Entwickler-Tools den Inspektor anklicken und dann mit dem Auswahl-Werkzeug die Checkbox anklicken.
> SVG habe ich auch schon probiert
Wir hatten damit kürzlich genau das gebaut, was Sie benötigen, und es hatte sehr gut funktioniert - da tun Sie sich halt auch einfacher, das Herz mal ausgefüllt und mal nicht-ausgefüllt zu zeigen. In der PNG-Variante braucht es dafür zwei unterschiedliche Grafiken, deren Sichtbarkeit dann mittels CSS gesteuert wird.