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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Square media for list rows, feature cards and empty states, held to one size and radius
Status and brand markers in a soft tint, a solid fill or a theme or Tailwind palette color
Compact links, initials or counts, and glyphs with a status dot pinned to one corner

When not to use

A finished first run screen with heading, message and actions around the glyph: use the Empty State blocks
A finished KPI or feature tile with a value, a label and a trend beside the glyph: use the Card blocks
Markers for each step of a multi step flow, with active and completed states: use the Stepper component

Third-party API docs

Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin

Markdownhttps://web.dev.reui.io/components/icon-tile.md

MCPget_component("icon-tile")

Installnpx shadcn@latest add @reui/icon-tile

Full index for agents:llms.txtReUI MCP setup

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.

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.

Browse all Application blocks

Frequently Asked Questions

What is a shadcn icon tile used for?

Use it wherever an icon needs a surface rather than floating on the page: list-row media, feature cards, empty states, dashboard stat tiles, settings rows, onboarding steps, navigation, and app-launcher grids. It keeps every icon at the same size and radius.

What variants does Icon Tile support?

Three. Outline is a bordered tile and the default choice. Elevated uses a muted fill with a background-coloured ring and a soft raised shadow. Frame is a double container, a muted ring around an inset card, which matches the ReUI Frame look.

What sizes are available?

Five: xs at 24px, sm at 32px, default at 40px, lg at 48px, and xl at 64px. The glyph scales with the tile, so you set one size prop instead of tuning the icon separately.

How do I make a circular icon tile?

Set radius="full" on the tile. The default value follows the radius of the active style theme, so tiles stay in line with buttons, inputs, and cards unless you opt into the circular look.

Can I change the tile colors?

Yes. Pass Tailwind classes through className, or set the four CSS variables the component exposes to control the surface, border, ring, and glyph color per instance. Nothing needs to be forked to recolor a tile.

Can I put anything other than an icon inside?

Yes. The children slot accepts any React node, so a short initial, a number, a small logo, or a status glyph works too. The tile only handles sizing, centering, and the surface treatment.

How is Icon Tile different from Icon Stack?

Icon Tile is a flat square surface for everyday icon media and repeats well across rows and grids. Shadcn Icon Stack is a layered isometric illustration meant for a single focal moment such as an empty state or onboarding panel.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.