ComponentsSpecimen
Icon Grid
Icon set display with names, usage descriptions, and a size scale row for comparing icon sizes.
Icon Grid
HouseHome / dashboard
GearSettings
MagnifyingGlassSearch
BellNotifications
UserProfile / account
Size Row
12px
16px
20px
24px
32px
48px
Installation
npx visor add icon-gridThis copies two files into your project:
components/ui/icon-grid/icon-grid.tsx— the componentcomponents/ui/icon-grid/icon-grid.module.css— the styles
Usage
import { IconGrid, IconSizeRow } from '@/components/ui/icon-grid/icon-grid';
import { House, Gear } from '@phosphor-icons/react';
{/* Grid of icons with metadata */}
<IconGrid icons={[
{ name: "House", usage: "Home / dashboard", icon: <House size={24} /> },
{ name: "Gear", usage: "Settings", icon: <Gear size={24} /> },
]} />
{/* Size comparison row */}
<IconSizeRow sizes={[
{ size: 16, icon: <House size={16} /> },
{ size: 24, icon: <House size={24} /> },
{ size: 32, icon: <House size={32} /> },
]} />API Reference
IconGridProps
| Prop | Type | Default | Description |
|---|---|---|---|
icons* | IconGridItemProps[] | — | Array of icon items with name, usage, and rendered icon element. |
className | string | — | Additional CSS class names to merge onto the element. |
IconSizeRowProps
| Prop | Type | Default | Description |
|---|---|---|---|
sizes | { size: number; icon: ReactNode }[] | — | Array of sizes with rendered icon elements |
className | string | — | Additional CSS class names |
Accessibility
IconGrid is a documentation utility. Icons within it are decorative — they do not need aria-label when used inside this component as the name and usage text provide the description.
In your application, always ensure interactive icons (icon-only buttons) have a visible or accessible label:
<button aria-label="Open settings">
<Gear size={20} />
</button>