Shadcn Icon Tile

Custom Shadcn Icon Tile for React and Tailwind CSS. Shadcn Icon Tile that wraps an icon in a consistent square surface for list rows, feature cards, and empty states.

Base UI Radix UI

Installation


pnpm dlx shadcn@latest add @reui/icon-tile

Usage

import { FolderIcon } from "lucide-react"
 
import { IconTile } from "@/components/reui/icon-tile"

Shadcn Icon Tile Free Components

Browse 17 production-ready Shadcn Icon Tile components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 17 Shadcn Icon Tile components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Icon Stack Kanban

<IconTile aria-hidden="true">
  <FolderIcon />
</IconTile>

import { IconTile } from "@/components/reui/icon-tile"
import { PackageIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconTile variant="elevated" aria-hidden="true">
        <PackageIcon />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { LayoutDashboardIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconTile variant="frame" aria-hidden="true">
        <LayoutDashboardIcon />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { PackageIcon } from 'lucide-react'

const variants = ["outline", "elevated", "soft", "solid", "frame"] as const

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      {variants.map((variant) => (
        <IconTile key={variant} variant={variant} aria-hidden="true">
          <PackageIcon />
        </IconTile>
      ))}
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { PackageIcon } from 'lucide-react'

const sizes = ["xs", "sm", "default", "lg", "xl"] as const

export function Pattern() {
  return (
    <div className="flex items-end justify-center gap-4">
      {sizes.map((size) => (
        <IconTile key={size} variant="elevated" size={size} aria-hidden="true">
          <PackageIcon />
        </IconTile>
      ))}
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { CircleCheckIcon, GlobeIcon, StarIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      <IconTile variant="outline" size="lg" radius="full" aria-hidden="true">
        <GlobeIcon />
      </IconTile>
      <IconTile variant="elevated" size="lg" radius="full" aria-hidden="true">
        <StarIcon />
      </IconTile>
      <IconTile variant="frame" size="lg" radius="full" aria-hidden="true">
        <CircleCheckIcon />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { ImageIcon, Settings2Icon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      <IconTile variant="elevated" className="size-14" aria-hidden="true">
        <ImageIcon  className="size-7" />
      </IconTile>
      <IconTile
        variant="elevated"
        className="[--icon-tile-icon-size:--spacing(7)] [--icon-tile-size:--spacing(14)]"
        aria-hidden="true"
      >
        <Settings2Icon />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { CircleAlertIcon, CircleCheckIcon, ClockIcon, StarIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-3">
      <IconTile
        aria-hidden="true"
        className="border-primary/10 bg-primary/10 text-primary dark:border-primary/25 dark:bg-primary/15"
      >
        <StarIcon />
      </IconTile>
      <IconTile
        aria-hidden="true"
        className="border-success/15 bg-success/10 text-success-foreground dark:border-success/25 dark:bg-success/15 dark:text-success"
      >
        <CircleCheckIcon />
      </IconTile>
      <IconTile
        aria-hidden="true"
        className="border-warning/15 bg-warning/10 text-warning-foreground dark:border-warning/25 dark:bg-warning/15 dark:text-warning"
      >
        <ClockIcon />
      </IconTile>
      <IconTile
        aria-hidden="true"
        className="border-destructive/15 bg-destructive/10 text-destructive-foreground dark:border-destructive/25 dark:bg-destructive/15 dark:text-destructive"
      >
        <CircleAlertIcon />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-3">
      <IconTile variant="elevated" className="text-xs font-medium">
        AK
      </IconTile>
      <IconTile
        variant="outline"
        radius="full"
        className="text-muted-foreground text-xs font-medium"
      >
        12
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { FileTextIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center">
      <Item variant="outline">
        <ItemMedia>
          <IconTile variant="elevated" size="sm" aria-hidden="true">
            <FileTextIcon />
          </IconTile>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Quarterly report</ItemTitle>
          <ItemDescription>Updated 2 hours ago by Anna</ItemDescription>
        </ItemContent>
      </Item>
    </div>
  )
}

import { Frame, FramePanel } from "@/components/reui/frame"
import { IconTile } from "@/components/reui/icon-tile"
import { LayoutDashboardIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Frame className="w-full max-w-xs">
      <FramePanel className="flex flex-col gap-3">
        <IconTile variant="elevated" size="lg" aria-hidden="true">
          <LayoutDashboardIcon />
        </IconTile>
        <div className="flex flex-col gap-1">
          <h3 className="text-sm font-medium">Unified dashboard</h3>
          <p className="text-muted-foreground text-xs">
            Track every project, deployment and metric from a single workspace.
          </p>
        </div>
      </FramePanel>
    </Frame>
  )
}

import { IconTile } from "@/components/reui/icon-tile"

import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { FolderIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <Empty>
        <EmptyHeader>
          <EmptyMedia>
            <IconTile variant="frame" size="xl" aria-hidden="true">
              <FolderIcon />
            </IconTile>
          </EmptyMedia>
          <EmptyTitle>No files yet</EmptyTitle>
          <EmptyDescription>
            Upload a file to get started. Everything you add shows up here.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { Settings2Icon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconTile
        render={<a href="#" aria-label="Open settings" />}
        variant="elevated"
        className="hover:bg-accent focus-visible:ring-ring focus-visible:ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
      >
        <Settings2Icon  aria-hidden="true" />
      </IconTile>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { GlobeIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <span className="relative inline-flex" aria-hidden="true">
        <IconTile variant="elevated">
          <GlobeIcon />
        </IconTile>
        <span className="border-background bg-success absolute -end-0.5 -top-0.5 size-3 rounded-full border-2" />
      </span>
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { StarIcon } from 'lucide-react'

// The `soft` variant derives every fill and border from currentColor, so one
// text color class retints the whole tile. An empty class keeps the primary
// default. The tones pair a readable light-mode foreground with the brighter
// dark-mode token, matching the ReUI badge light variants.
const tones = [
  "",
  "text-info-foreground dark:text-info",
  "text-success-foreground dark:text-success",
  "text-warning-foreground dark:text-warning",
  "text-destructive-foreground dark:text-destructive",
]

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      {tones.map((tone) => (
        <IconTile
          key={tone || "primary"}
          variant="soft"
          className={tone}
          aria-hidden="true"
        >
          <StarIcon />
        </IconTile>
      ))}
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { CircleCheckIcon } from 'lucide-react'

// The `solid` variant is a filled tone with a contrasting glyph. Override the
// fill with a `bg-*` class plus a readable text color. An empty class keeps the
// primary default.
const tones = [
  "",
  "bg-info text-white",
  "bg-success text-white",
  "bg-warning text-white",
  "bg-destructive text-white",
]

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      {tones.map((tone) => (
        <IconTile
          key={tone || "primary"}
          variant="solid"
          className={tone}
          aria-hidden="true"
        >
          <CircleCheckIcon />
        </IconTile>
      ))}
    </div>
  )
}

import { IconTile } from "@/components/reui/icon-tile"
import { CircleAlertIcon, MessageSquareIcon, Settings2Icon, StarIcon } from 'lucide-react'

// The `elevated` variant keeps its background-colored ring and shadow while the
// fill is overridden with a raw Tailwind color plus a white glyph, for solid
// brand-colored tiles.
const tiles = [
  {
    className: "bg-indigo-500 text-white",
    icon: (
      <StarIcon />
    ),
  },
  {
    className: "bg-amber-500 text-white",
    icon: (
      <MessageSquareIcon />
    ),
  },
  {
    className: "bg-emerald-600 text-white",
    icon: (
      <Settings2Icon />
    ),
  },
  {
    className: "bg-rose-500 text-white",
    icon: (
      <CircleAlertIcon />
    ),
  },
]

export function Pattern() {
  return (
    <div className="flex items-center justify-center gap-4">
      {tiles.map((tile) => (
        <IconTile
          key={tile.className}
          variant="elevated"
          className={tile.className}
          aria-hidden="true"
        >
          {tile.icon}
        </IconTile>
      ))}
    </div>
  )
}

Variant	Description
`outline`	The default. A plain bordered surface on the page background, quiet enough for list rows and toolbars.
`elevated`	A muted fill with a 2px background-colored ring and a soft shadow, the same recipe as the card-2 block. Reads as a physical chip lifted off the page.
`soft`	A tinted double container: an opacity-filled outer ring with no border around a bordered inner card, all from `currentColor`. Defaults to `text-primary`; set a text color class to retint the whole tile.
`solid`	A filled tone with a contrasting glyph. Defaults to `bg-primary`; override the fill with a `bg-*` class plus a readable text color to retint.
`frame`	A double container: a muted ring around an inset card, matching the `Frame` primitive. The inner card is painted with an `::after` pseudo element, so there is no wrapper node and `render` composition keeps working.

Size	Tile	Glyph
`xs`	24px	14px
`sm`	32px	16px
`default`	40px	18px
`lg`	48px	22px
`xl`	56px	28px

Attribute	Value
`data-slot`	`"icon-tile"`
`data-variant`	`"outline" \| "elevated" \| "soft" \| "solid" \| "frame"`
`data-size`	`"xs" \| "sm" \| "default" \| "lg" \| "xl"`

Variable	Default (at `size="default"`)	Description
`--icon-tile-size`	`--spacing(10)`	Tile width and height.
`--icon-tile-icon-size`	`--spacing(4.5)`	Glyph size applied to child svgs that carry no `size-*` class.
`--icon-tile-radius`	Active style radius	Corner radius. Also drives the inner card of the `soft` and `frame` variants.
`--icon-tile-inset`	`--spacing(0.75)`	Gap between the outer ring and the inner card of the `soft` and `frame` variants.

A plain utility on the tile. A size-* class in className wins over the primitive's size-(--icon-tile-size) through tailwind-merge, so the tile box changes while the glyph keeps the size from the size prop.
```
<IconTile variant="elevated" className="size-14">
  <ImageIcon />
</IconTile>
```
A size-* class directly on the child icon. Child svgs are auto-sized with [&_svg:not([class*=size-])]:size-(--icon-tile-icon-size), so an icon that already carries a size-* class opts out of the tile's glyph sizing.
```
<IconTile className="size-14">
  <ImageIcon className="size-7" />
</IconTile>
```
The CSS variables. Setting --icon-tile-size and --icon-tile-icon-size keeps the tile and glyph in step and needs no class on the icon. The soft and frame inset stays on the value from the size prop, so set --icon-tile-inset too when such a tile moves far from its scale step.
```
<IconTile className="[--icon-tile-icon-size:--spacing(7)] [--icon-tile-size:--spacing(14)]">
  <Settings2Icon />
</IconTile>
```

Prop	Type	Default	Description
`variant`	`"outline" \| "elevated" \| "soft" \| "solid" \| "frame"`	`"outline"`	The surface treatment of the tile.
`size`	`"xs" \| "sm" \| "default" \| "lg" \| "xl"`	`"default"`	The tile size, which also sets the glyph size.
`radius`	`"default" \| "full"`	`"default"`	`"default"` uses the active style radius, `"full"` makes the tile circular.
`render`	`useRender.RenderProp`	-	Render a different element while keeping the tile styles (Base UI `useRender`).
`className`	`string`	-	Additional CSS classes, including overrides of the tile CSS variables.
`children`	`React.ReactNode`	-	The icon, initials, or short text rendered inside the tile.

import { IconTile } from "@/components/reui/icon-tile"
import { FolderIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconTile aria-hidden="true">
        <FolderIcon />
      </IconTile>
    </div>
  )
}

Shadcn Icon Tile

Installation

Usage

Shadcn Icon Tile Free Components

Examples

Elevated icon tile

Framed icon tile

All variants

Sizes

Circular tiles

Custom sizing

Color tones

Text content

List row

Feature card

Empty state

Interactive tile

Status overlay

Soft tones

Solid tones

Brand colors

API Reference

Variants

Sizes

Radius

Composition

Data attributes

CSS Variables

Overriding the size

Props