Tone-adjustable solid variant
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Filled tiles that swap the primary fill for an info, success, warning or destructive bg class with a white glyph
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 quieter tint where the glyph keeps the tone color on a pale fill: use the Icon Tile Soft Tones example
- 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
Agent notes
- Without the ReUI
info,successandwarningcolors, those 3 tiles paint no fill and theirtext-whiteglyph vanishes on a light page
https://reui.io/components/icon-tile/c-icon-tile-16.mdget_example("c-icon-tile-16")npx shadcn@latest add @reui/c-icon-tile-16Shadcn Components in Icon Tile Solid Tones
About Shadcn Icon Tile Solid Tones
Solid tones. Built with the Icon Tile component. A free, open source shadcn icon tile example you can install with npx shadcn@latest add @reui/c-icon-tile-16 and edit as your own code.
What You Can Build With Shadcn Icon Tile Solid Tones
- Composes Icon Tile, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-icon-tile-16
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Icon Tile Examples
- Default Default icon tile
- Elevated Elevated icon tile
- Framed Framed icon tile
- All Variants All variants
- Sizes Sizes
- Circular Circular tiles
- Custom Sizing Custom sizing
- Color Tones Color tones
- Text Content Text content
- List Row List row
- Feature Card Feature card
- Empty State Empty state
Related Shadcn Component Categories
Open-source shadcn input components for form entry, search fields, and auth screens.
Open-source shadcn input group components for prefixed inputs, suffixed actions, and combined form controls.
Open-source shadcn OTP input components for verification codes, 2FA flows, and secure confirmation screens.
Open-source shadcn item row components for list rows, settings items, and action rows.
Open-source shadcn kanban components for task boards, workflow pipelines, and drag-and-drop planning.
Open-source shadcn keyboard shortcut components for hotkey hints, command docs, and shortcut legends.
Frequently Asked Questions
When should I use Shadcn Icon Tile Solid Tones?
Use it for filled tiles that swap the primary fill for an info, success, warning or destructive bg class with a white glyph.
Shadcn Icon Tile as a whole fits:
- 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
For a quieter tint where the glyph keeps the tone color on a pale fill, use the Icon Tile Soft Tones example. For a finished first run screen with heading, message and actions around the glyph, use the Empty State blocks. For a finished KPI or feature tile with a value, a label and a trend beside the glyph, use the Card blocks. For markers for each step of a multi step flow, with active and completed states, use the Stepper component.
How do I install Shadcn Icon Tile Solid Tones?
Is Shadcn Icon Tile Solid Tones free to use?
Which components does Shadcn Icon Tile Solid Tones use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.