HTML + CSSLiquid Glass
Clear glass icons with edge light
App icons in clear glass whose rim lights up where the light hits; the light follows your cursor and you can tint them.
Settings
16px
1x
8px
Code
<div class="uvq11-ico"><div class="wp" aria-hidden="true"></div><div class="gr"><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z"/></svg></span><span class="nm">Photos</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2.2"/></svg></span><span class="nm">Maps</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></span><span class="nm">Music</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></span><span class="nm">Notes</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 7.5V12l3 2"/></svg></span><span class="nm">Clock</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3"/><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z"/></svg></span><span class="nm">Weather</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.2"/></svg></span><span class="nm">Camera</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8"/></svg></span><span class="nm">Settings</span></button></div><div class="md" role="radiogroup" aria-label="Icon style"><label><input type="radio" name="uvq11-ico-m" value="c" checked><span>Clear</span></label><label><input type="radio" name="uvq11-ico-m" value="t"><span>Tinted</span></label></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A home screen grid in the clear icon style: each tile is frosted glass with a backdrop blur, a conic gradient on a masked rim that brightens on the side facing the light and on the opposite edge, and a soft inner gloss. When idle the light circles slowly, and on hover it points towards your cursor.
Switch between clear and tinted with the segmented control, set the tint with the main color and adjust the blur. Rename the apps or swap the line icons to build launchers, dashboards or app showcase sections.