Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Icon Circles Minimalist Logos Block for Svelte

Seven florists of a shop point-of-sale product as overlapping icon circles like an avatar stack, a +4,000 circle and one sentence, with each name on hover.

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 tiny social-proof strip for Svelte with Ark UI. Seven customer icons sit in circles that overlap like an avatar stack, a last circle counts the rest ("+4,000"), and one sentence beside them says what the product does for them. The strip sits on the page's top rule and has no other lines. Hovering a circle lifts it above its neighbours and names the shop in a small label under it; every name is also text for screen readers. On a phone the circles shrink to size-10 and the sentence drops under the stack. Built from Guides and Lucide icons, with CSS for the entrance and hover, and your theme's tokens for every colour. For a footer, a signup page or any place with room for one line of proof.

FAQ

How do I change the shops?

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.

How does the name label work?

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.

How do the circles overlap?

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.

How is it marked up for screen readers?

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.

What moves?

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.

All 100 logos blocks