The motif that stands in for a product logo or marks a feature next to a heading. Decorative by default (the icon is hidden from assistive technology). The tint uses the semantic palette; pass bg-*/text-* classes to override it with any colour via tailwind-merge.
Examples
Colours
The semantic tints.
<div class="flex items-center gap-3">
<UiIconTile icon="mdi:shield-lock-outline" />
<UiIconTile icon="mdi:check" color="success" />
<UiIconTile icon="mdi:alert-outline" color="warning" />
<UiIconTile icon="mdi:close" color="error" />
<UiIconTile icon="mdi:information-outline" color="blue" />
<UiIconTile icon="mdi:cog-outline" color="gray" />
</div>Sizes
Four sizes from sm to xl.
<div class="flex items-center gap-3">
<UiIconTile icon="mdi:note-text-outline" size="sm" />
<UiIconTile icon="mdi:note-text-outline" size="md" />
<UiIconTile icon="mdi:note-text-outline" size="lg" />
<UiIconTile icon="mdi:note-text-outline" size="xl" />
</div>Custom colour
Pass bg-*/text-* classes to use a colour outside the semantic set.
<div class="flex items-center gap-3">
<UiIconTile icon="mdi:palette-outline" class="bg-sky-100 text-sky-700 dark:bg-sky-400/15 dark:text-sky-300" />
<UiIconTile icon="mdi:palette-outline" class="bg-violet-100 text-violet-700 dark:bg-violet-400/15 dark:text-violet-300" />
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| iconrequired | string | — | MDI icon name. |
| color | string | 'primary' | Tint colour from the semantic palette. primarygraysuccesswarningerrorblue |
| size | string | 'md' | Tile size; the radius scales with it. smmdlgxl |