Shadcn Icon Tile
Browse 17 production-ready shadcn icon tile components for list-row media, feature cards, dashboard stat tiles, settings rows, and app-launcher grids. ReUI Icon Tile is a square container that gives every icon in your app the same size, radius, and surface treatment.
Shadcn Icon Tile: Consistent Icon Surfaces for React
ReUI Icon Tile is a shadcn-compatible component that wraps an icon in a square surface with a fixed size, radius, and border treatment. It gives every icon in a product the same footprint, so list rows, cards, and settings screens line up without one-off wrapper divs.
Icon Tile ships three variants (outline, elevated, and frame) and five sizes from 24px to 64px. The glyph scales with the tile, so you pick a size once and the icon, padding, and radius follow.
The examples cover the core shadcn icon tile component, all three variants, the size scale, circular tiles, colored surfaces, list-row media, feature cards, and dashboard stat tiles.
What is Shadcn Icon Tile?
Shadcn Icon Tile is a small layout primitive: a square container with a consistent surface for a single icon. The child can be a lucide icon, Tabler icon, Hugeicons icon, Phosphor icon, Remix icon, a ReUI animated icon, or any React node, and the tile handles sizing, centering, radius, and background.
ReUI ships Icon Tile as a copy-ready component for both Radix and Base UI shadcn setups. It follows the shadcn copy-and-own model, uses Tailwind CSS utilities, and reads its colors from your theme tokens so tiles match the active Shadcn Create style.
Why Use an Icon Tile?
Icons on their own drift. One screen uses size-4 in a bordered box, the next uses size-5 on a muted circle, and rows stop aligning. An icon tile turns that into a single decision: choose a variant and a size, and every surface in the app agrees.
It is most useful where an icon carries visual weight rather than pure decoration: list-row media, feature cards, empty states, dashboard stat tiles, settings rows, onboarding steps, navigation, and app-launcher grids. Because the tile is built from Tailwind utilities and CSS variables, you keep full control of color without forking the component.
Shadcn Icon Tile Features
- Three Surface Variants. Outline is a bordered tile and the default. Elevated adds a muted fill, a background-coloured ring, and a soft raised shadow. Frame renders a double container (a muted ring around an inset card) matching the ReUI Frame look.
- Five Sizes. xs (24px), sm (32px), default (40px), lg (48px), and xl (64px). The glyph scales with the tile, so the icon stays proportional at every step.
- Radius Control. The radius prop accepts default, which follows the active style theme, or full for a circular tile. No extra Tailwind overrides needed for avatar-style icon buttons.
- Fully Overridable. Style the tile with className, or reach for the four CSS variables to change surface, border, ring, and glyph color per instance without editing the component source.
- Consistent Row and Card Media. Drop it into list rows, feature cards, empty states, settings rows, onboarding steps, navigation, and app-launcher grids so icon media keeps one footprint across the product.
- Radix and Base UI Versions. ReUI ships the same Icon Tile visuals for Radix-based shadcn projects and Base UI projects, so teams can keep a consistent design language across stacks.
Integrating with Other Components
Use Icon Tile inside Shadcn Item media for list rows, package entries, and settings screens. Pair it with Shadcn Badge when the row also needs status context.
Combine Icon Tile with Shadcn Card for feature grids and dashboard stat tiles, and with Shadcn Empty for zero-data screens that need a calm icon surface instead of a full illustration.
The frame variant is built to sit next to Shadcn Frame surfaces. Add Shadcn Tooltip or Shadcn Button for app-launcher grids and navigation, and read the full prop reference in the Base UI docs or the Radix docs.
Card Blocks in ReUI Pro
The free examples above pair with 43 production ready card blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.
- Card (43 blocks)Card components for content display, data summaries, and interactive elements.