---
title: "A glossy squircle app icon"
description: "Why app icons use squircles and not rounded rectangles, and how to make one in the browser: an SVG squircle clip, a top sheen, an inset rim, and a glare that sweeps across on hover."
date: "2026-05-30"
tags: ["css", "svg", "clip-path", "frontend"]
---

The app grid on [explorer.b3.fun](https://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.

```tsx
<clipPath id="app-squircle" clipPathUnits="objectBoundingBox">
</clipPath>

```

## 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:

```tsx
{/* 1. top sheen */}

{/* 2. inset rim: lit top-left, shadowed bottom-right → slightly domed */}
  "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 */}
  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](https://explorer.b3.fun), a project I work on at B3. Grab
the component on the [App Icon](/components/app-icon) page.