.showcase-components-colorlist { border: 2px solid transparent; margin: 1px; padding: 2px; border-radius: 50%; cursor: pointer; position: relative; } .showcase-components-colorlist.selected::before { content: '✅'; position: absolute; left: 11px; top: 9px; }

 <div class="showcase-components-colorlist color showcase-components-colorlist color-- active"> <svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"> </circle> </svg> </div> <div class="showcase-components-colorlist selected"> <svg width="40" height="40"> <circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle> </svg> </div>

 <script> customElements.define("svg-option",class extends HTMLElement{ connectedCallback(){ this.style.display = "inline-block"; this.innerHTML=`<svg viewBox="0 0 50 50"> <circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/> <circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/> </svg>`; this.select(); this.onclick = (evt) => this.toggle(); } select(state = this.hasAttribute("selected")) { this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden"); } toggle(){ this.select( this.toggleAttribute("selected") ); } }) </script> <style> svg-option { --svg-option-size:180px; width: var(--svg-option-size); height: var(--svg-option-size); cursor: pointer; } svg-option[selected]{ background:lightgreen; } svg-option:not([selected]){ background:pink; } </style> <svg-option></svg-option> <svg-option fill="red" selected></svg-option> <svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>