Icon Circles Minimalist Logos Block for React

Edit FLORISTS at the top of the file: a name and a Lucide icon. Later items sit over earlier ones. Keep the stack to about seven, so the strip stays one line from sm, and update the "+4,000" circle and its screen-reader text.

It is plain CSS: a small label under each circle that is invisible until the circle is hovered, then fades in. It is not a tooltip component, so nothing is focusable and there are no extra tab stops. The same name is sr-only text in the list item, so touch and keyboard visitors lose nothing but the label.

Each item after the first has a negative start margin, and each circle carries a hairline edge plus a two-pixel ring in the page colour that cuts it out from the circle beneath. The margins are logical, so the stack runs from the start side on a right-to-left page.

The circles are a list named "Florists on Zinniaworks". Each item reads the shop's name, the last reads "and 4,000 more florists", and the icons and the visible "+4,000" are hidden from assistive technology.

The strip fades up once when the page loads, and a hovered circle rises four pixels while the colour changes. With reduced motion the entrance and the rise are off.