Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Icon Circles Static Grid Wall Logos Block for Radix UI

Sixteen customers of a password manager as icon-only circles in one framed figure, with the customer named in a label on hover and as text for screen readers.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A wall of icon-only logos for React with Radix UI. A centred header sits over one framed figure: solid hairlines run around the group of circles with + marks on its corners, and nothing is drawn between them, so the circles float. Each circle is a muted tile with a Lucide icon that turns to the text colour on hover, and hovering one shows the customer's name in a small label above it. The name is also in the page as text, so a screen reader reads every customer and the circles are never tab stops. Eight across from md, four across below it, with twelve circles on a phone. It's built from Guides alone, with CSS for the entrance and your theme's tokens for every colour. For products whose customers' marks are recognisable without a name.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file: each entry is a Lucide icon and a name. The name feeds both the label and the screen-reader text. Keep the count a multiple of eight so the rows are full from md, and of four below it; a phone shows the first twelve.

Why is the name only shown on hover?

The circles are meant to be quiet. The label is a convenience for people with a pointer, not the only way to find the name: it is also text in the page, hidden visually and read by screen readers. The circles aren't links or buttons, so they aren't tab stops, and touch screens simply show the icons. The label is plain CSS (a hidden element that fades in on hover), not a tooltip component, because a tooltip must be reachable from the keyboard and these circles are not interactive. If you want names visible everywhere, use a wall with wordmarks.

How is the frame drawn?

One Guides layer on the box around the list draws four solid hairlines that overshoot the corners, with a + mark on each. Nothing is drawn between the circles. The frame is inset from the page rails and capped at a readable width.

Does it follow my theme?

Yes. Circles are bg-muted with a faint foreground ring and muted-foreground icons, turning to the foreground on hover. There is no primary colour, no dark scope and no colour logo.

How does it fit on a phone?

The grid is four across, three rows of twelve, with the last four hidden below sm; from sm it shows all sixteen in four rows, and from md in two rows of eight. The circles are 56 pixels, comfortably larger than a touch target, and nothing scrolls sideways at 320 pixels.

All 100 logos blocks