IconTile

Rounded tinted square (or circle) holding an icon. The size prop (xs, sm, md, lg, xl) sets the tile and icon size (a number in px still works).

Jump to API reference

Import

Vue

import { UiIconTile } from '@ziyarago/ui/vue'

Tones

Vue

<UiIconTile icon="star" tone="brand" />

<UiIconTile icon="star" tone="sky" />

<UiIconTile icon="star" tone="success" />

<UiIconTile icon="star" tone="warning" />

<UiIconTile icon="star" tone="danger" />

<UiIconTile icon="star" tone="neutral" />

Shapes and sizes

Vue

<UiIconTile icon="plane" tone="sky" :size="32" />

<UiIconTile icon="hotel" tone="brand" :size="48" shape="circle" />

<UiIconTile icon="map-pin" tone="success" :size="64" />

Sizes

Vue

<UiIconTile icon="plane" tone="sky" size="xs" />

<UiIconTile icon="plane" tone="sky" size="sm" />

<UiIconTile icon="plane" tone="sky" size="md" />

<UiIconTile icon="plane" tone="sky" size="lg" />

<UiIconTile icon="plane" tone="sky" size="xl" />

API reference

Square or circular tinted tile holding an icon, used as a leading visual in lists and cards.

Props

PropType and valuesDefaultDescription

iconstring'circle'Icon name.

tonebrandskysuccesswarningdangerneutral'brand'Tint color. Unknown values fall back to brand.

shapesquarecircle'square'Rounded square or full circle. Only "circle" changes the shape.

sizexssmmdlgxl'md'Tile size: xs 28, sm 32, md 40, lg 48, xl 56 px; a number is used as px. The icon is half the tile.