Skip to content

Icon Tile

A rounded-square tile holding an icon or logo on a contrast-checked tint or the brand fill.

betaSource

Installation

pnpm add @syntara/react @syntara/tokens
import { IconTile } from '@syntara/react';

Usage

import { IconTile } from '@syntara/react';
import { IconWallet } from '@syntara/icons';

export function WalletTile() {
  return (
    <IconTile tint="solid">
      <IconWallet />
    </IconTile>
  );
}

Examples

Sizes

sm, md and lg, soft and solid.

Tints

Every tint: solid, brand, accent, info, success, warning, danger, none.

solid
brand
accent
info
success
warning
danger
none

In a list

tint="auto" gives each account a stable colour from its name.

  • Everyday accountSavings · 4821
    ₹84,250.00
  • Travel cardCredit · 0917
    ₹12,400.50
  • Emergency fundDeposit · 3306
    ₹2,00,000.00

Logo image

An img with alt text; neutral face by default, or on a tint.

Corner GrocerCorner Grocer

Accessibility

No keyboard interaction of its own.

  • Decorative by default (aria-hidden), because a tile usually sits next to its label. Give it alt or aria-label when it stands alone.
  • Every tint is a pair the engine checks at 4.5:1 in both schemes; icons only need 3:1 (WCAG 1.4.11).
  • Not interactive. To make it clickable, put it inside a Button or Link, which carries the name and focus ring.

Guidelines

Do

  • Use tint="auto" with a name for lists of assets or accounts, so each keeps its colour.
  • Use solid for one hero mark (the brand logo, a feature card).

Don’t

  • Don't use tints to carry status on their own; pair them with text.
  • Don't put text or numbers in a tile; use Avatar for initials.

API reference

IconTile

children
ReactNode

An icon from @syntara/icons. Sized to half the tile at the brand's icon stroke.

src
string

An image (asset or merchant logo) instead of an icon.

alt
string

Accessible name. With src it's the image's alt; without, the tile gets role="img". Omit it (and aria-label) when a visible label sits next to the tile: the tile is then aria-hidden.

tint
  • auto
  • none
  • solid
  • brand
  • accent
  • info
  • success
  • warning
  • danger

solid = action.primary pair; tones = the same engine-checked bg/fg pairs as Avatar; auto = a stable tint from a hash of name (same hash as Avatar).

Default 'brand' (icons) / 'none' (images)

name
string

Seed for tint="auto" (falls back to alt).

size
  • sm
  • mddefault
  • lg

32, 40 or 48px.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour16
accent.subtleaccent.textaction.primary.bgaction.primary.fgaction.secondary.bgaction.secondary.fgfeedback.danger.bgfeedback.danger.fgfeedback.info.bgfeedback.info.fgfeedback.success.bgfeedback.success.fgfeedback.warning.bgfeedback.warning.fgsurface.sunkentext.default
Space and size4
icon-strokespace.10space.12space.8
Shape1
radius.button
Depth2
shadow.highlightshadow.raised
Other1
rim