Components

Icons

Render Material Symbols, decorative shapes, and any inline SVG.

Colorffy UI provides three icon components. All take decorative, ariaLabel (required when decorative is false) and size. UiIconMaterial and UiIconSvg also take a color, and UiIconSvg a uid that namespaces IDs inside inlined SVG markup.

Material Symbols

Pass a Material Symbols entity code. Without size or color, the glyph follows the surrounding text:

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

Decorative shapes

Shapes keep their own gradients, so color has no effect on them:

<template>
  <UiIconShapes shape="blob-3" />
  <UiIconShapes shape="star-5" size="lg" />
  <UiIconShapes shape="circle-2" :size="96" />
</template>

Custom SVG

Paste any inline <svg> (e.g. from thesvg.org) into the default slot, or pass raw markup via content for data-driven icons from your own local registry:

<template>
  <!-- Slot: paste the SVG directly -->
  <UiIconSvg :size="32">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="…" /></svg>
  </UiIconSvg>

  <!-- content: for data-driven lists -->
  <UiIconSvg v-for="logo in logos" :key="logo.name" :content="logo.svg" />
</template>

color recolors monochrome icons via currentColor; multi-color SVGs keep their own fills.

Props

Prop	Type	Default	Description
`decorative`	`boolean`	`true`	Hide from assistive tech.
`ariaLabel`	`string \| null`	—	Required when `decorative` is `false`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'md'`	`UiIconMaterial` and `UiIconSvg`: 20 / 24 / 32 / 40 / 48px. `UiIconShapes`: 24 / 32 / 45 / 64 / 80px. A number is px. `UiIconMaterial` has no default and follows the text size when unset.
`color`	`string \| null`	`currentColor`	`UiIconMaterial` and `UiIconSvg`: any CSS color.
`uid`	`string \| null`	generated with `useId()`	`UiIconSvg` only: namespace seed for IDs inside inlined SVG markup.
`title`	`string \| null`	—	`UiIconShapes` only: accessible name when `decorative` is `false` and `ariaLabel` is unset.

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`
`UiIconSvg`	slot or `content`	Any inline `<svg>` markup — pasted in the slot, or a raw string via `content`; `uid` namespaces internal SVG IDs

Edit this pageorReport an issue

Empty

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

Inputs

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