Components

Icons

Render Material Symbols, decorative shapes, tool glyphs, and brand logos.

Colorffy UI provides four icon components. All share base props — size, color, decorative, and ariaLabel (required when decorative is false).

Material Symbols

Pass a Material Symbols entity code:

<template>
  <UiIconMaterial icon-code="&#xe88a;" />
  <UiIconMaterial icon-code="&#xe838;" :size="32" color="var(--theme-primary-base)" />
</template>

Decorative shapes

<template>
  <UiIconShapes shape="blob-3" />
  <UiIconShapes shape="star-5" :size="48" />
</template>

Tool & brand glyphs

<template>
  <UiIconTool tool="Google Analytics" />
  <UiIconApp brand="github" />
</template>

Shared base props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	—	Size token or px/em value.
`color`	`string \| null`	`currentColor`	Override color.
`decorative`	`boolean`	`true`	Hide from assistive tech.
`ariaLabel`	`string \| null`	—	Required when `decorative` is `false`.

Per-component prop

Component	Required prop	Values
`UiIconMaterial`	`iconCode`	Material Symbols entity (e.g. ``)
`UiIconShapes`	`shape`	`blob-1`…`blob-7`, `star-1`…`star-8`, `circle-1`…`circle-4`, `shape-1`…`shape-4`, `lighting-1`
`UiIconTool`	`tool`	`Stripe`, `Google Analytics`, `Firebase Console`, `Search Console`, …
`UiIconApp`	`brand` (or `icon`)	`github`, `google`, `apple`, `nuxt`, `discord`, `twitter`, …

Edit this pageorReport an issue

Empty

Communicate an empty state with an icon, message, and optional action.

Inputs

Collect user input with text, select, checkbox, radio, range, file, and color inputs.