A glossy squircle app icon

The app grid on explorer.b3.fun has these little glossy squircle icons that I kept wanting elsewhere, so I pulled the treatment out. Hover them:

Squircle, not rounded rectangle

A rounded rectangle has a spot on each side where the straight edge suddenly becomes a circular arc. Your eye catches that seam, especially at icon sizes. A squircle (superellipse) curves continuously into the corner, no seam, which is exactly why every platform's app icons use one.

You can't get it from border-radius. I use an SVG clip path, and the trick that makes it reusable is clipPathUnits="objectBoundingBox": the path is defined in a 0 to 1 space, so one definition clips an icon at any size.

<clipPath id="app-squircle" clipPathUnits="objectBoundingBox">
  <path d="M.5,0 C.9,0 1,.09 1,.5 C1,.91 .9,1 .5,1 C.09,1 0,.9 0,.5 C0,.09 .09,0 .5,0Z" />
</clipPath>
 
<div style={{ clipPath: "url(#app-squircle)", backgroundImage: `url(${src})` }} />

Three layers make it glossy

The shape alone looks flat. Three cheap layers give it depth, all stacked over the image and clipped by the parent squircle:

{/* 1. top sheen */}
<div className="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/15 to-transparent" />
 
{/* 2. inset rim: lit top-left, shadowed bottom-right → slightly domed */}
<div style={{ boxShadow:
  "inset 4px 10px 10px -4px rgba(255,255,255,.3), inset -4px -10px 10px -4px rgba(0,0,0,.3)" }} />
 
{/* 3. glare parked off-screen, slides across on hover */}
<div className="absolute inset-0 -translate-x-full -skew-x-[15deg]
  bg-gradient-to-r from-transparent via-white/35 to-transparent
  transition-transform duration-700 group-hover:translate-x-full" />

The sheen and rim are static and sell the "domed glass" look on their own. The glare is the bit of delight: a skewed band of white sitting just off the left edge that translates fully across on group-hover. Because the parent clips to the squircle, the band never spills past the rounded edge.

That's the whole thing. One SVG path, two gradients, an inset shadow, and a hover transform. Drop any image behind it and it instantly looks like an app icon.

From explorer.b3.fun, a project I work on at B3. Grab the component on the App Icon page.