iconiq
—Open GitHub

Verified Badge

X-style verified badge with shimmer or static variants.

Iconiq UI

Installation

npx shadcn@latest add @iconiq/verified-badge

Props

VerifiedBadge

4 props

Inline X-style verified scallop with a check. Use shimmer or static variants.
variant"shimmer" | "static"
Defaultshimmer
Use `shimmer` for a sweeping highlight across the scallop or `static` for a fixed badge.
sizenumber
Default64
Width and height in pixels for the outer badge; the check scales to half this value.
classNamestring
Merged onto the root span. Pass a `text-*` class to override the default Twitter-blue scallop color.
aria-labelstring
DefaultVerified
Announced to screen readers. Override when the badge conveys a different status.

Notes

Extends native `span` props (`id`, `onClick`, `data-*`, tooltips, and other `aria-*` attributes) via prop spreading on the root.
Default color lives on the root span (`text-[hsl(203,89%,57%)]`); scallop paths use `currentColor` so `cn` can override via `className`.
The `shimmer` variant uses Motion to sweep a highlight across the scallop (0.5s pass, 1.5s pause between repeats) and skips animation when `prefers-reduced-motion` is enabled.
Root uses `role="img"` with `aria-label`; inner SVG shapes are `aria-hidden`.
Install path is `components/ui/verified-badge.tsx` with the `VerifiedBadge` export.