Icon Circles Static Grid Wall Logos Block for React

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.

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.

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.

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.

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.