# Icon tiles
A rounded square with an icon in it: the mark of a screen's subject in its title, of a kind of record, of a drop zone.
## Examples
The plain tile is in the accent; the tones and `icon-tile-sm` follow Bootstrap's grammar.
```html
```
### Categories
`icon-tile-chart-1` to `icon-tile-chart-8` take the charts' eight colors, for a category, not a state - the tile of a kind of record matches its series in a [chart](chart.md) and its [dot](dot.md#dot-categories).
```html
```
### In a title
```html
Excursions
Content type ยท 28 items
```
## Accessibility
- The tile is decoration: its icon is `aria-hidden="true"` and the words beside it name the subject.
- The icon keeps a 3:1 contrast with its tile in both themes.
## Tokens
From [`css/components/icon-tile.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/icon-tile.css). It declares `--redz-tile-bg`, `--redz-tile-fg`, `--redz-tile-chart` on its root, never on rows or items.
It reads the theme's `--redz-tile-base-bg`, `--redz-primary-subtle`, `--redz-tile-base-fg`, `--redz-primary`, `--redz-radius-12`, `--redz-radius-8`, `--redz-radius-16`, `--redz-bg`, `--redz-text`, `--redz-chart-1`, `--redz-chart-2`, `--redz-chart-3`, `--redz-chart-4`, `--redz-chart-5`, `--redz-chart-6`, `--redz-chart-7`, `--redz-chart-8`, `--redz-secondary-subtle`, `--redz-secondary`, `--redz-success-subtle`, `--redz-success`, `--redz-danger-subtle`, `--redz-danger`, `--redz-warning-subtle`, `--redz-warning`, `--redz-info-subtle`, `--redz-info`, `--redz-color`.