Read the full writeup at https://seangeng.com/writing/a-glossy-squircle-app-icon.md and implement it in my project.
It covers: A glossy squircle app icon. 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.
Requirements:
- Follow the technique/approach exactly as described in the writeup.
- Adapt names, colors, and styling to my project's existing conventions.
- If it's a component, make it reusable with sensible props and TypeScript types.
- Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion.
- When done, tell me which files you created or changed and how to use it.
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:
B3
HypeDuel
Quests
PewPew
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.
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.